ビルトインのカスタム変数ファイルを使い、$enable-*Sass変数を用意することで、簡単にグローバルのCSS設定を変更できます。変数の上書き、npm run test、再コンパイルが必要になります。
Bootstrapのscss/_variables.scssファイルに全てのグローバルオプションのキーが載っています。
| Variable | Values | Description |
|---|---|---|
$spacer |
1rem (default), or any value > 0 |
スペーサーユーティリティから生成されるスペーサーのデフォルトの値です。 |
$enable-dark-mode |
true (default) or false |
プロジェクトとそのコンポーネント全体で、組み込みのダークモードのサポートを有効にする。 |
$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を有効にし、ユーザーのブラウザ・OSの設定でアニメーション・トランジションを抑制する。 |
$enable-grid-classes |
true (default) or false |
グリッドシステムのためのCSSクラス(例： .row、.col-md-1など)を有効にする。 |
$enable-container-classes |
true (default) or false |
レイアウトコンテナ用のCSSクラスを生成できるようにする。(v5.2.0での新機能) |
$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) |
ネガティブマージンユーティリティの生成を有効にします。 |
$enable-deprecation-messages |
true (default) or false |
falseに設定すると、v6で削除される予定の非推奨のmixinや関数を使用する際に警告を非表示にすることができる。 |
$enable-important-utilities |
true (default) or false |
ユーティリティクラスで!important接尾辞を有効にする。 |
$enable-smooth-scroll |
true (default) or false |
scroll-behavior:smoothをグローバルに適用。ただし、prefers-reduced-motion media queryで動きを小さくすることを要求するユーザは除く。 |