定制

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

概述

🌐 Overview

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

🌐 There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you’re using, browser support, and more.

我们的两种首选方法是：

🌐 Our two preferred methods are:

通过包管理器使用 Bootstrap，这样你就可以使用并扩展我们的源文件。
使用 Bootstrap 的已编译分发文件或 jsDelivr，以便你可以添加或覆盖 Bootstrap 的样式。

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

🌐 While we cannot go into details here on how to use every package manager, we can give some guidance on using Bootstrap with your own Sass compiler.

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

🌐 For those who want to use the distribution files, review the getting started page for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you’d like to use.

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

🌐 As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.

CSP 和嵌入式 SVG

🌐 CSPs and embedded SVGs

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

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

🌐 Based on community conversation, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.