跳至主要內容 跳至文件導覽

貢獻(Contribute)

透過我們的文件建置腳本和測試來協助開發 Bootstrap。

工具設定(Tooling setup)

Bootstrap 使用 npm scripts 來建置文件和編譯原始檔案。我們的 package.json 包含這些用於編譯程式碼、執行測試等的腳本。這些不適用於我們的儲存庫和文件之外的用途。

要使用我們的建置系統並在本地執行文件,您需要 Bootstrap 的原始檔案和 Node 的副本。請按照以下步驟操作,您就可以開始了:

  1. 下載並安裝 Node.js,我們使用它來管理相依套件。
  2. 下載 Bootstrap 的原始碼或 fork 並複製 Bootstrap 的儲存庫
  3. 導覽至根目錄 /bootstrap 並執行 npm install 以安裝 package.json 中列出的本地相依套件。

完成後,您將能夠從命令列執行提供的各種命令。

使用 npm scripts(Using npm scripts)

我們的 package.json 包含許多用於開發專案的任務。在終端機中執行 npm run 以查看所有 npm 腳本。主要任務包括:

任務說明
npm start編譯 CSS 和 JavaScript、建置文件並啟動本地伺服器。
npm run dist建立包含編譯檔案的 dist/ 目錄。使用 SassAutoprefixerterser
npm test在執行 npm run dist 後在本地執行測試
npm run docs-serve在本地建置並執行文件。

透過 npm 使用我們的入門專案開始使用 Bootstrap! 前往 Sass & JS 範例範本儲存庫,了解如何在您自己的 npm 專案中建置和自訂 Bootstrap。包含 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap Icons。

Sass

Bootstrap 使用 Dart Sass 將我們的 Sass 原始檔案編譯成 CSS 檔案(包含在我們的建置流程中),如果您使用自己的資源管道編譯 Sass,我們建議您也這樣做。我們之前在 Bootstrap v4 中使用 Node Sass,但 LibSass 和建構在其上的套件(包括 Node Sass)現在已經棄用

Dart Sass 使用 10 的捨入精度,出於效率原因不允許調整此值。我們在進一步處理生成的 CSS 時(例如在壓縮期間)不會降低此精度,但如果您選擇這樣做,我們建議至少保持 6 的精度以防止瀏覽器捨入問題。

Autoprefixer

Bootstrap 使用 Autoprefixer(包含在我們的建置流程中)在建置時自動為某些 CSS 屬性加入瀏覽器前綴。這樣做可以讓我們只需撰寫一次 CSS 的關鍵部分,同時消除對 v3 中那些瀏覽器 mixin 的需求,從而節省時間和程式碼。

我們在 GitHub 儲存庫中的一個單獨檔案中維護透過 Autoprefixer 支援的瀏覽器列表。詳情請參閱 .browserslistrc

RTLCSS

Bootstrap 使用 RTLCSS 來處理編譯後的 CSS 並將其轉換為 RTL——基本上是用相反的屬性替換水平方向感知的屬性(例如 padding-left)。這讓我們只需撰寫一次 CSS,並使用 RTLCSS controlvalue 指令進行微調。

本地文件(Local documentation)

在本地執行我們的文件需要使用 Astro。Astro 是一個現代靜態網站產生器,讓我們能夠結合 Markdown 和 React 元件來建置文件。以下是如何開始:

  1. 完成上述的工具設定以安裝所有相依套件。
  2. 從根目錄 /bootstrap,在命令列中執行 npm run docs-serve
  3. 在瀏覽器中開啟 http://localhost:9001,完成!

閱讀 Astro 的文件以了解更多關於使用 Astro 的資訊。

疑難排解(Troubleshooting)

如果您在安裝相依套件時遇到問題,請解除安裝所有先前的相依套件版本(全域和本地)。然後,重新執行 npm install