选项
使用内置变量快速自定义 Bootstrap,轻松切换全局 CSS 首选项以控制样式和行为。
使用我们内置的自定义变量文件自定义 Bootstrap,并使用新的$enable-*
Sass 变量轻松切换全局 CSS 首选项。覆盖变量的值并npm run test
根据需要重新编译。
scss/_variables.scss
您可以在 Bootstrap 的文件中为关键的全局选项找到并自定义这些变量。
多变的 | 价值观 | 描述 |
---|---|---|
$spacer |
1rem (默认),或任何 > 0 的值 |
指定默认间隔值以编程方式生成我们的间隔实用程序。 |
$enable-dark-mode |
true (默认)或false |
在整个项目及其组件中启用内置暗模式支持。 |
$enable-rounded |
true (默认)或false |
在各种组件上启用预定义border-radius 样式。 |
$enable-shadows |
true 或false (默认) |
box-shadow 在各种组件上启用预定义的装饰样式。不影响box-shadow 用于焦点状态的 s。 |
$enable-gradients |
true 或false (默认) |
background-image 通过各种组件上的样式启用预定义的渐变。 |
$enable-transitions |
true (默认)或false |
transition 在各种组件上启用预定义的。 |
$enable-reduced-motion |
true (默认)或false |
启用prefers-reduced-motion media query,它会根据用户的浏览器/操作系统首选项抑制某些动画/转换。 |
$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 |
true 或false (默认) |
启用负边际实用程序的生成。 |
$enable-deprecation-messages |
true (默认)或false |
设置为false 在使用计划在v6 . |
$enable-important-utilities |
true (默认)或false |
在实用程序类中启用!important 后缀。 |
$enable-smooth-scroll |
true (默认)或false |
全局适用scroll-behavior: smooth ,除了用户要求通过prefers-reduced-motion 媒体查询减少运动 |