Skip to main content Skip to docs navigation

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

工装设置

Bootstrap 使用npm 脚本来构建文档和编译源文件。我们的package.json包含这些用于编译代码、运行测试等的脚本。这些不打算在我们的存储库和文档之外使用。

要使用我们的构建系统并在本地运行我们的文档,您需要一份 Bootstrap 源文件和 Node.js 文件的副本。按照以下步骤操作,您应该准备好摇滚了:

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

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

使用 npm 脚本

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

任务 描述
npm start 编译 CSS 和 JavaScript,构建文档,并启动本地服务器。
npm run dist 创建dist/包含已编译文件的目录。使用SassAutoprefixerterser
npm test 运行后在本地运行测试npm run dist
npm run docs-serve 在本地构建和运行文档。
通过我们的入门项目通过 npm 开始使用 Bootstrap!前往twbs/bootstrap-npm-starter模板存储库,了解如何在您自己的 npm 项目中构建和自定义 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap Icons。

SASS

Bootstrap 使用Dart Sass将我们的 Sass 源文件编译成 CSS 文件(包含在我们的构建过程中),如果您使用自己的资产管道编译 Sass,我们建议您也这样做。我们之前将 Node Sass 用于 Bootstrap v4,但 LibSass 和基于它构建的包(包括 Node Sass)现在已弃用

Dart Sass 使用 10 的舍入精度,出于效率原因不允许调整此值。我们不会在进一步处理生成的 CSS 期间降低此精度,例如在缩小期间,但如果您选择这样做,我们建议保持精度至少为 6,以防止出现浏览器舍入问题。

自动前缀

Bootstrap 使用Autoprefixer(包含在我们的构建过程中)在构建时自动将供应商前缀添加到某些 CSS 属性。这样做可以节省我们的时间和代码,因为它允许我们一次编写 CSS 的关键部分,同时消除了像 v3 中那样的供应商混合的需要。

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

RTLCSS

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

本地文档

在本地运行我们的文档需要使用 Hugo,它通过hugo-bin npm 包安装。Hugo 是一个非常快速且可扩展的静态站点生成器,它为我们提供:基本包含、基于 Markdown 的文件、模板等。以下是如何开始:

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

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

故障排除

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