贡献
使用我们的文档构建脚本和测试帮助开发 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:
-
下载并安装 Node.js,我们用它来管理我们的依赖。
¥Download and install Node.js, which we use to manage our dependencies.
-
下载 Bootstrap 源代码 或 fork 并克隆 Bootstrap 代码库。
¥Either download Bootstrap’s sources or fork and clone Bootstrap’s repository.
-
导航到
/bootstrap
根目录并运行npm install
以安装我们在 package.json 中列出的本地依赖。¥Navigate to the root
/bootstrap
directory and runnpm 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:
任务 | 描述 |
---|---|
npm start | 编译 CSS 和 JavaScript,构建文档,并启动本地服务器。 |
npm run dist | 创建包含已编译文件的 dist/ 目录。使用 Sass、自动前缀器 和 terser。 |
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,我们建议你也这样做。我们之前将 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 control 和 value 指令进行细微调整。
¥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:
-
运行上面的 工具设置 来安装所有依赖。
¥Run through the tooling setup above to install all dependencies.
-
从根
/bootstrap
目录中,在命令行中运行npm run docs-serve
。¥From the root
/bootstrap
directory, runnpm run docs-serve
in the command line. -
在浏览器中打开
http://localhost:4321/
,瞧。¥Open
http://localhost:4321/
in your browser, and voilà.
通过阅读 Astro 的 文档 了解更多关于使用 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
.