Skip to main content Skip to docs navigation

贡献

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

工具设置

🌐 Tooling setup

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

🌐 Bootstrap uses npm scripts to build the documentation and compile source files. Our package.json houses these scripts for compiling code, running tests, and more. These aren’t intended for use outside our repository and documentation.

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

🌐 To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:

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

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

🌐 When completed, you’ll be able to run the various commands provided from the command line.

使用 npm 脚本

🌐 Using npm scripts

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

🌐 Our package.json includes numerous tasks for developing the project. Run npm run to see all the npm scripts in your terminal. Primary tasks include:

任务描述
npm start编译 CSS 和 JavaScript,构建文档,并启动本地服务器。
npm run dist创建包含已编译文件的 dist/ 目录。使用 SassAutoprefixerterser
npm test在运行 npm run dist 后,本地执行测试
npm run docs-serve构建并在本地运行文档。

Get started with Bootstrap via npm with our starter project! Head to the Sass & JS example template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.

Sass

Bootstrap 使用 Dart Sass 将我们的 Sass 源文件编译为 CSS 文件(包含在我们的构建过程中),我们也建议如果你使用自己资源管道编译 Sass 时,也采用相同方式。我们以前在 Bootstrap v4 中使用 Node Sass,但 LibSass 及其上构建的包,包括 Node Sass,现在已被 弃用

🌐 Bootstrap uses Dart Sass for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you’re compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now deprecated.

Dart Sass 使用 10 位的舍入精度,并且出于效率原因不允许调整此值。在我们对生成的 CSS 进行进一步处理时(例如在压缩过程中),我们不会降低此精度,但如果你选择这样做,我们建议保持至少 6 位的精度,以防止浏览器舍入问题。

🌐 Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don’t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.

自动前缀器

🌐 Autoprefixer

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

🌐 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.

我们在 GitHub 仓库的一个单独文件中维护通过 Autoprefixer 支持的浏览器列表。详情请参见 .browserslistrc

🌐 We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See .browserslistrc for details.

RTLCSS

Bootstrap 使用 RTLCSS 来处理编译后的 CSS 并将其转换为 RTL——基本上是将水平方向相关的属性(例如 padding-left)替换为它们的相反属性。它允许我们只编写一次 CSS,并使用 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.

本地文档

🌐 Local documentation

在本地运行我们的文档需要使用 Astro。Astro 是一个现代静态网站生成器,它允许我们使用 Markdown 和 React 组件的组合来构建文档。以下是启动它的方法:

🌐 Running our documentation locally requires the use of Astro. Astro is a modern static site generator that allows us to build our documentation with a combination of Markdown and React components. Here’s how to get it started:

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

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

🌐 Learn more about using Astro by reading its documentation.

故障排除

🌐 Troubleshooting

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

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