オプション
組み込みの変数を使用して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 |
グリッドシステム (例: .row、.col-md-1など) 用のCSSクラスの生成を有効にします。 |
$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 |
v6で削除される予定の非推奨のミックスインおよび関数を使用する際に警告を非表示にするには、falseに設定します。 |
$enable-important-utilities |
true (デフォルト) または false |
ユーティリティクラスに!importantサフィックスを有効にします。 |
$enable-smooth-scroll |
true (デフォルト) または false |
prefers-reduced-motionメディアクエリを通じてモーションの削減を要求するユーザーを除き、scroll-behavior: smoothをグローバルに適用します |