选项
使用内置变量快速自定义Bootstrap,以轻松切换全局CSS首选项以控制样式和行为。
在本页面
使用我们内置的自定义变量文件自定义Bootstrap,并使用新的 $enable-*
Sass变量轻松切换全局CSS首选项。 覆盖变量的值,并根据需要使用npm run test
重新编译。
您可以在Bootstrap的 scss/_variables.scss
文件中 找到并自定义这些关键全局选项的变量
变量 | 值 | 描述 |
---|---|---|
$spacer |
1rem (默认),或任何大于0的值 |
指定默认的spacer值,以编程方式生成我们的 spacer utilities. |
$enable-rounded |
true (默认) or false |
border-radius 在各种组件上启用预定义的样式。 |
$enable-shadows |
true or false (默认) |
box-shadow 在各种组件上启用预定义的样式。 |
$enable-gradients |
true or false (默认) |
通过background-image 各种组件上的样式启用预定义的渐变。 |
$enable-transitions |
true (默认) or false |
transition 在各种组件上启用预定义。 |
$enable-reduced-motion |
true (默认) or false |
启用prefers-reduced-motion 媒体查询该查询根据用户的浏览器/操作系统首选项抑制某些动画/过渡。 |
$enable-grid-classes |
true (默认) or false |
使CSS类的产生网格系统(例如.row , .col-md-1 等)。 |
$enable-caret |
true (默认) or false |
启用伪元素插入符.dropdown-toggle . |
$enable-button-pointers |
true (默认) or false |
向非禁用按钮元素添加“手”光标。 |
$enable-rfs |
true (默认) or false |
全局启用 RFS. |
$enable-validation-icons |
true (默认) or false |
background-image 在文本输入中启用图标,并在某些自定义表单中启用验证状态。 |
$enable-negative-margins |
true or false (默认) |
启用负边距实用程序生成。 |
$enable-deprecation-messages |
true or false (默认) |
设置为true 以在使用任何不推荐使用的mixin和计划在v5 中删除的函数时显示警告。 |
$enable-important-utilities |
true (默认) or false |
!important 在实用程序类中启用后缀。 |