in English

テーマのブートストラップ

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 の任意の変数に対して必要に応じて繰り返します。

スターター プロジェクトで npm 経由で Bootstrap を始めましょう! twbs /bootstrap-npm-starterテンプレート リポジトリに移動して、独自の npm プロジェクトで Bootstrap をビルドおよびカスタマイズする方法を確認してください。Sass コンパイラ、Autoprefixer、Stylelint、PurgeCSS、および 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-yiqYIQ 色空間を利用して、指定された基本色に基づいて明るい ( #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 マップとして利用できます。これは、後続のマイナー リリースで拡張され、既に含まれているグレースケール パレットと同様に、追加の色合いが追加されます。

$青 #007bff
$インディゴ #6610f2
$紫 #6f42c1
$ピンク #e83e8c
$レッド #dc3545
$オレンジ #fd7e14
$イエロー #ffc107
$グリーン #28a745
$ティール #20c997
$シアン #17a2b8

これらを Sass で使用する方法は次のとおりです。

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

colorおよび の設定には、カラー ユーティリティ クラスも使用できますbackground-color

将来的には、以下のグレースケール カラーで行ったように、各色の色合いに Sass マップと変数を提供することを目指します。

テーマの色

すべての色のサブセットを使用して、配色を生成するための小さなカラー パレットを作成します。これは、Bootstrap のscss/_variables.scssファイルで Sass 変数および Sass マップとしても利用できます。

$primary #007bff
$secondary #6c757d
$成功 #28a745
$危険 #dc3545
$警告 #ffc107
$情報 #17a2b8
$ライト #f8f9fa
$ダーク #343a40

グレイズ

scss/_variables.scssプロジェクト全体で一貫したグレーの色合いを実現するための広範なグレー変数セットと Sass マップ。これらは「クール グレー」であり、ニュートラル グレーではなく、微妙なブルー トーンになる傾向があることに注意してください。

$グレー-100 #f8f9fa
$グレイ-200 #e9ecef
$グレイ-300 #dee2e6
$グレイ-400 #ced4da
$グレー-500 #adb5bd
$グレイ-600 #6c757d
$グレイ-700 #495057
$グレイ-800 #343a40
$グレイ-900 #212529

scss/_variables.scssには、Bootstrap の色変数と Sass マップがあります。$colorsSass マップの例を次に示します。

$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);
  }
}