概览
有多种方法可以自定义 Bootstrap。最佳路径可能取决于你的项目、构建工具的复杂性、你使用的 Bootstrap 版本、浏览器支持情况等。
我们首选的两种方法是：
虽然我们不能在这里详细说明如何使用每个包管理器，但我们可以提供一些关于使用你自己的 Sass 编译器使用 Bootstrap的指导。
对于想使用分发文件的人，请查看入门页面，了解如何包含这些文件以及示例 HTML 页面。之后，请查阅文档以了解你希望使用的布局、组件和行为。
当你熟悉 Bootstrap 时，继续浏览本节以获取更多关于如何使用我们的全局选项、使用和更改我们的颜色系统、如何构建我们的组件、如何使用我们不断增长的 CSS 自定义属性列表以及在使用 Bootstrap 构建时如何优化你的代码的详细信息。
Sass 与 CSS
当 Bootstrap 5 首次引入 CSS 变量时，Sass 与 CSS 变量的设置有点令人困惑，并且有些受限。因此，Sass 与 CSS 变量之间的关系非常不清楚。在 Bootstrap 6 中，我们已经澄清了这一点——以下是两者如何互动的说明。
- 在高层次上，Sass 是一种管理全局配置选项并为我们的工具、组件、排版、自定义属性（即 CSS 变量）等生成 CSS 的方式。
- 我们认为 CSS 变量是用户的一级定制层。
- Sass 变量几乎可用于所有组件——比如新的复选框
$check-*变量。这些 Sass 变量随后会被相关选择器上的 CSS 变量（例如.check与--bs-check-bg: #{$check-bg}）使用，并通过各种属性应用。 - CSS 变量的值取决于上下文，可以来自 Sass 变量或 CSS 变量自身。
- Sass 也帮助我们生成 CSS 变量。可以理解为主题和配置值，但在各个组件中，Sass 正在使用 CSS 变量。这为你提供了两种更清晰的定制途径。
考虑到这一点，你可以通过 CSS 或 Sass 自定义 Bootstrap 6，两者都比以往更容易，这得益于改进的颜色系统和主题配置。
CSP 和嵌入式 SVG
一些 Bootstrap 组件在我们的 CSS 中嵌入了 SVG，以便在浏览器和设备之间一致且轻松地为组件设置样式。对于配置了更严格 CSP 的组织，我们已记录了所有嵌入的 SVG 实例（所有这些都是通过 background-image 应用的），以便你可以更全面地审查你的选项。
根据社区讨论，在你自己的代码库中解决此问题的一些选项包括将 URL 替换为本地托管的资源、删除图片并使用内联图片（并非所有组件都适用）、以及修改你的 CSP。我们的建议是仔细审查你自己的安全策略，并在必要时决定最佳解决方案。