Bootstrap5 概覽

了解如何使用Sass設(shè)置主題，自定義和擴(kuò)展Bootstrap，一系列全局選項(xiàng)，擴(kuò)展的色彩系統(tǒng)等等。

• Sass  使用的源Sass文件來(lái)利用變量，映射，mixin和函數(shù)。
  
• 控件   使用內(nèi)置變量自定義Bootstrap，輕松切換全局CSS首選項(xiàng)。
  
• 顏色   了解并自定義整個(gè)工具箱的顏色系統(tǒng)。
  
• 組件   了解如何通過(guò)基類和修飾符類快速構(gòu)建所有組件。
  
• CSS    變量使用Bootstrap的CSS自定義屬性進(jìn)行快速和前沿性的設(shè)計(jì)和開發(fā)。
  
• 優(yōu)化   保持項(xiàng)目精簡(jiǎn)、快速響應(yīng)和可維護(hù)性，時(shí)刻得到最好的體驗(yàn)。
  

概述

有多種方法可以自定義Bootstrap。 最佳方法取決于你的項(xiàng)目、構(gòu)建工具的復(fù)雜性、所使用的Bootstrap版本、瀏覽器支持等等。

我們首選的兩種方法是:

1. 通過(guò) 軟件包管理器 使用Bootstrap，以便你可以使用和擴(kuò)展我們的源文件。
2. 使用Bootstrap編譯的分發(fā)文件或 jsDelivr，這樣你就可以添加或覆蓋Bootstrap的樣式。

盡管我們無(wú)法在此處詳細(xì)介紹如何使用每個(gè)軟件包管理器，但是我們可以為在你自己的Sass編譯器中 使用Bootstrap 提供一些指導(dǎo)。

對(duì)于那些想要使用分發(fā)文件的用戶，請(qǐng)查看 入門頁(yè)面，了解如何包含這些文件以及示例HTML頁(yè)面。從那里，請(qǐng)查閱文檔以了解您想要使用的布局、組件和操作。

在你熟悉Bootstrap時(shí)，請(qǐng)繼續(xù)查閱本節(jié)，以獲取有關(guān)如何利用全局選項(xiàng)，使用和更改顏色系統(tǒng)，如何構(gòu)建組件，如何使用不斷增長(zhǎng)的CSS自定義屬性列表以及如何使用它們的更多詳細(xì)信息。在使用Bootstrap構(gòu)建代碼時(shí)優(yōu)化代碼。

CSPs和嵌入式svg

一些Bootstrap組件在我們的CSS中包含嵌入式SVG，以在瀏覽器和設(shè)備之間一致且輕松地對(duì)組件進(jìn)行樣式設(shè)置。對(duì)于具有更嚴(yán)格的CSP配置的組件，我們已記錄了嵌入式SVG的所有實(shí)例（所有實(shí)例均通過(guò) background-image 應(yīng)用），如此你可以更清楚地查看你的選項(xiàng)。

• 手風(fēng)琴
• 關(guān)閉按鈕（用于警報(bào)和模式）
• 復(fù)選框/單選框
• 開關(guān)按鈕
• 表單驗(yàn)證圖標(biāo)
• 下拉列表
• 輪播控件
• 導(dǎo)航欄切換按鈕

社區(qū)中，在你自己的代碼庫(kù)中解決此問(wèn)題的一些選項(xiàng)包括用本地托管的資產(chǎn)替換URL，刪除圖像和使用內(nèi)聯(lián)圖像（并非在所有組件中都可用）以及修改CSP。 我們的建議是仔細(xì)檢查你自己的安全策略，并在必要時(shí)決定最佳方案。