ja
変数の操作
Sass variables
ソースコードのSass変数は_variables.scssで!defaultオプションを使って定義されています。
基本パラメータ
以下の変数は、スタイル設定全体のための基本パラメータです。
-
$font-size-base: 基本フォントサイズ（デフォルト：1rem）、Bootstrapスタイルのすべてのフォントサイズに影響する -
$spacer: Spacingユーティリティの単位長（デフォルト：1rem）
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";カスタマイズプリセット変更
gradient+shadow.scss (冒頭部分)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...視覚表現の違いを確認するには、グラデーションとシャドウ効果を参照してください。 ほとんどの変数はスカラーです (数値、文字列、色、ブール値、および null)。 しかし、以下の変数はキー-バリュー マップとして定義されます。
-
$grays: グレースケールのプリセット -
$colors: 基本色 (blue, indigo, purple, …) -
$theme-colors: Bootstrap テーマ色 (primary, secondary, success, …).. -
$spacers: Spacingのプリセット値 -
$sizes: Sizingのプリセット値 -
$grid-breakpoints: Grid breakpoint (viewport width) プリセット -
$container-max-widths: Breakpoint毎のGrid container width
これらの変数も修正可能です。
variables.scss （このページのSassソース）// Example: Modify $theme-colors$theme-colors: ( // change "success" from green to teal "success": #20c997, // add "custom" to orange "custom": #fd7e14);// import Bootstrap@import "bootstrap/scss/bootstrap";以下はライブアラートサンプルです（Bootstrapデフォルト色との比較 ⇒ 公式ドキュメント例参照）。
Success alert (green to teal changed) –
div.alert.alert-success Custom alert (orange) –
div.alert.alert-custom Sass builtin functionsを使って既存のマップ項目を削除することもできます (map-functions の map-remove($map, $keys...) で検索してください)。 ただし、パーシャルを個別にインポートする必要があります。 詳しくは公式ドキュメントのRemove from mapを参照してください。