Skip to main content Skip to docs navigation
View on GitHub

贡献

利用我们提供的文档构建脚本和测试工具来为 Bootstrap 的开发提供帮助。

On this page

安装工具

Bootstrap 使用 npm 脚本 来构建文档并编译源文件。我们的 package.json 文件中包含了这些用于编译源码、运行测试等工作的脚本。这些脚本不适合用在我们的源码仓库和文档之外的地方。

无论是使用 Bootstrap 自带的构建系统还是在本地启动文档网站，都需要下载 Bootstrap 源码并安装 Node。请按照以下步骤操作并搭建本地运行环境：

  1. 下载并安装 Node.js，其自带了我们用于管理依赖项的工具。
  2. 下载 Bootstrap 的源码 或克隆 Bootstrap 的源码仓库 到本地。
  3. 进入源码的根目录 /bootstrap 并运行 npm install 以安装 package.json 文件中列出的所有依赖项到本地。

上述步骤完成后，你就可以运行 Bootstrap 所提供的各个命令了。

使用 npm 脚本

Bootstrap 自带的 package.json 文件包含了用于项目本身开发所需的许多命令。运行 npm run 以查看所有可用的命令。 包含的的主要命令如下：

Task Description
npm start Compiles CSS and JavaScript, builds the documentation, and starts a local server.
npm run dist Creates the dist/ directory with compiled files. Uses Sass, Autoprefixer, and terser.
npm test Runs tests locally after running npm run dist
npm run docs-serve Builds and runs the documentation locally.
利用 npm 和我们提供的模板项目快速上手 Bootstrap！ 请前往 twbs/bootstrap-npm-starter 模板仓库，以了解如何如何在你自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 图标库。

Sass

Bootstrap 使用 Dart Sass 将 Sass 源文件编译为 CSS 文件（已包含在我们的构建流程中了），如果你需要自己编译 Sass 源码的话，我们建议您使用相同的工具。我们在先前的 Bootstrap v4 版本中使用的是 Node Sass 工具，但是现在包括 LibSass 及构建在 LibSass 上的工具（包括 Node Sass）已经被 Sass 官方标记为 不推荐使用 了。

Dart Sass 对浮点数的舍入精度为 10，并且出于运行效率的考虑，不允许对此值进行调整。对于生成的 CSS，我们不会在后续的处理过程中降低此精度（例如压缩时），但是如果你选择降低精度的话，我们建议至少保持在 6，以避免浏览器的舍入问题。

Autoprefixer

Bootstrap uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.

我们将需要 Autoprefixer 支持的浏览器列表保存在一个单独的文件中，并提交到 GitHub 仓库中进行管理。有关详细信息，请参见 .browserslistrc。

RTLCSS

Bootstrap uses RTLCSS to process compiled CSS and convert them to RTL – basically replacing horizontal direction aware properties (e.g. padding-left) with their opposite. It allows us only write our CSS a single time and make minor tweaks using RTLCSS control and value directives.

在本地启动文档网站

在本地启动文档网站需要用到 Hugo 工具，它是通过 hugo-bin 这个 npm 软件包安装到本地的。Hugo 是一个快速且可扩展的静态站点生成器，它为我们提供的基本功能包括：文件包含、编译 Markdown 文件、模板等。以下是 Hugo 的用法：

  1. 参照上面的 安装工具 章节的说明安装所有依赖项。
  2. 进入根目录 /bootstrap，运行 npm run docs-serve 命令。
  3. 在浏览器中输入 http://localhost:9001/ 网址，然后就能看到文档网站的内容了。

如需了解更多关于 Hugo 的信息，请参阅其 文档。

故障排除

Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun npm install.