定制概览

学习如何使用 Sass、丰富的全局选项、广泛的颜色系统等对 Bootstrap 进行主题设置、定制和扩展。

本页目录

调皮使用我们的源 Sass 文件以利用变量、映射、mixin 和函数。

颜色模式 探索我们的默认浅色模式和新的深色模式，或自行创建自定义颜色模式。

CSS 变量 使用 Bootstrap 的 CSS 自定义属性进行快速且面向未来的设计和开发。

概览

有多种方法可以自定义 Bootstrap。最佳路径可能取决于你的项目、构建工具的复杂性、你使用的 Bootstrap 版本、浏览器支持情况等。

我们首选的两种方法是：

虽然我们不能在这里详细说明如何使用每个包管理器，但我们可以提供一些关于使用你自己的 Sass 编译器使用 Bootstrap的指导。

对于想使用分发文件的人，请查看入门页面，了解如何包含这些文件以及示例 HTML 页面。然后，请查阅文档，了解你希望使用的布局、组件和行为。

当你熟悉 Bootstrap 时，继续浏览本节以获取更多关于如何使用我们的全局选项、使用和更改我们的颜色系统、如何构建我们的组件、如何使用我们不断增长的 CSS 自定义属性列表以及在使用 Bootstrap 构建时如何优化你的代码的详细信息。

一些 Bootstrap 组件在我们的 CSS 中嵌入了 SVG，以便在浏览器和设备之间一致且轻松地为组件设置样式。对于配置了更严格 CSP 的组织，我们已记录了所有嵌入的 SVG 实例（所有这些都是通过 background-image 应用的），以便你可以更全面地审查你的选项。

根据社区讨论，在你自己的代码库中解决此问题的一些选项包括将 URL 替换为本地托管的资源、删除图片并使用内联图片（并非所有组件都可行），以及修改你的 CSP。我们的建议是仔细审查你自己的安全策略，并在必要时决定最佳的前进路径。