Bootstrap5 貢獻(xiàn)

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

安裝工具

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

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

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

上述步驟完成后，你就可以運(yùn)行 Bootstrap 所提供的各個(gè)命令了。

使用 npm 腳本

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

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

Sass

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

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

Autoprefixer

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

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

RTLCSS

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

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

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

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

如需了解更多關(guān)于 Hugo 的信息，請(qǐng)參閱其 文檔。

故障排除

如果你在安裝依賴項(xiàng)時(shí)遇到了問題，請(qǐng)卸載所有先前安裝的依賴項(xiàng)及其各個(gè)版本（包括全局和本地）。然后，重新運(yùn)行? npm install?。