自定義 (Overview)
了解如何使用 Sass 設置主體、自定義和擴展 Bootstrap,一系列全局選項,擴展的色彩系統等等。
總覽
有多種方法可以自定義 Bootstrap。最佳途徑取決於您的項目、建構工具的複雜性、所使用的 Bootstrap 版本、瀏覽器支持度等等。
我們的兩種首選方法是:
- 使用 Bootstrap 透過 package manager 以便您可以使用及擴展我們的原始文件。
- 使用 Bootstrap 的已編譯文件或 jsDelivr 以便您可以添加或覆蓋 Bootstrap 的樣式。
雖然我們無法在此詳細介紹如何使用每個 package manager,但我們可以提供一些有關 透過你的 Sass 編譯器來使用 Bootstrap 的指導。
對於想要使用分發文件的人,請查看 getting started 頁面 ,以了解如何包含這些文件以及範例 HTML 頁面。並由此查閱文件以獲取您想要使用的排版、元件與行為。
當您熟悉 Bootstrap 時,請持續探索本章節,以獲取更多有關如何利用 global options 的細節、使用及更改我們的色彩系統、如何建構元件、如何使用 CSS 自定義屬性,以及如何在使用 Bootstrap 建構程式時優化 code。
CSPs and embedded SVGs
Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. For organizations with more strict CSP configurations, we’ve documented all instances of our embedded SVGs (all of which are applied via background-image
) so you can more thoroughly review your options.
- Accordion
- Close button (used in alerts and modals)
- Form checkboxes and radio buttons
- Form switches
- Form validation icons
- Select menus
- Carousel controls
- Navbar toggle buttons
Based on community conversation, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary.