跳到主要內容 跳到文檔導航
Check
in English

定制

了解如何使用 Sass、大量全局選項、擴展的顏色系統等來主題化、自定義和擴展 Bootstrap。

概述

有多種方法可以自定義 Bootstrap。您的最佳路徑可能取決於您的項目、構建工具的複雜性、您使用的 Bootstrap 版本、瀏覽器支持等等。

我們首選的兩種方法是:

  1. 通過包管理器使用 Bootstrap ,這樣您就可以使用和擴展我們的源文件。
  2. 使用 Bootstrap 的編譯分發文件或jsDelivr,以便您可以添加或覆蓋 Bootstrap 的樣式。

雖然我們無法在此處詳細介紹如何使用每個包管理器,但我們可以提供一些關於將 Bootstrap 與您自己的 Sass 編譯器一起使用的指導。

對於那些想要使用分發文件的人,請查看入門頁面以了解如何包含這些文件和示例 HTML 頁面。從那裡,查閱文檔以了解您想要使用的佈局、組件和行為。

當您熟悉 Bootstrap 時,請繼續探索本節以了解有關如何使用我們的全局選項、使用和更改我們的顏色系統、我們如何構建我們的組件、如何使用我們不斷增長的 CSS 自定義屬性列表以及如何使用的更多詳細信息在使用 Bootstrap 構建時優化您的代碼。

CSP 和嵌入式 SVG

一些 Bootstrap 組件在我們的 CSS 中包含嵌入的 SVG,以在瀏覽器和設備上一致且輕鬆地為組件設置樣式。對於具有更嚴格CSP配置的組織,我們記錄了嵌入式 SVG 的所有實例(所有這些實例都通過 應用background-image),因此您可以更徹底地查看您的選項。

根據社區對話,在您自己的代碼庫中解決此問題的一些選項包括用本地託管的資產替換 URL、刪除圖像和使用內聯圖像(並非在所有組件中都可能)以及修改您的 CSP。我們的建議是仔細審查您自己的安全策略,並在必要時確定最佳前進路徑。