了解如何使用 Sass、大量全局选项、广泛的颜色系统等来设置主题、自定义和扩展 Bootstrap。
Sass
利用我们的源 Sass 文件来利用变量、映射、混合和函数。
选项
使用内置变量自定义 Bootstrap,以轻松切换全局 CSS 首选项。
颜色
了解并自定义支持整个工具包的颜色系统。
颜色模式
探索我们的默认浅色模式和新的深色模式,或自行创建自定义颜色模式。
组件
了解我们如何使用基类和修饰符类以响应式方式构建几乎所有组件。
CSS 变量
使用 Bootstrap 的 CSS 自定义属性进行快速和前瞻性的设计和开发。
优化
保持项目精简、响应迅速且可维护,以便提供最佳体验。
概述
有多种方法可以自定义 Bootstrap。您的最佳路径可能取决于您的项目、构建工具的复杂性、您使用的 Bootstrap 版本、浏览器支持等。
我们的两种首选方法是:
- 通过包管理器使用 Bootstrap,以便您可以使用和扩展我们的源文件。
- 使用 Bootstrap 的编译发行版文件或 jsDelivr,这样您就可以添加或覆盖 Bootstrap 的样式。
虽然我们无法在这里详细介绍如何使用每个包管理器,但我们可以提供一些关于将 Bootstrap 与您自己的 Sass 编译器一起使用的指导。
对于想要使用分发文件的用户,请查看入门页面,了解如何包含这些文件和示例 HTML 页面。从那里,查阅文档以了解您要使用的布局、组件和行为。
当您熟悉 Bootstrap 时,请继续探索本节,了解有关如何利用我们的全局选项、使用和更改我们的颜色系统、我们如何构建组件、如何使用我们不断增长的 CSS 自定义属性列表以及如何在使用 Bootstrap 构建时优化代码的更多详细信息。
CSP 和嵌入式 SVG
一些 Bootstrap 组件在我们的 CSS 中嵌入了 SVG,以便在浏览器和设备上一致且轻松地设置组件样式。对于具有更严格 CSP 配置的组织,我们记录了嵌入式 SVG 的所有实例(所有实例都通过 应用),以便您可以更彻底地查看您的选项。background-image
- 手风琴
- 轮播控件
- 关闭按钮(用于警报和模式)
- 表单复选框和单选按钮
- 表单开关
- 表单验证图标
- 导航栏切换按钮
- 选择菜单
根据社区对话,在您自己的代码库中解决此问题的一些选项包括将 URL 替换为本地托管的资产、删除图像并使用内联图像(并非在所有组件中都可行)以及修改 CSP。我们的建议是仔细审查您自己的安全策略,并在必要时决定最佳前进路径。

