Contribute
使用我們的文檔建構腳本和測試,幫助開發 Bootstrap
工具設定
Boostrap 的建構系統採用 NPM 腳本 。 我們的 package.json 包含了方便框架工作的方法,包括編譯程式碼、運行測試和更多工作。
要使用我們的建構系統並在本地運行我們的文件,你需要一份 Boostrap 原始檔案的副本和 Node.js。遵循以下步驟,然後準備開始:
- 下載和安裝 Node.js, 我們採用 Node.js 管理我們的從屬附件。
- 接著 下載 Bootstrap 的原始碼 或者拷貝 Bootstrap 的資料庫。
- 瀏覽至
/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
|
在本地建立和運行文件 |
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 control 和 value 指令進行細微調整。
本地檔
在本地運行我們的檔需要採用 Hugo,透過 npm 套件來安裝 hugo-bin。 Hugo 是一種快速和提供我們相當的可擴展性靜態站點生產器: 基本包含, 基於 Markdown 的檔案,模板,還有更多。 這是開始的方法:
- 透過執行 tooling setup 安裝以上所有的從屬附件。
- 從
/bootstrap
的根目錄中,在命令列中執行npm run docs-serve
。 - 在瀏覽器中打開
http://localhost:9001/
, 然後大功告成。 閱讀這個 documentation 學習更多有關於 Hugo 的使用。
故障排解
若安裝附件遇到問題,先解除安裝所有先前的版本(包含全域及區域)。 然後,再次運行 npm install
。