選項
使用內置變量快速定制Bootstrap ,以便輕松切換全局CSS首選項以控制樣式和行為。
On this page
使用我們內置的自定義變量文件自定義Bootstrap,并使用新的$enable-*
Sass變量輕松切換全局CSS首選項。重寫變量的值并根據需要使用npm run test
重新編譯。
您可以在Bootstrap的scs中找到并自定義這些關鍵全局選項的 scss/_variables.scss
文件。
Variable | Values | Description |
---|---|---|
$spacer |
1rem (default), or any value > 0 |
指定默認間隔值以編程方式生成間隔實用程序。 |
$enable-rounded |
true (default) or false |
在各種構件上啟用預定義的邊界半徑樣式。 |
$enable-shadows |
true or false (default) |
在各種組件上啟用預定義的裝飾框陰影樣式。不影響用于焦點狀態的框陰影。 |
$enable-gradients |
true or false (default) |
通過各種組件上的背景圖像樣式啟用預定義的漸變。 |
$enable-transitions |
true (default) or false |
在各種組件上啟用預定義的轉換。 |
$enable-reduced-motion |
true (default) or false |
啟用“首選簡化運動媒體”查詢,該查詢將根據用戶的瀏覽器/操作系統首選項抑制某些動畫/變換。 |
$enable-grid-classes |
true (default) or false |
啟用為網格系統生成CSS類(例如.row、.col-md-1等)。 |
$enable-caret |
true (default) or false |
啟用偽元素插入符號。下拉切換。 |
$enable-button-pointers |
true (default) or false |
將“手”光標添加到非禁用按鈕元素。 |
$enable-rfs |
true (default) or false |
全局啟用RFS。 |
$enable-validation-icons |
true (default) or false |
啟用文本輸入中的背景圖像圖標和一些用于驗證狀態的自定義窗體。 |
$enable-negative-margins |
true or false (default) |
允許生成負邊距實用程序。 |
$enable-deprecation-messages |
true (default) or false |
設置為false可在使用計劃在v6中刪除的任何不推薦使用的mixin和函數時隱藏警告。 |
$enable-important-utilities |
true (default) or false |
在實用程序類中啟用!important 后綴。 |