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