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.js 的副本。按照以下步骤操作,你应该准备好摇滚了:

¥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,我们用它来管理我们的依赖。

    ¥Download and install Node.js, which we use to manage our dependencies.

  2. 下载 Bootstrap 的源代码 或分叉并克隆 Bootstrap 的存储库

    ¥Either download Bootstrap’s sources or fork and clone Bootstrap’s repository.

  3. 导航到根 /bootstrap 目录并运行 npm install 以安装 package.json 中列出的本地依赖。

    ¥Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in 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:

Task Description
npm start Compiles CSS and JavaScript, builds the documentation, and starts a local server.
npm run dist Creates the dist/ directory with compiled files. Uses Sass, Autoprefixer, and terser.
npm test Runs tests locally after running npm run dist
npm run docs-serve Builds and runs the documentation locally.
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,我们建议你执行相同的操作。我们之前将 Node Sass 用于 Bootstrap v4,但 LibSass 和构建在其之上的软件包(包括 Node Sass)现在是 deprecated

¥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 使用 自动前缀器(包含在我们的构建过程中)在构建时自动将浏览器前缀添加到某些 CSS 属性中。这样做可以让我们一次编写 CSS 的关键部分,同时消除对 v3 中那样的浏览器 mixin 的需要,从而节省了我们的时间和代码。

¥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 controlvalue 指令进行细微调整。

¥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

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

¥Running our documentation locally requires the use of Hugo, which gets installed via the hugo-bin npm package. Hugo is a blazingly fast and quite extensible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here’s how to get it started:

  1. 运行上面的 工具设置 来安装所有依赖。

    ¥Run through the tooling setup above to install all dependencies.

  2. 从根 /bootstrap 目录中,在命令行中运行 npm run docs-serve

    ¥From the root /bootstrap directory, run npm run docs-serve in the command line.

  3. 在浏览器中打开 http://localhost:9001/,瞧。

    ¥Open http://localhost:9001/ in your browser, and voilà.

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

¥Learn more about using Hugo 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.