テーマのブートストラップ
Bootstrap 4 を新しい組み込みの Sass 変数でカスタマイズしてグローバル スタイル設定を行い、テーマやコンポーネントの変更を簡単にします。
序章
Bootstrap 3 では、テーマの設定は主に、LESS の変数のオーバーライド、カスタム CSS、およびdist
ファイルに含まれている個別のテーマ スタイルシートによって行われていました。少し努力すれば、コア ファイルに手を加えることなく、Bootstrap 3 の外観を完全に再設計することができます。Bootstrap 4 は、おなじみですが、わずかに異なるアプローチを提供します。
現在、テーマは Sass 変数、Sass マップ、カスタム CSS によって実現されています。専用のテーマ スタイルシートはなくなりました。代わりに、組み込みのテーマを有効にしてグラデーションや影などを追加できます。
サス
ソース Sass ファイルを利用して、独自のアセット パイプラインを使用してSass をコンパイルするときに、変数、マップ、ミックスインなどを活用します。
ファイル構造
可能な限り、Bootstrap のコア ファイルを変更しないでください。Sass の場合、Bootstrap をインポートして変更および拡張できる独自のスタイルシートを作成することを意味します。npm のようなパッケージ マネージャーを使用していると仮定すると、ファイル構造は次のようになります。
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
ソース ファイルをダウンロードし、パッケージ マネージャーを使用していない場合は、その構造に似たものを手動でセットアップして、Bootstrap のソース ファイルを自分のものとは別にしておく必要があります。
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
輸入中
custom.scss
で、Bootstrap のソース Sass ファイルをインポートします。Bootstrap をすべて含めるか、必要な部分を選択するかの 2 つのオプションがあります。後者をお勧めしますが、コンポーネント間にいくつかの要件と依存関係があることに注意してください。また、プラグイン用にいくつかの JavaScript を含める必要があります。
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
その設定が整ったら、custom.scss
. // Optional
必要に応じて、セクションの下に Bootstrap の一部を追加することもできます。bootstrap.scss
開始点として、ファイルからの完全なインポート スタックを使用することをお勧めします。
変数のデフォルト
Bootstrap のすべての Sass 変数には!default
フラグが含まれており、Bootstrap のソース コードを変更することなく、独自の Sass で変数のデフォルト値をオーバーライドできます。必要に応じて変数をコピーして貼り付け、値を変更して、!default
フラグを削除します。変数が既に割り当てられている場合、Bootstrap のデフォルト値によって再割り当てされることはありません。
Bootstrap の変数の完全なリストは にありますscss/_variables.scss
。一部の変数は に設定null
されています。これらの変数は、構成でオーバーライドされない限り、プロパティを出力しません。
変数のオーバーライドは、関数、変数、および mixin がインポートされた後、残りのインポートの前に行う必要があります。
npm 経由で Bootstrap をインポートしてコンパイルするときに、background-color
とを変更する例を次に示します。color
<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
以下のグローバル オプションを含め、Bootstrap の任意の変数に対して必要に応じて繰り返します。
マップとループ
Bootstrap 4 には、関連する CSS のファミリを簡単に生成できるキーと値のペアである Sass マップがいくつか含まれています。色、グリッド ブレークポイントなどに Sass マップを使用します。Sass 変数と同様に、すべての Sass マップには!default
フラグが含まれており、オーバーライドおよび拡張できます。
一部の Sass マップは、デフォルトで空のマップにマージされます。これは、特定の Sass マップを簡単に拡張できるようにするために行われますが、マップからアイテムを削除するのが少し難しくなります。
地図を修正する
マップの既存の色を変更するには$theme-colors
、カスタム Sass ファイルに次を追加します。
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
地図に追加
に新しい色を$theme-colors
追加するには、新しいキーと値を追加します。
$theme-colors: (
"custom-color": #900
);
マップから削除
$theme-colors
やその他のマップから色を削除するには、 を使用しますmap-remove
。要件とオプションの間に挿入する必要があることに注意してください。
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
必要なキー
Bootstrap は、Sass マップ内にいくつかの特定のキーが存在することを想定しており、これらを自分で使用および拡張しています。含まれているマップをカスタマイズすると、特定の Sass マップのキーが使用されている場所でエラーが発生する場合があります。
たとえば、リンク、ボタン、およびフォームの状態にはprimary
、 、success
、およびdanger
キーを使用します。$theme-colors
これらのキーの値を置き換えても問題はありませんが、削除すると Sass コンパイルの問題が発生する可能性があります。このような場合、それらの値を使用する Sass コードを変更する必要があります。
機能
Bootstrap はいくつかの Sass 関数を利用しますが、一般的なテーマに適用できるのはサブセットのみです。カラー マップから値を取得するための 3 つの関数が含まれています。
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
これらを使用すると、v3 の色変数を使用する方法と同じように、Sass マップから 1 つの色を選択できます。
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
マップから特定のレベルの色を取得する別の関数もあり$theme-colors
ます。負のレベル値は色を明るくし、高いレベルは暗くします。
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
実際には、関数を呼び出して 2 つのパラメーターを渡します。色の名前$theme-colors
(プライマリまたは危険など) と数値レベルです。
.custom-element {
color: theme-color-level(primary, -10);
}
将来的に追加の関数を追加するか、独自のカスタム Sass を追加して、追加の Sass マップのレベル関数を作成するか、より詳細にしたい場合は汎用関数を作成することもできます。
色のコントラスト
Bootstrap に含まれる追加関数は、色のコントラスト関数ですcolor-yiq
。YIQ 色空間を利用して、指定された基本色に基づいて明るい ( #fff
) または暗い ( ) コントラスト カラーを自動的に返します。#111
この関数は、複数のクラスを生成しているミックスインまたはループに特に役立ちます。
たとえば、$theme-colors
マップから色見本を生成するには:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
1 回限りのコントラストのニーズにも使用できます。
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
カラー マップ関数を使用してベース カラーを指定することもできます。
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
エスケープ SVG
関数を使用して、SVG 背景画像の,および文字escape-svg
をエスケープします。IE で背景画像を適切に表示するには、これらの文字をエスケープする必要があります。関数を使用する場合、データ URI を引用符で囲む必要があります。<
>
#
escape-svg
加算および減算関数
add
および関数を使用してsubtract
、CSScalc
関数をラップします。これらの関数の主な目的は、「単位のない」0
値が式に渡されたときのエラーを回避することcalc
です。のような式calc(10px - 0)
は、数学的に正しいにもかかわらず、すべてのブラウザーでエラーを返します。
計算が有効な例:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
計算が無効な例:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
サスオプション
組み込みのカスタム変数ファイルを使用して Bootstrap 4 をカスタマイズし、新しい$enable-*
Sass 変数を使用してグローバル CSS 設定を簡単に切り替えます。変数の値をオーバーライドし、必要に応じて再コンパイルしnpm run test
ます。
scss/_variables.scss
これらの変数は、Bootstrap のファイルで主要なグローバル オプションを見つけてカスタマイズできます。
変数 | 値 | 説明 |
---|---|---|
$spacer |
1rem (デフォルト)、または任意の値 > 0 |
スペーサー ユーティリティをプログラムで生成するためのデフォルトのスペーサー値を指定します。 |
$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-prefers-reduced-motion-media-query |
true (デフォルト) またはfalse |
ユーザーのブラウザ/オペレーティング システムの設定に基づいて、特定のアニメーション/トランジションを抑制するprefers-reduced-motion メディア クエリを有効にします。 |
$enable-hover-media-query |
true またはfalse (デフォルト) |
非推奨 |
$enable-grid-classes |
true (デフォルト) またはfalse |
グリッド システムの CSS クラスの生成を有効にします (例: 、、.container など)。.row .col-md-1 |
$enable-caret |
true (デフォルト) またはfalse |
で疑似要素キャレットを有効にし.dropdown-toggle ます。 |
$enable-pointer-cursor-for-buttons |
true (デフォルト) またはfalse |
無効になっていないボタン要素に「手」カーソルを追加します。 |
$enable-print-styles |
true (デフォルト) またはfalse |
印刷を最適化するためのスタイルを有効にします。 |
$enable-responsive-font-sizes |
true またはfalse (デフォルト) |
レスポンシブ フォント サイズを有効にします。 |
$enable-validation-icons |
true (デフォルト) またはfalse |
background-image 検証状態のテキスト入力および一部のカスタム フォーム内のアイコンを有効にします。 |
$enable-deprecation-messages |
true (デフォルト) またはfalse |
false で削除される予定の非推奨の mixin および関数を使用する場合に警告を非表示にするには、 に設定しv5 ます。 |
色
Bootstrap のさまざまなコンポーネントとユーティリティの多くは、Sass マップで定義された一連の色によって構築されています。このマップを Sass でループして、一連のルールセットをすばやく生成できます。
全ての色
Bootstrap 4 で利用可能なすべての色は、scss/_variables.scss
ファイル内の Sass 変数および Sass マップとして利用できます。これは、後続のマイナー リリースで拡張され、既に含まれているグレースケール パレットと同様に、追加の色合いが追加されます。
これらを Sass で使用する方法は次のとおりです。
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
color
および の設定には、カラー ユーティリティ クラスも使用できますbackground-color
。
テーマの色
すべての色のサブセットを使用して、配色を生成するための小さなカラー パレットを作成します。これは、Bootstrap のscss/_variables.scss
ファイルで Sass 変数および Sass マップとしても利用できます。
グレイズ
scss/_variables.scss
プロジェクト全体で一貫したグレーの色合いを実現するための広範なグレー変数セットと Sass マップ。これらは「クール グレー」であり、ニュートラル グレーではなく、微妙なブルー トーンになる傾向があることに注意してください。
内scss/_variables.scss
には、Bootstrap の色変数と Sass マップがあります。$colors
Sass マップの例を次に示します。
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
マップ内の値を追加、削除、または変更して、他の多くのコンポーネントでの使用方法を更新します。残念ながら、現時点では、すべてのコンポーネントがこの Sass マップを利用しているわけではありません。今後のアップデートでは、これを改善するよう努めます。それまでは、${color}
変数とこの Sass マップを利用する計画を立ててください。
コンポーネント
Bootstrap のコンポーネントとユーティリティの多くは@each
、Sass マップを反復処理するループで構築されています。これは、コンポーネントのバリアントを生成$theme-colors
し、ブレークポイントごとにレスポンシブ バリアントを作成する場合に特に役立ちます。これらの Sass マップをカスタマイズして再コンパイルすると、これらのループに反映された変更が自動的に表示されます。
修飾子
Bootstrap のコンポーネントの多くは、基本修飾子クラスのアプローチで構築されています。これは、スタイリングの大部分が基本クラス (例: .btn
) に含まれているのに対して、スタイルのバリエーションは修飾子クラス (例: .btn-danger
) に限定されていることを意味します。これらのモディファイア クラスは$theme-colors
マップから構築され、モディファイア クラスの数と名前をカスタマイズします。
コンポーネントとすべてのバックグラウンド ユーティリティ$theme-colors
に対する修飾子を生成するためにマップをループする方法の 2 つの例を次に示します。.alert
.bg-*
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
レスポンシブ
これらの Sass ループも、カラー マップに限定されません。コンポーネントやユーティリティのレスポンシブ バリエーションを生成することもできます。たとえば、レスポンシブ テキスト配置ユーティリティでは、 Sass マップの@each
ループとメディア クエリ インクルードが混在しています。$grid-breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
を変更する必要がある場合$grid-breakpoints
、変更はそのマップを反復するすべてのループに適用されます。
CSS 変数
Bootstrap 4 には、コンパイルされた CSSに約 20 個のCSS カスタム プロパティ (変数)が含まれています。これらは、ブラウザーのインスペクター、コード サンドボックス、または一般的なプロトタイピングで作業するときに、テーマの色、ブレークポイント、プライマリ フォント スタックなどの一般的に使用される値に簡単にアクセスできるようにします。
利用可能な変数
含める変数は次のとおりです (:root
は必須であることに注意してください)。それらは私たちの_root.scss
ファイルにあります。
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
例
CSS 変数は Sass の変数と同様の柔軟性を提供しますが、ブラウザーに提供する前にコンパイルする必要はありません。たとえば、ここではページのフォントとリンクのスタイルを CSS 変数でリセットしています。
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
ブレークポイント変数
CSS 変数 (例: --breakpoint-md
) には元々ブレークポイントが含まれていましたが、これらはメディア クエリではサポートされていませんが、メディア クエリのルールセット内で引き続き使用できます。これらのブレークポイント変数は、JavaScript で利用できるため、下位互換性のためにコンパイル済みの CSS に残ります。詳しくは仕様をご覧ください。
サポートされていない例を次に示します。
@media (min-width: var(--breakpoint-sm)) {
...
}
サポートされているものの例を次に示します。
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}