跳至主要内容 跳至文档导航

了解如何使用 Sass、大量全局选项、庞大的颜色系统等为 Bootstrap 设置主题、自定义和扩展。

概述

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

我们推荐的两种方法是

  1. 使用 包管理器 通过 Bootstrap,以便使用和扩展我们的源文件。
  2. 使用 Bootstrap 的已编译分发文件或 jsDelivr,以便添加或覆盖 Bootstrap 的样式。

虽然我们无法在此详细介绍如何使用每个包管理器,但我们可以提供一些关于 使用 Bootstrap 和自己的 Sass 编译器 的指导。

对于那些想要使用分发文件的人,请查看 入门页面,了解如何包含这些文件和示例 HTML 页面。然后,查阅布局、组件和行为的文档,了解您想要使用的内容。

当您熟悉 Bootstrap 时,请继续探索本部分,了解有关如何利用我们的全局选项、使用和更改我们的颜色系统、如何构建组件、如何使用我们不断增长的 CSS 自定义属性列表以及如何优化使用 Bootstrap 构建代码的更多详细信息。

CSP 和嵌入式 SVG

为了在不同浏览器和设备上一致且轻松地设置组件样式,几个 Bootstrap 组件在我们的 CSS 中包含嵌入式 SVG。对于具有更严格的 CSP 配置的组织,我们记录了我们所有嵌入式 SVG 的实例(所有这些都通过 background-image 应用),以便您可以更全面地查看您的选项。

根据 社区讨论,在您自己的代码库中解决此问题的某些选项包括 用本地托管的资产替换 URL、删除图像并使用内联图像(并非所有组件都可行),以及修改您的 CSP。我们的建议是仔细查看您自己的安全策略,并在必要时决定最佳前进道路。