利用内置变量快速定制 Bootstrap，轻松切换全局 CSS 偏好，控制风格和行为。
使用我们内置的自定义变量文件自定义 Bootstrap，并使用新的 $enable-* Sass 变量轻松切换全局 CSS 首选项。根据需要覆盖变量值并使用 npm run test 重新编译。
您可以在 Bootstrap 的 scss/_variables.scss 文件中找到并自定义这些变量的关键全局选项。
| Variable | Values | Description |
|---|---|---|
$spacer |
1rem (default), or any value > 0 |
指定默认间距值，以便通过编程生成我们的 spacer utilities。 |
$enable-dark-mode |
true (default) or false |
在整个项目及其组件中启用内置的深色模式支持。 |
$enable-rounded |
true (default) or false |
在各种组件上启用预定义的 border-radius。 |
$enable-shadows |
true or false (default) |
在各种组件上启用预定义的装饰性 box-shadow 样式。不会影响用于焦点状态的 box-shadow。 |
$enable-gradients |
true or false (default) |
通过各种组件上的 background-image 样式启用预定义渐变。 |
$enable-transitions |
true (default) or false |
在各种组件上启用预定义的 transition。 |
$enable-reduced-motion |
true (default) or false |
启用 prefers-reduced-motion媒体查询，根据用户的浏览器/操作系统偏好抑制某些动画/过渡效果。 |
$enable-grid-classes |
true (default) or false |
为网格系统生成 CSS 类（如 .row、.col-md-1 等）。 |
$enable-container-classes |
true (default) or false |
为布局容器生成 CSS 类。(5.2.0 版新增）。 |
$enable-caret |
true (default) or false |
在 .dropdown-toggle 上启用伪元素标记。 |
$enable-button-pointers |
true (default) or false |
为非禁用按钮元素添加 “手 ”光标。 |
$enable-rfs |
true (default) or false |
全局启用 RFS。 |
$enable-validation-icons |
true (default) or false |
在文本输入和某些自定义表单的验证状态中启用 background-image 图标。 |
$enable-negative-margins |
true or false (default) |
启用负边距实用程序。 |
$enable-deprecation-messages |
true (default) or false |
设置为 “false ”可在使用任何计划在 “v6 ”中移除的已废弃的混合函数和函数时隐藏警告。 |
$enable-important-utilities |
true (default) or false |
在实用程序类中启用 !important 后缀。 |
$enable-smooth-scroll |
true (default) or false |
全局应用 scroll-behavior: smooth， 但通过prefers-reduced-motion media query. |