Skip to main content Skip to docs navigation

定制

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

Sass Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
Options Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
Color Learn about and customize the color systems that support the entire toolkit.
Color modes Explore our default light mode and the new dark mode, or create custom color modes yourself.
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.
Optimize Keep your projects lean, responsive, and maintainable so you can deliver the best experience.

概述

¥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:

  1. 使用 Bootstrap 通过包管理器，以便你可以使用和扩展我们的源文件。

    ¥Using Bootstrap via package manager so you can use and extend our source files.

  2. 使用 Bootstrap 的编译分发文件或 jsDelivr，以便你可以添加或覆盖 Bootstrap 的样式。

    ¥Using Bootstrap’s compiled distribution files or jsDelivr so you can add onto or override Bootstrap’s styles.

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

¥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 应用），以便你可以更彻底地查看你的选项。

¥Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. 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.

基于 社区对话，在你自己的代码库中解决此问题的一些选项包括用本地托管资源替换 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.