利用我们提供的文档构建脚本和测试工具来为 Bootstrap 的开发提供帮助。
Bootstrap 使用 npm 脚本 来构建文档并编译源文件。我们的 package.json 文件中包含了这些用于编译源码、运行测试等工作的脚本。这些脚本不适合用在我们的源码仓库和文档之外的地方。
无论是使用 Bootstrap 自带的构建系统还是在本地启动文档网站,都需要下载 Bootstrap 源码并安装 Node。请按照以下步骤操作并搭建本地运行环境:
上述步骤完成后,你就可以运行 Bootstrap 所提供的各个命令了。
Bootstrap 自带的 package.json 文件包含了用于项目本身开发所需的许多命令。运行 npm run 以查看所有可用的命令。 包含的的主要命令如下:
命令 | 描述 |
---|---|
npm start | 编译 CSS 和 JavaScript 源码、构建文档并启动一个本地服务器运行文档网站。 |
npm run dist | 创建 dist/ 目录并将编译后的文件放置于此目录中。用到了 Sass、Autoprefixer 和 terser 工具。 |
npm test | 运行 npm run dist 命令之后在本地运行测试程序 |
npm run docs-serve | 在本地构建并启动文档网站。 |
利用 npm 和我们提供的模板项目快速上手 Bootstrap!
请前往 twbs/bootstrap-npm-starter 模板仓库,以了解如何如何在你自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 图标库。
Bootstrap 使用 Dart Sass 将 Sass 源文件编译为 CSS 文件(已包含在我们的构建流程中了),如果你需要自己编译 Sass 源码的话,我们建议您使用相同的工具。我们在先前的 Bootstrap v4 版本中使用的是 Node Sass 工具,但是现在包括 LibSass 及构建在 LibSass 上的工具(包括 Node Sass)已经被 Sass 官方标记为
不推荐使用 了。
Dart Sass 对浮点数的舍入精度为 10,并且出于运行效率的考虑,不允许对此值进行调整。对于生成的 CSS,我们不会在后续的处理过程中降低此精度(例如压缩时),但是如果你选择降低精度的话,我们建议至少保持在 6,以避免浏览器的舍入问题。
Bootstrap 使用 Autoprefixer (已包含在我们的构建流程中了)工具在构建时自动将特定于厂商的属性前缀添加到某些 CSS 属性前。对于 CSS 的关键部分,此工具可以让我们只需要编写一次然后由自动添加,并且避免了像 Bootstrap v3 版本中那样手动添加带有特定于厂商前缀的 CSS 属性,这样就节省我们的时间并减少了代码量。
我们将需要 Autoprefixer 支持的浏览器列表保存在一个单独的文件中,并提交到 GitHub 仓库中进行管理。有关详细信息,请参见 .browserslistrc。
Bootstrap 使用 RTLCSS 工具处理编译后的 CSS 并将其转换为支持 RTL(基本上就是将有关横坐标轴方向的属性,例如 padding-left,修改为相反的方向)。这样我们就只需要编写一次 CSS,然后使用 RTLCSS 并微调 control 和
value 指令就全部搞定了。
在本地启动文档网站需要用到 Hugo 工具,它是通过 hugo-bin 这个 npm 软件包安装到本地的。Hugo 是一个快速且可扩展的静态站点生成器,它为我们提供的基本功能包括:文件包含、编译 Markdown 文件、模板等。以下是 Hugo 的用法:
如需了解更多关于 Hugo 的信息,请参阅其 文档。
如果你在安装依赖项时遇到了问题,请卸载所有先前安装的依赖项及其各个版本(包括全局和本地)。然后,重新运行 npm install
。