Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Options (オプション)

組み込み変数を利用して Bootstrap をカスタマイズして、グローバル CSS 設定を簡単に切り替えることができます。

ビルトインのカスタム変数ファイルを使い、$enable-* Sass 変数を用意することで、簡単にグローバルの CSS 設定を変更できます。変数の上書き、npm run test、再コンパイルが必要になります。

Bootstrap の scss/_variables.scss ファイルに全てのグローバルオプションのキーが載っています。

Variable Values Description
$spacer 1rem (default), or any value > 0 スペーサーユーティリティから生成されるスペーサーのデフォルトの値です.
$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 モーションの抑制 メディアクエリを有効にし、ユーザーのブラウザ・OS の設定でアニメーション・トランジションを抑制します。
$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) 負のマージンユーティリティの生成を有効にします。
$enable-deprecation-messages true or false (default) true にすると、非推奨のミックスインや、v5 で削除される予定の関数を使った際に注意を表示します。
$enable-important-utilities true (default) or false ユーティリティクラスで !important 接尾辞を有効にします。