Bootstrap5 参数
2021-09-01 17:54 更新
使用内置变量快速自定义Bootstrap,方便快捷的切换全局CSS。
你可以在Bootstrap的 scss/_variables.scss
文件中为关键的全局选项查找和定义这些变量。使用内置的自定义变量文件定义Bootstrap,并使用新的 $enable-* Sass
变量轻松切换全局CSS。 覆盖变量的值,并根据需要使用 npm run test
重新编译。
变量 | 值 | 描述 |
---|---|---|
$spacer
|
1rem (default), or any value > 0 |
指定默认的spacer值,以编程方式生成我们的spacer实用工具。 |
$enable-rounded
|
true (default) or false
|
在各种组件上启用预定义的 border-radius 样式。 |
$enable-shadows
|
true or false (default) |
在各种组件上启用预定义的 box-shadow 样式。 |
$enable-gradients
|
true or false (default) |
通过各种组件上的 background-image 样式启用预定义的渐变。 |
$enable-transitions
|
true (default) or false
|
在各种组件上启用预定义的 transition 。 |
$enable-reduced-motion
|
true (default) or false
|
启用 prefers-reduced-motion 媒体查询 ,该查询可根据用户的浏览器/操作系统首选项抑制某些动画/过渡。 |
$enable-grid-classes
|
true (default) or false
|
为网格系统启用CSS类的生成(例如 .row ,.col-md-1 等)。 |
$enable-caret
|
true (default) or false
|
在 .dropdown-toggle 上启用伪元素插入符。 |
$enable-button-pointers
|
true (default) or false
|
将“手形”光标添加到未禁用的按钮元素。 |
$enable-rfs
|
true (default) or false
|
全局启用RFS. |
$enable-validation-icons
|
true (default) or false
|
在文本输入中启用 background-image 图标,并在某些自定义表单中启用验证状态。 |
$enable-negative-margins
|
true or false (default) |
启用负值的margin实用工具的生成。 |
$enable-deprecation-messages
|
true or false (default) |
将其设置为 true ,以便在使用任何计划在v5 中删除的已弃用mixin和函数时显示警告。 |
$enable-important-utilities
|
true (default) or false
|
在实用工具类中启用 !important 后缀。 |
以上内容是否对您有帮助:
更多建议: