贡献
使用我们的文档构建脚本和测试帮助开发 Bootstrap。
工装设置
Bootstrap 使用npm 脚本来构建文档和编译源文件。我们的package.json包含这些用于编译代码、运行测试等的脚本。这些不打算在我们的存储库和文档之外使用。
要使用我们的构建系统并在本地运行我们的文档,您需要一份 Bootstrap 源文件和 Node.js 文件的副本。按照以下步骤操作,您应该准备好摇滚了:
- 下载并安装 Node.js,我们用它来管理我们的依赖项。
- 下载 Bootstrap 的源代码或fork 并克隆Bootstrap 的存储库。
- 导航到根
/bootstrap
目录并运行以安装我们在package.jsonnpm install
中列出的本地依赖项。
完成后,您将能够运行从命令行提供的各种命令。
使用 npm 脚本
我们的package.json包含许多用于开发项目的任务。运行npm run
以查看终端中的所有 npm 脚本。主要任务包括:
任务 | 描述 |
---|---|
npm start |
编译 CSS 和 JavaScript,构建文档,并启动本地服务器。 |
npm run dist |
创建dist/ 包含已编译文件的目录。使用Sass、Autoprefixer和terser。 |
npm test |
运行后在本地运行测试npm run dist |
npm run docs-serve |
在本地构建和运行文档。 |
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 的文件、模板等。以下是如何开始:
- 运行上面的工具设置以安装所有依赖项。
- 从根
/bootstrap
目录,npm run docs-serve
在命令行中运行。 http://localhost:9001/
在浏览器中打开,瞧瞧。
通过阅读其文档了解有关使用 Hugo 的更多信息。
故障排除
如果您在安装依赖项时遇到问题,请卸载所有以前的依赖项版本(全局和本地)。然后,重新运行npm install
。