選項
使用內建變數快速自訂 Bootstrap,輕鬆切換全域 CSS 偏好設定,以控制樣式和行為。
使用我們內建的自訂變數檔案自訂 Bootstrap,並使用新的 $enable-*
Sass 變數輕鬆切換全域 CSS 偏好設定。視需要覆寫變數值,並使用 npm run test
重新編譯。
您可以在 Bootstrap 的 scss/_variables.scss
檔案中找到並自訂這些變數,以取得主要的全域選項。
變數 | 值 | 說明 |
---|---|---|
$spacer |
1rem (預設值)或任何大於 0 的值 |
指定預設間隔值,以透過程式產生我們的間隔工具。 |
$enable-dark-mode |
true (預設值)或 false |
在專案及其元件中啟用內建的深色模式支援。 |
$enable-rounded |
true (預設值)或 false |
在各種元件上啟用預先定義的 border-radius 樣式。 |
$enable-shadows |
true 或 false (預設值) |
在各種元件上啟用預先定義的裝飾性 box-shadow 樣式。不會影響用於焦點狀態的 box-shadow 。 |
$enable-gradients |
true 或 false (預設值) |
在各種元件上透過 background-image 樣式啟用預先定義的漸層。 |
$enable-transitions |
true (預設值)或 false |
在各種元件上啟用預先定義的 transition 。 |
$enable-reduced-motion |
true (預設值)或 false |
啟用 prefers-reduced-motion 媒體查詢,根據使用者的瀏覽器/作業系統偏好設定抑制某些動畫/過場。 |
$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 媒體查詢 要求減少動態效果的使用者除外。 |