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

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

バッジ(Badges) v4.0.0名称変更

小規模のカウント、ラベル付けコンポーネントであるバッジの解説と例。

※v3のラベルから名称変更。

バッジの設定(Example)v4.0.0名称変更

バッジは、相対的なフォントサイズと em 単位を使用して、直接の親要素のサイズと一致するように調整される。

見本

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New
見出しの例 New
Bootstrap3.xの設定例 赤背景が変更箇所
<h*>見出しの例 <span class="label label-default">New</span></h*>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<h*>見出しの例 <span class="badge badge-secondary">New</span></h*>

【設定】

  • span.badge.badge-{themecolor}.badge-{themecolor} は下記の「色の種類」から選択、.badge 単独での使用は不可)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択
  • バッジの中に表示する内容が存在しない場合は、バッジ自体表示されない

【Bootstrap3.xとの変更箇所】

  • span.label.label-{themecolor}span.badge.badge-{themecolor}

バッジはリンクやボタンの一部としてカウンタを提供するために使用可能。

見本
設定例
コピー<button type="button" class="btn btn-primary">
	お知らせ <span class="badge badge-light">4</span>
</button>

使用方法によっては、スクリーンリーダーや同様の支援技術のユーザーにバッジが混乱する可能性があることに注意。バッジのスタイルはその目的を視覚的に示しているが、これらのユーザーには単にバッジの内容が提示されるのみ。特定の状況によっては、これらのバッジは、文章、リンク、またはボタンの最後に追加されるランダムな単語や数字のように見える場合がある。

コンテンツが明確(上記の"お知らせ"の例のように"4"がお知らせの数であると理解されている場合)でない限り、視覚的に隠された追加のテキストを含む追加のコンテンツを含めることを検討すること。

見本
設定例
コピー<button type="button" class="btn btn-primary">
	プロフィール <span class="badge badge-light">9</span>
	<span class="sr-only">未読メッセージ</span>
</button>

【設定】

  • ボタンの設定内に、span.badge.badge-{themecolor} を入れる

 

バッジの色(Contextual variations)v4.0.0名称変更

下記の修飾子クラスのいずれかを追加して、バッジの外観を変更する。

色の種類

Primary .badge-primary

Secondary .badge-secondary v4.0.0Defaultから変更

Success .badge-success

Info .badge-info

Warning .badge-warning

Danger .badge-danger

Light .badge-light v4.0.0追加

Dark .badge-dark v4.0.0追加

設定例
コピー<span class="badge badge-primary">...</span>

【Bootstrap3.xとの変更箇所】

  • Primary:.label-primary.badge-primary
  • Secondary:.label-default.badge-secondary
  • Info:.label-info.badge-info
  • Success:.label-success.badge-success
  • Warning:.label-warning.badge-warning
  • Danger:.label-danger.badge-danger

 

ピルバッジ(Pill badges)v4.0.0設定変更

.badge-pill 修飾子クラスを使用すると、より丸い(より大きな border-radius と追加の水平 padding を使用)バッジが作成可能。v3のバッジ(Badges)の代わりに使うと便利。

見本
Primary Secondary Success Info Warning Danger Light Dark
設定例
コピー<span class="badge badge-pill badge-primary">...</span>
ボタンでの見本
Bootstrap3.xの設定例 赤背景が変更箇所
<button type="button" class="btn btn-primary">
	プロフィール <span class="badge">9</span>
</button>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<button type="button" class="btn btn-primary">
	プロフィール <span class="badge badge-pill badge-light">9</span>
	<span class="sr-only">未読メッセージ</span>
</button>

【設定】

  • span.badge.badge-{themecolor}.badge-pill を追加

【Bootstrap3.xとの変更箇所】

  • span.badge(バッジ) ⇒ span.badge.badge-{themecolor}.badge-pill

テーマカラーの .badge-* クラスを <a> 要素に使用すると、すぐにホバーとフォーカス状態のアクション可能なバッジが提供される。

見本
設定例
コピー<a href="#" class="badge badge-primary">...</a>

【設定】

  • a.badge.badge-{themecolor}