Skip to main content Skip to docs navigation

选项

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

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

您可以在 Bootstrap 的 scss/_variables.scss 文件中为关键的全局选项找到和自定义这些变量。

变量 描述
$spacer 1rem (默认), 或其它>0的值 指定默认间隔值以编程方式生成我们的 间隔实用程序
$enable-rounded true (默认) 或者 false 在各种组件上启用预定义的 border-radius 样式。
$enable-shadows true 或者 false (默认) 在各种组件上启用预定义的 box-shadow 装饰样式。 不会影响处于获得焦点状态的 box-shadow
$enable-gradients true 或者 false (默认) 在各种组件上通过 background-image 样式启用预定义的渐变。
$enable-transitions true (默认) 或者 false 在各种组件上启用预定义的 transition
$enable-reduced-motion true (默认) 或者 false 启用 prefers-reduced-motion 媒体查询,它会启用 prefers-reduced-motion 媒体查询,它会在用户的浏览器/操作系统偏好上,抑制某些基于动画/过渡的效果。
$enable-grid-classes true (默认) 或者 false 启用为网格系统生成 CSS 类(例如 .row.col-md-1 等)。
$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 true 或者 false (默认) 启用负边距实用程序的生成。
$enable-deprecation-messages true (默认) 或者 false 设置为 false 以在使用任何计划在 v6 中删除的已弃用 mixin 和函数时隐藏警告。
$enable-important-utilities true (默认) 或者 false 在实用程序类中启用 !important 后缀。
$enable-smooth-scroll true (默认) 或者 false 全局应用 scroll-behavior: smooth,除非用户通过 prefers-reduced-motion媒体查询 要求减少运动 减少运动。