View on GitHub

選項 (Options)

使用內建變量快速自定義 Bootstrap 來輕鬆切換全局 CSS 偏好設定以控制樣式與行為。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

透過內建的自定義變量文件對 Bootstrap 進行分類，並使用新的 $enable-* Sass 變量輕鬆切換全局 CSS 偏好設定。覆蓋變量的值並根據需要的 npm run test 進行編譯。

您可以在 Bootstrap 最關鍵的的 scss/_variables.scss 文件中找到並自定義這些變量。

Variable	Values	Description
`$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` 樣式。並不會影響用於 `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` media query，其會根據用戶的瀏覽器／操作系統偏好來禁止某些動畫、過渡。
`$enable-grid-classes`	`true` (default) or `false`	生成網格系統的 CSS 類別。(e.g. `.row`, `.col-md-1`, etc.).
`$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` icons 並在自定義表單中啟用驗證狀態。
`$enable-negative-margins`	`true` or `false` (default)	啟用生成 negative margin utilities.
`$enable-deprecation-messages`	`true` (default) or `false`	設置為 `false` 以可以使用 `v6` 中任何應被移除的非推薦 mixin 物件以及功能時顯示警告。
`$enable-important-utilities`	`true` (default) or `false`	在 utility 類別使用 `!important` 後綴。
`$enable-smooth-scroll`	`true` (default) or `false`	全局應用 `scroll-behavior: smooth`，除了使用者通過 `prefers-reduced-motion` media query 減少運動。