Bootstrap 简明教程
Bootstrap - CSS variables
本章讨论 Bootstrap 提供的所有 CSS 变量，它们有助于快速定制应用程序的设计和开发。
This chapter discusses about all the CSS variables provided by Bootstrap, that help in fast and customized design and development of applications.
Bootstrap 的已编译 CSS 包含大量 CSS 自定义属性（变量），无需重新编译 Sass，即可进行即时自定义，其中主题颜色、断点和主要字体堆栈等常用值在浏览器检查、代码 sandbox 操作或一般原型设计期间很容易访问。
The compiled CSS of Bootstrap consists of a plethora of CSS custom properties (variables) that allow for instant customization without the need to recompile Sass, wherein commonly used values such as theme colors, breakpoints, and primary font stacks are easily accessible during browser inspection, code sandbox operation, or general prototyping.
Bootstrap 提供的所有自定义变量都以 bs- 为前缀，因此不会与任何其他第三方 CSS 发生冲突。
All the custom variables provided by Bootstrap are prefixed with bs-, so that there is no conflict with any other third-party CSS.
Root variables
根变量是可以在任何地方访问的变量，只要加载了 Bootstrap 的 CSS。这些变量位于 _root.scss 文件中，也包含在已编译的 dist 文件中
Root variables are the variables that can be accessed from anywhere, Bootstrap’s CSS is loaded. These variables are located in the _root.scss file and also included in the compiled dist files
Default variables
无论颜色模式如何，都可以访问的 CSS 变量都是默认变量。
The CSS variables that are accessible everywhere, irrespective of the color mode, are the default variables.
:root,
[data-bs-theme=light] {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-secondary-color-rgb: 33, 37, 41;
--bs-secondary-bg: #e9ecef;
--bs-secondary-bg-rgb: 233, 236, 239;
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
--bs-tertiary-color-rgb: 33, 37, 41;
--bs-tertiary-bg: #f8f9fa;
--bs-tertiary-bg-rgb: 248, 249, 250;
--bs-heading-color: inherit;
--bs-link-color: #0d6efd;
--bs-link-color-rgb: 13, 110, 253;
--bs-link-decoration: underline;
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10, 88, 202;
--bs-code-color: #d63384;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
--bs-form-valid-color: #198754;
--bs-form-valid-border-color: #198754;
--bs-form-invalid-color: #dc3545;
--bs-form-invalid-border-color: #dc3545;
}Dark mode variables
以下变量仅限于 Bootstrap 的内置暗模式：
Following variables are limited to the built-in dark mode of Bootstrap:
[data-bs-theme=dark] {
color-scheme: dark;
--bs-body-color: #adb5bd;
--bs-body-color-rgb: 173, 181, 189;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(173, 181, 189, 0.75);
--bs-secondary-color-rgb: 173, 181, 189;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(173, 181, 189, 0.5);
--bs-tertiary-color-rgb: 173, 181, 189;
--bs-tertiary-bg: #2b3035;
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: #6ea8fe;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #ffda6a;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #031633;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #332701;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #084298;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #6ea8fe;
--bs-link-hover-color: #8bb9fe;
--bs-link-color-rgb: 110, 168, 254;
--bs-link-hover-color-rgb: 139, 185, 254;
--bs-code-color: #e685b5;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
--bs-form-valid-border-color: #75b798;
--bs-form-invalid-color: #ea868f;
--bs-form-invalid-border-color: #ea868f;
}Component variables
在 Bootstrap 5 中，将自定义属性用作各种组件的局部变量变得越来越普遍。这减少了已编译的 CSS，防止在嵌套表中继承样式，并允许在 Sass 编译后对 Bootstrap 组件进行一些自定义和扩展。
The usage of custom properties as local variables for various components is becoming more prevalent in Bootstrap 5. This results in a reduction of compiled CSS, prevents styles from being inherited in nested tables, and permits some customization and expansion of Bootstrap components following Sass compilation.
CSS 变量在 navbars 、 grids 和更多内容中以独特方式使用。当在基础组件级别分配 CSS 变量时，以后可以更轻松地对其进行自定义和修改。
CSS variables are distinctively used in navbars, grids and many more. When CSS variables are assigned at base component level, it becomes easier to customize and modify it later.
Prefix
为了防止与您自己的代码库发生冲突，大多数变量都使用前缀。除了前缀外，每个 CSS 变量都需要 -- 。
A prefix is used with most of the variables, in order to prevent any collisions with your own codebase. Every CSS variable requires --, apart from the prefix.
您可以使用 $prefix Sass 变量自定义前缀。默认情况下，它设置为 bs- 。
You can customize the prefix, using the $prefix Sass variable. It is set to bs-, by default.
Examples
CSS 变量提供了与 Sass 变量相当的适应性；但是，在传输到浏览器之前不需要进行编译。例如，我们利用 CSS 变量来重置页面字体和链接样式：
CSS variables provide comparable adaptability to Sass variables; however, there is no requirement for compilation before transmitting to the browser. As an illustration, we utilize CSS variables to reset our page’s font and link styles:
body {
font: 1rem/1.5 var(--bs-font-monospace);
}
a {
color: var(--bs-red);
}Focus variables
通过使用 Sass 和 CSS 变量的混合，Bootstrap 可以提供个性化的 :focus 样式，这些样式可以选择性地附加到单个组件和元素。但是，目前尚未实现跨界覆盖所有 :focus 样式。
By employing a blend of Sass and CSS variables, Bootstrap enables the provision of personalized :focus styles that can be selectively appended to singular components and elements. Nevertheless, the overriding of all :focus styles across the board is not currently implemented.
可以在 Sass 中设置默认值，可以在编译之前对其进行自定义。
Default values can be set in the Sass, that can be customized before compiling.
scss/_variables.scss
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;然后在 :root 级别将变量分配给 CSS 变量，该变量可以实时自定义，并具有 x 和 y 偏移的选项，其默认回退值为 0 。
The variables are subsequently assigned to CSS variables at the :root level, which can be customized in real-time and feature options for x and y offsets, with their default fallback value being 0.
scss/_root.scss
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};