Bootstrap5 貢獻

2021-09-01 11:31 更新

利用我們提供的文檔構(gòu)建腳本和測試工具來為 Bootstrap 的開發(fā)提供幫助。

安裝工具

Bootstrap 使用 npm 腳本 來構(gòu)建文檔并編譯源文件。我們的 package.json 文件中包含了這些用于編譯源碼、運行測試等工作的腳本。這些腳本不適合用在我們的源碼倉庫和文檔之外的地方。

無論是使用 Bootstrap 自帶的構(gòu)建系統(tǒng)還是在本地啟動文檔網(wǎng)站,都需要下載 Bootstrap 源碼并安裝 Node。請按照以下步驟操作并搭建本地運行環(huán)境:

  1. 下載并安裝 Node.js,其自帶了我們用于管理依賴項的工具。
  2. 下載 Bootstrap 的源碼 或克隆 Bootstrap 的源碼倉庫 到本地。
  3. 進入源碼的根目錄 /bootstrap 并運行 npm install 以安裝 package.json 文件中列出的所有依賴項到本地。

上述步驟完成后,你就可以運行 Bootstrap 所提供的各個命令了。

使用 npm 腳本

Bootstrap 自帶的 package.json 文件包含了用于項目本身開發(fā)所需的許多命令。運行 npm run 以查看所有可用的命令。 包含的的主要命令如下:

命令 描述
npm start 編譯 CSS 和 JavaScript 源碼、構(gòu)建文檔并啟動一個本地服務(wù)器運行文檔網(wǎng)站。
npm run dist 創(chuàng)建 dist/ 目錄并將編譯后的文件放置于此目錄中。用到了 Sass、Autoprefixer 和 terser 工具。
npm test 運行 npm run dist 命令之后在本地運行測試程序
npm run docs-serve 在本地構(gòu)建并啟動文檔網(wǎng)站。
利用 npm 和我們提供的模板項目快速上手 Bootstrap! 

請前往 twbs/bootstrap-npm-starter 模板倉庫,以了解如何如何在你自己的 npm 項目中構(gòu)建和定制 Bootstrap。包括 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 圖標庫。

Sass

Bootstrap 使用 Dart Sass 將 Sass 源文件編譯為 CSS 文件(已包含在我們的構(gòu)建流程中了),如果你需要自己編譯 Sass 源碼的話,我們建議您使用相同的工具。我們在先前的 Bootstrap v4 版本中使用的是 Node Sass 工具,但是現(xiàn)在包括 LibSass 及構(gòu)建在 LibSass 上的工具(包括 Node Sass)已經(jīng)被 Sass 官方標記為  不推薦使用 了。

Dart Sass 對浮點數(shù)的舍入精度為 10,并且出于運行效率的考慮,不允許對此值進行調(diào)整。對于生成的 CSS,我們不會在后續(xù)的處理過程中降低此精度(例如壓縮時),但是如果你選擇降低精度的話,我們建議至少保持在 6,以避免瀏覽器的舍入問題。

Autoprefixer

Bootstrap 使用 Autoprefixer (已包含在我們的構(gòu)建流程中了)工具在構(gòu)建時自動將特定于廠商的屬性前綴添加到某些 CSS 屬性前。對于 CSS 的關(guān)鍵部分,此工具可以讓我們只需要編寫一次然后由自動添加,并且避免了像 Bootstrap v3 版本中那樣手動添加帶有特定于廠商前綴的 CSS 屬性,這樣就節(jié)省我們的時間并減少了代碼量。

我們將需要 Autoprefixer 支持的瀏覽器列表保存在一個單獨的文件中,并提交到 GitHub 倉庫中進行管理。有關(guān)詳細信息,請參見 .browserslistrc。

RTLCSS

Bootstrap 使用 RTLCSS 工具處理編譯后的 CSS 并將其轉(zhuǎn)換為支持 RTL(基本上就是將有關(guān)橫坐標軸方向的屬性,例如 padding-left,修改為相反的方向)。這樣我們就只需要編寫一次 CSS,然后使用 RTLCSS 并微調(diào) control 和  value 指令就全部搞定了。

在本地啟動文檔網(wǎng)站

在本地啟動文檔網(wǎng)站需要用到 Hugo 工具,它是通過 hugo-bin 這個 npm 軟件包安裝到本地的。Hugo 是一個快速且可擴展的靜態(tài)站點生成器,它為我們提供的基本功能包括:文件包含、編譯 Markdown 文件、模板等。以下是 Hugo 的用法:

  1. 參照上面的 安裝工具 章節(jié)的說明安裝所有依賴項。
  2. 進入根目錄 /bootstrap,運行 npm run docs-serve 命令。
  3. 在瀏覽器中輸入 http://localhost:9001/ 網(wǎng)址,然后就能看到文檔網(wǎng)站的內(nèi)容了。

如需了解更多關(guān)于 Hugo 的信息,請參閱其 文檔

故障排除

如果你在安裝依賴項時遇到了問題,請卸載所有先前安裝的依賴項及其各個版本(包括全局和本地)。然后,重新運行? npm install?。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號