Options
使用内置变量快速自定义Bootstrap,轻松切换全局CSS首选项以控制样式和行为。
使用我们内置的自定义变量文件自定义Bootstrap,并使用新的$enable-* Sass变量轻松切换全局CSS首选项。 重写变量的值,并根据需要使用 npm run test 重新编译。
您可以在Bootstrap的scss/_variables.scss文件中为关键全局选项找到并自定义这些变量。
| 变量 | 值 | 描述 | 
|---|---|---|
| $spacer | 1rem(default), or any value > 0 | 指定默认的间隔符值以编程方式生成我们的spacer实用程序。 | 
| $enable-dark-mode | true(default) orfalse | 在项目及其组件中启用内置的暗模式支持 。 | 
| $enable-rounded | true(default) orfalse | 在各种组件上启用预定义的 border-radius样式。 | 
| $enable-shadows | trueorfalse(default) | 在各种组件上启用预定义的装饰性 box-shadow样式。 不影响用于聚焦状态的box-shadow。 | 
| $enable-gradients | trueorfalse(default) | 通过各种组件上的 background-image样式启用预定义渐变。 | 
| $enable-transitions | true(default) orfalse | 在各种组件上启用预定义的 transition。 | 
| $enable-reduced-motion | true(default) orfalse | 启用 preferences reduced motionmedia query ,这将根据用户的浏览器/操作系统首选项抑制某些动画/转换。 | 
| $enable-grid-classes | true(default) orfalse | 允许为网格系统生成CSS类(例如 .row、`.col-md-1’等)。 | 
| $enable-container-classes | true(default) orfalse | 允许为布局容器生成CSS类。(v.2.0中的新增功能) | 
| $enable-caret | true(default) orfalse | 在 .dropdown-toggle上启用伪元素插入符号。 | 
| $enable-button-pointers | true(default) orfalse | 将“hand”光标添加到未禁用的按钮元素中。 | 
| $enable-rfs | true(default) orfalse | 全局启用RFS。 | 
| $enable-validation-icons | true(default) orfalse | 在文本输入和某些自定义表单中启用 background-image图标以用于验证状态。 | 
| $enable-negative-margins | trueorfalse(default) | 允许生成negative margin utilities。 | 
| $enable-deprecation-messages | true(default) orfalse | 设置为 false可在使用计划在v6中删除的任何不推荐使用的混合项和函数时隐藏警告。 | 
| $enable-important-utilities | true(default) orfalse | 在工具集类中提供 !important。 | 
| $enable-smooth-scroll | true(default) orfalse | 全局应用 scroll-behavior: smooth,但用户通过preferred reduced motionmedia query 请求减少运动的情况除外 |