Skip to main content Skip to docs navigation
View on GitHub

Customize定制

Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.了解如何使用Sass、大量全局选项、扩展的颜色系统等设置主题、自定义和扩展Bootstrap。

Sass Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.利用我们的源Sass文件利用变量、映射、混合和函数。
Options选项 Customize Bootstrap with built-in variables to easily toggle global CSS preferences.使用内置变量自定义Bootstrap，以轻松切换全局CSS首选项。
Color颜色 Learn about and customize the color systems that support the entire toolkit.了解并自定义支持整个工具包的颜色系统。
Components组件 Learn how we build nearly all our components responsively and with base and modifier classes.了解我们如何响应地使用基类和修改器类构建几乎所有的组件。
CSS variables变量 Use Bootstrap's CSS custom properties for fast and forward-looking design and development.使用Bootstrap的CSS自定义属性进行快速、前瞻性的设计和开发。
Optimize优化 Keep your projects lean, responsive, and maintainable so you can deliver the best experience.让您的项目保持精简、快速响应和可维护性，以便提供最佳体验。

Overview概述

There are multiple ways to customize Bootstrap. 有多种方法可以自定义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.最佳路径取决于您的项目、构建工具的复杂性、您正在使用的Bootstrap版本、浏览器支持等。

Our two preferred methods are:我们的两种首选方法是：

  1. Using Bootstrap via package manager so you can use and extend our source files.通过软件包管理器使用Bootstrap，以便您可以使用和扩展我们的源文件。
  2. Using Bootstrap’s compiled distribution files or jsDelivr so you can add onto or override Bootstrap’s styles.使用Bootstrap的已编译分发文件或jsDelivr，以便可以添加或覆盖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.虽然我们不能在这里详细介绍如何使用每个包管理器，但我们可以为您自己的Sass编译器使用Bootstrap提供一些指导。

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. 对于希望使用分发文件的用户，请查看起步页面，了解如何包含这些文件和示例HTML页面。From there, consult the docs for the layout, components, and behaviors you’d like to use.从那里，查阅文档，了解您想要使用的布局、组件和行为。

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.当您熟悉Bootstrap时，请继续浏览本节，了解有关如何利用全局选项、使用和更改颜色系统、如何构建组件、如何使用不断增长的CSS自定义属性列表以及如何在使用Bootstrap构建时优化代码的更多详细信息。

CSPs and embedded SVGscsp与嵌入式svg

Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. 一些Bootstrap组件在我们的CSS中包含嵌入式SVG，以便跨浏览器和设备一致且轻松地为组件设置样式。For organizations with more strict CSP configurations, we’ve documented all instances of our embedded SVGs (all of which are applied via background-image) so you can more thoroughly review your options.对于具有更严格CSP配置的组织，我们已经记录了嵌入式SVG的所有实例（所有实例都通过背景图像应用），因此您可以更全面地查看您的选项。

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. 基于社区对话，在您自己的代码库中解决此问题的一些选项包括使用本地托管资产替换URL、删除图像和使用内联图像（并非在所有组件中都可能），以及修改CSP。Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.我们的建议是仔细审查您自己的安全策略，并在必要时决定最佳的前进道路。