對于 Bootstrap 3,有一個非常方便的工具可以自定義您想要在 css/js 縮小檔案中使用哪些功能(以節省加載時間)。
我正在閱讀 Bootstrap 5 的手冊,但老實說我不明白該怎么做。我還閱讀了優化頁面,在這里我也沒有發現任何有用的東西。
你能幫我如何在縮小檔案中只保留我需要的功能嗎?
uj5u.com熱心網友回復:
雖然Bootstrap 檔案暗示需要捆綁器來加載特定的 Bootstrap 組件腳本檔案,但您可以簡單地使用ES6 匯入來配置加載的內容。瀏覽器支持很好。
所以你不會加載全面的 dist 檔案。您將加載一個自定義腳本,該腳本匯入您需要的內容并對應于您正在使用的 SCSS 檔案。它看起來像這樣:
<head>
<script src="https://cdnjs.../popper.js/.../popper.min.js"></script>
<script type="module">
import '/bootstrap/main/js/dist/tooltip.js';
</script>
<script>
let tooltipTriggerList = []
.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
let tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</head>
<body class="p-4">
<p title="A tooltip." data-bs-toggle="tooltip">Hover for a Bootstrap Tooltip.</p>
</body>
請注意,匯入的腳本檔案必須提供適當的 CORS 標頭和 MIME 型別application/javascript,否則會出錯。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/495348.html
標籤:javascript html css 推特引导 引导程序 5
上一篇:表格延伸到螢屏外
下一篇:會話處理在PHP上沒有正確設定
