メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

カラーユーティリティ(Colors) v4.1.0追加

いくつかの色のユーティリティクラスを使用して意味を色で伝える。リンクにも適用され、デフォルトのリンクスタイルと同じようにホバー状態のスタイリングリンクのサポートも含む。
視力の弱い人や色盲のユーザーに配慮して、v3のものよりコントラスト比を高めて鮮やかな色遣いになった。

文字色(Color) v4.1.0一部追加

文字色の種類

各文字色のクラスは、提供されたホバーとフォーカス状態のアンカーでもうまく機能する。.text-white.text-muted クラスでは下線以外のリンクのスタイルがないことに注意(色は濃いめに強調変化しない)。

Primary.text-primary
通常の文章の場合リンクを貼った場合。

Secondary.text-secondary v4.0.0追加
通常の文章の場合リンクを貼った場合。

Success.text-success
通常の文章の場合リンクを貼った場合。

Info.text-info
通常の文章の場合リンクを貼った場合。

Warning.text-warning
通常の文章の場合リンクを貼った場合。

Danger.text-danger
通常の文章の場合リンクを貼った場合。

Light.text-light v4.0.0追加
通常の文章の場合リンクを貼った場合。
※色が見やすいように背景色をつけています

Dark.text-dark v4.0.0追加
通常の文章の場合リンクを貼った場合。

Body(標準の文字色と同じ配色):.text-body v4.1.0追加
通常の文章の場合リンクを貼った場合。 注)リンクのスタイルは設定されていないが参考で表示

Muted.text-muted
通常の文章の場合リンクを貼った場合。 注)リンクのスタイルは設定されていないが参考で表示

White.text-white v4.0.0追加
通常の文章の場合リンクを貼った場合。 注)リンクのスタイルは設定されていないが参考で表示
※色が見やすいように背景色をつけています

Black-50(50%不透明な黒色):.text-black-50 v4.1.0追加
通常の文章の場合リンクを貼った場合。 注)リンクのスタイルは設定されていないが参考で表示

White-50(50%不透明な白色):.text-white-50 v4.1.0追加
通常の文章の場合リンクを貼った場合。 注)リンクのスタイルは設定されていないが参考で表示
※色が見やすいように背景色をつけています

※標準の場合(参考):
通常の文章の場合とリンクを貼った場合。

設定例
コピー<span class="text-primary">通常の文章の場合</span>と<a href="#" class="text-primary">リンクを貼った</a>場合。

【設定】

  • <p><span> などの要素に .text-{themecolor}(上記の「文字色の種類」から選択)を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, muted, body, white, black-50, white-50 のいずれかを選択
  • <a> タグに .text-{themecolor} を入れると、ホバー時に濃いめに強調表示される(.text-body, .text-muted, .text-white, .text-black-50, .text-white-50 を除く)

【Bootstrap3.xとの変更箇所】

  • .text-muted でリンクのスタイルはなくなる

 

背景色(Background Color) v4.0.0一部追加

文字色のクラスと同様、要素の背景色を任意の背景色クラスで簡単に設定可能。アンカー要素では、文字色クラスと同様に、ホバー時に濃くなる。背景色ユーティリティでは color を設定していないので、場合によっては .text-* ユーティリティを使用する必要がある。

背景色の種類

●段落全体に背景色を設定する 色が見やすいように空白を設けています

Primary:.bg-primary
Secondary:.bg-secondary v4.0.0追加
Success:.bg-success
Info:.bg-info
Warning:.bg-warning
Danger:.bg-danger
Light:.bg-light v4.0.0追加
Dark:.bg-dark v4.0.0追加
White:.bg-white v4.0.0追加(※標準の背景色と同じ配色)
透過:.bg-transparent v4.0.0追加

●文章の一部分に背景色を設定する

Primary.bg-primary
標準の文字色白色の文字の場合。さらにリンクを貼った(←リンクを貼った)場合。

Secondary.bg-secondary v4.0.0追加
標準の文字色白色の文字の場合。さらにリンクを貼った(←リンクを貼った)場合。

Success.bg-success
標準の文字色白色の文字の場合。さらにリンクを貼った(←リンクを貼った)場合。

Info.bg-info
標準の文字色白色の文字の場合。さらにリンクを貼った(←リンクを貼った)場合。

Warning.bg-warning
標準の文字色白色の文字の場合。さらにリンクを貼った(←リンクを貼った)場合。

Danger.bg-danger
標準の文字色白色の文字の場合。さらにリンクを貼った(←リンクを貼った)場合。

Light.bg-light v4.0.0追加
標準の文字色白色の文字(←白色の文字)の場合。さらにリンクを貼った場合。

Dark.bg-dark v4.0.0追加
標準の文字色(←標準の文字色)と白色の文字の場合。さらにリンクを貼った場合。

White.bg-white v4.0.0追加(※標準の背景色と同じ配色)
標準の文字色白色の文字(←白色の文字)の場合。さらにリンクを貼った場合。 注)リンクのスタイルは設定されていないが参考で表示

設定例
段落全体に背景色を設定するコピー<div class="p-3 mb-2 bg-primary text-white">...</div>
文章の一部分に背景色を設定するコピー<p><span class="bg-primary">標準の文字色</span>と<span class="bg-primary text-white">白色の文字</span>の場合。さらに<a href="#" class="bg-primary">リンクを貼った</a>場合。

【設定】

  • <div><span> などの要素に .bg-{themecolor}(上記の「背景色の種類」から選択)を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, white, transparent のいずれかを選択
  • 背景色によっては、.text-white など見やすい色の文字を追加する必要あり
  • <a> タグに .bg-{themecolor} を入れると、ホバー時に濃いめに強調表示される(.bg-white.bg-transparent を除く)

【Bootstrap3.xとの変更箇所】

  • .bg-primary のデフォルトの文字色が白でなくなったので、白色の文字にする場合は .text-white を追加する必要あり

定義済みの文字色と背景色の配色

.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-light .bg-dark .bg-white
.text-primary 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-secondary 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-success 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-info 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-warning 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-danger 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-light 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-dark 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-body 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-muted 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-white 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-black-50 文字 文字 文字 文字 文字 文字 文字 文字 文字
.text-white-50 文字 文字 文字 文字 文字 文字 文字 文字 文字

 

背景色のグラデーション化(Background gradient)v4.0.0-beta.2新設

$enable-gradients をtrueに設定すると、.bg-gradient- ユーティリティクラスが使用可能。デフォルトでは、$enable-gradients は意図的に無効に設定されている。これは、Bootstrapの使用を開始してから簡単にカスタマイズできるようにするために行なわれている。これらのクラスなどを有効にするはSassのオプションについて学習すること。

※このクラスを有効にするには、

  1. ツールのセットアップを実行。
  2. Bootstrap4のソースファイルの /scss/_variables.scssOptions の項目にある
    $enable-gradients: false !default;$enable-gradients: true !default; に変更。
  3. コマンドラインから npm run test を実行。
  4. dist/css/ 内の bootstrap.css または bootstrap.min.css.bg-gradient-{themecolor} の設定が追加される(他に .btn-{themecolor}, .alert-{themecolor} の背景色なども変更される)。

bootstrap.min.css をCDNで使用している場合は、.bg-gradient-{themecolor} 関連の設定を取り出して、任意のcssファイルに組み込むのがベター。

背景色の種類 クラスを有効にして表示しています

●段落全体に背景色を設定する 色が見やすいように空白を設けています

Primary:.bg-gradient-primary
Secondary:.bg-gradient-secondary
Success:.bg-gradient-success
Info:.bg-gradient-danger
Warning:.bg-gradient-warning
Danger:.bg-gradient-info
Light:.bg-gradient-light
Dark:.bg-gradient-dark
設定例
コピー<div class="p-3 mb-2 bg-gradient-primary text-white">...</div>

【設定】

  • <div> などの要素に .bg-gradient-{themecolor}(上記の「背景色の種類」から選択)を入れる
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択
  • 背景色によっては、.text-white など見やすい色の文字を追加する必要あり