跳至主要内容 跳至文档导航

使用我们的文档构建脚本和测试来帮助开发 Bootstrap。

工具设置

Bootstrap 使用 npm 脚本 来构建文档和编译源文件。我们的 package.json 容纳了这些脚本,用于编译代码、运行测试等。它们不适用于我们的存储库和文档之外。

要使用我们的构建系统并在本地运行我们的文档,您需要一份 Bootstrap 源文件和 Node 的副本。按照以下步骤操作,您就可以开始使用了

  1. 下载并安装 Node.js,我们用它来管理我们的依赖项。
  2. 下载 Bootstrap 的源代码分叉并克隆 Bootstrap 的存储库
  3. 导航到根目录 /bootstrap 目录并运行 npm install 以安装我们列在 package.json 中的本地依赖项。

完成后,您将能够从命令行运行提供的各种命令。

使用 npm 脚本

我们的 package.json 包含了用于开发项目的众多任务。运行 npm run 以在您的终端中查看所有 npm 脚本。主要任务包括:

任务 描述
npm start 编译 CSS 和 JavaScript,构建文档并启动本地服务器。
npm run dist 使用 SassAutoprefixerterser 创建包含已编译文件的 dist/ 目录。
npm test 在运行 npm run dist 之后在本地运行测试
npm run docs-serve 构建并本地运行文档。
通过 npm 使用我们的入门项目开始使用 Bootstrap!前往 Sass 和 JS 示例 模板存储库,了解如何在自己的 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 的精度以防止浏览器舍入问题。

Autoprefixer

Bootstrap 使用 Autoprefixer(包含在我们的构建过程中)在构建时自动为某些 CSS 属性添加供应商前缀。这样做可以节省我们的时间和代码,因为我们可以在编写 CSS 的关键部分一次,同时无需使用 v3 中的供应商 mixin。

我们在 GitHub 存储库中的一个单独文件中维护通过 Autoprefixer 支持的浏览器列表。有关详细信息,请参阅 .browserslistrc

RTLCSS

Bootstrap 使用 RTLCSS 处理已编译的 CSS 并将其转换为 RTL,基本上用它们的反义词替换水平方向感知属性(例如 padding-left)。它允许我们只编写一次 CSS,并使用 RTLCSS 控制 指令进行微调。

本地文档

在本地运行我们的文档需要使用 Hugo,该 Hugo 通过 hugo-bin npm 包进行安装。Hugo 是一款极其快速且可扩展的静态网站生成器,为我们提供了:基本包含、基于 Markdown 的文件、模板等。以下是开始使用它的方法

  1. 按照上述 工具设置 运行以安装所有依赖项。
  2. 从根目录 /bootstrap 目录中,在命令行中运行 npm run docs-serve
  3. 在浏览器中打开 http://localhost:9001/,瞧。

通过阅读 Hugo 的 文档 了解有关使用 Hugo 的更多信息。

故障排除

如果您在安装依赖项时遇到问题,请卸载所有以前的依赖项版本(全局和本地)。然后,重新运行 npm install