Skip to main content Skip to docs navigation
View on GitHub

Contribute

使用我們的文檔建構腳本和測試,幫助開發 Bootstrap

六角學院的 Bootstrap 5 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

工具設定

Boostrap 的建構系統採用 NPM 腳本 。 我們的 package.json 包含了方便框架工作的方法,包括編譯程式碼、運行測試和更多工作。

要使用我們的建構系統並在本地運行我們的文件,你需要一份 Boostrap 原始檔案的副本和 Node.js。遵循以下步驟,然後準備開始:

  1. 下載和安裝 Node.js, 我們採用 Node.js 管理我們的從屬附件。
  2. 接著 下載 Bootstrap 的原始碼 或者拷貝 Bootstrap 的資料庫
  3. 瀏覽至 /bootstrap 根目錄跟執行 npm install 從我們本地的 package.json. 依賴清單中安裝。

當完成時, 你將能夠執行從命令列所提供的各種指令。

使用 NPM 腳本

我們的 package.json 為了開發專案包含了大量任務。 執行 npm run 在終端機看到所有的 NPM 腳本。
主要的任務包括:

任務 描述
npm start 編譯 CSS 跟 JavaScript, 建立頁面, 跟啟動本地伺服器。
npm run dist 在編譯的檔案上建立 /dist 根目錄。 Sass, Autoprefixer, 和 terser.
npm test 執行 npm run dist 之後在本地進行測試
npm run docs-serve 在本地建立和運行文件
使用 npm 快速入門開始使用 Bootstap! 前往 twbs/bootstrap-npm-starter 樣板儲存庫了解你如何在自己的 npm 專案中建構與自訂 Bootstrap。 裡面包含了 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap 圖示。

Sass

Bootstrap 使用 Dart Sass 將我們的 Sass 原始檔編譯為 CSS 檔案 (包含在我們建構的過程中),如果您使用自己的管道編譯 Sass,我們也建議您這樣做。我們之前在 Bootstrap v4 中使用了 Node Sass,但是現在 LibSass 和基於它構建的包,包括 Node Sass,都被棄用

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

自動增加前綴詞

Bootstrap 採用 (我們的建構過程中包含的) Autoprefixer 以便自動在建構時向某些 CSS 屬性增加前輟詞。
自動增加前輟詞可讓我們每次編寫 CSS 時,無需採用第三版中用的那些 Sass mixins,這樣可以節省我們的時間。

我們在 GitHub 版本庫中的一份獨立檔案中保存了通過 Autoprefixer 支援的瀏覽器清單。預知明細,請參見 .browserslistrc

RTLCSS

Bootstrap 使用 RTLCSS 處理已編譯的 CSS 並將其轉換為 RTL – 基本上取代了水平方向和他們相反的屬性 (例如. padding-left)。 它只允許我們單次編輯 CSS 並使用 RTLCSS controlvalue 指令進行細微調整。

本地檔

在本地運行我們的檔需要採用 Hugo,透過 npm 套件來安裝 hugo-bin。 Hugo 是一種快速和提供我們相當的可擴展性靜態站點生產器: 基本包含, 基於 Markdown 的檔案,模板,還有更多。 這是開始的方法:

  1. 透過執行 tooling setup 安裝以上所有的從屬附件。
  2. /bootstrap 的根目錄中,在命令列中執行 npm run docs-serve
  3. 在瀏覽器中打開 http://localhost:9001/, 然後大功告成。 閱讀這個 documentation 學習更多有關於 Hugo 的使用。

故障排解

若安裝附件遇到問題,先解除安裝所有先前的版本(包含全域及區域)。 然後,再次運行 npm install