跳至主要内容 跳至文档导航

使用内置变量快速自定义 Bootstrap,轻松切换全局 CSS 偏好设置以控制样式和行为。

使用我们内置的自定义变量文件自定义 Bootstrap,并使用新的 $enable-* Sass 变量轻松切换全局 CSS 偏好设置。根据需要覆盖变量的值并使用 npm run test 重新编译。

你可以在 Bootstrap 的 scss/_variables.scss 文件中找到并自定义这些变量,用于关键的全局选项。

变量 描述
$spacer 1rem(默认值),或任何大于 0 的值 指定默认间隔值以编程生成我们的 间隔实用工具
$enable-dark-mode true(默认值)或 false 在整个项目及其组件中启用内置 暗模式支持
$enable-rounded true(默认值)或 false 启用各种组件上预定义的 border-radius 样式。
$enable-shadows truefalse(默认值) 启用各种组件上预定义的装饰性 box-shadow 样式。不影响用于焦点状态的 box-shadow
$enable-gradients truefalse(默认值) 通过各种组件上的 background-image 样式启用预定义的渐变。
$enable-transitions true(默认值)或 false 启用各种组件上预定义的 transition
$enable-reduced-motion true(默认值)或 false 启用 prefers-reduced-motion 媒体查询,它根据用户的浏览器/操作系统偏好设置抑制某些动画/过渡。
$enable-grid-classes true(默认值)或 false 启用网格系统 CSS 类的生成(例如 .row.col-md-1 等)。
$enable-container-classes true(默认值)或 false 启用布局容器 CSS 类的生成。(v5.2.0 中的新增功能)
$enable-caret true(默认值)或 false 启用 .dropdown-toggle 上的伪元素插入符号。
$enable-button-pointers true(默认值)或 false 向未禁用的按钮元素添加“手形”光标。
$enable-rfs true(默认值)或 false 全局启用 RFS
$enable-validation-icons true(默认值)或 false 在文本输入框和一些自定义表单中启用验证状态的 background-image 图标。
$enable-negative-margins truefalse(默认值) 启用生成 负边距实用工具
$enable-deprecation-messages true(默认值)或 false 设置为 false 以在使用任何计划在 v6 中移除的已弃用混合和函数时隐藏警告。
$enable-important-utilities true(默认值)或 false 在实用程序类中启用 !important 后缀。
$enable-smooth-scroll true(默认值)或 false 全局应用 scroll-behavior: smooth,但通过 prefers-reduced-motion 媒体查询 要求减少运动的用户除外