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

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

ボタン(Buttons) v4.0.0一部変更

フォーム、ダイアログなどのアクションには、Bootstrapのカスタムボタンスタイルを使用。文脈的なバリエーション、サイズ、状態などにも対応済。

ボタンの設定(Examples)v4.0.0一部変更

Bootstrapには、いくつかの定義済のボタンスタイルがあり、それぞれ独自の意味的目的を果たす。

ボタンの種類

 .btn-primary

 .btn-secondary v4.0.0追加

 .btn-info

 .btn-success

 .btn-warning

 .btn-danger

 .btn-light v4.0.0追加

 .btn-dark v4.0.0追加

 .btn-link

●裏技

 .page-link.text-dark.d-inline-block
※v3のDefaultボタン.btn-default)の代用(アクティブ化、無効化、プラグインでの使用は不可)

 .btn-{themecolor}.rounded-0

 丸ボタン(1文字用):.btn-{themecolor}.rounded-circle.p-0

 .btn-{themecolor}.rounded-pill v4.2.1設定変更

設定例
通常のボタン<button type="button" class="btn btn-primary">...</button>
Default風<button type="button" class="btn page-link text-dark d-inline-block">...<span class="sr-only">ノーマルボタン</span></button>
角ボタン<button type="button" class="btn btn-primary rounded-0">角ボタン</button>
丸ボタン<button type="button" class="btn btn-primary rounded-circle p-0" style="width:2rem;height:2rem;">+</button>
長丸ボタン<button type="button" class="btn btn-primary rounded-pill">長丸ボタン</button>

【設定】

  • <button>.btn.btn-{themecolor}.btn-{themecolor} は上記「ボタンの種類」から選択)を入れる(.btn 単独での使用は不可)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, link のいずれかを選択
  • ※裏技で .btn.btn-{themecolor}.rounded-0 を追加すると角ボタン、.rounded-circle.p-0 を追加すると丸ボタン(幅と高さの指定も必要)、.rounded-pill を追加すると長丸ボタンになる

【変更履歴】

  • 【v4.0.0】
    • .btn-default(Default)は廃止(.page-link.text-dark.d-inline-block で代用(アクティブ化、無効化、プラグインでの使用は不可))
  • 【v4.2.1】
    • 長丸ボタン:.btn.btn-{themecolor}.bagde-pill.btn.btn-{themecolor}.rounded-pill

 

テキストの折り返しを無効にする(Disable text wrapping) v4.4.0新設

ボタンのテキストが折り返されたくない場合は、ボタン(.btn)に .text-nowrap クラスを追加する。Sass上でボタンのテキストの折り返しを無効にするには、css/_variables.scss$btn-white-space: nowrap と設定すれば可能(デフォルトでは $btn-white-space: null !default; に設定)。

 

ボタンタグ(Button tags)

.btn クラスは、<button> 要素で使用するように設計されているが、<a><input> 要素でこれらのクラスを使用することも可能(ブラウザによっては若干異なるレンダリングが適用される可能性あり)。

現在のページ内の新しいページやセクションにリンクするのではなく、ページ内の機能(コンテンツの折り畳みなど)を起動する <a> 要素のボタンクラスを使用する場合は、その目的をスクリーンリーダーなどの支援技術に伝えるため、これらのリンクに適切に role="button" を付ける必要がある。

見本
リンク
設定例
アンカーリンク<a>に設定<a class="btn btn-primary" href="#" role="button">リンク</a>
ボタンタグ<button>に設定<button type="submit" class="btn btn-primary">ボタン</button>
インプットボタンに設定<input type="button" class="btn btn-primary" value="入力する">
<input type="submit" class="btn btn-primary" value="登録する">
<input type="reset" class="btn btn-primary" value="リセット">

【設定】

  • <button> だけでなく、<a>, <input[type="button"]>, <input[type="button"]>, <input[type="submit"]>, <input[type="reset"]> のいずれかに .btn.btn-{themecolor} を入れる

アクセシビリティの設定】

  • <a> で使用する際には、role="button"属性(支援技術にボタンの役割を伝える)を入れる

 

アウトラインボタン(Outline buttons)v4.0.0新設

豊かな背景色をもたらすボタンが必要なら、デフォルトの修飾子クラスを .btn-outline-* に置き換えて、ボタンの色を背景画像や色にする。
※背景色の設定がないボタン。背景画像がある場合でも邪魔になりにくい。

ボタンの種類

 .btn-outline-primary

 .btn-outline-secondary

 .btn-outline-info

 .btn-outline-success

 .btn-outline-warning

 .btn-outline-danger

 .btn-outline-light ※色が見やすいように背景色と空白をつけています

 .btn-outline-dark

●裏技

 .btn-outline-{themecolor}.bg-{themecolor}

設定例
<button type="button" class="btn btn-outline-primary">...</button>
背景色と併用<button type="button" class="btn btn-outline-primary bg-warning">...</button>

【設定】

  • .btn.btn-outline-{themecolor}.btn-outline-{themecolor} は上記の「ボタンの種類」から選択)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択

【注意】

  • 背景色を合わせて設定する場合は、.btn-{themecolor} ではなく、.bg-{themecolor} を使用すること(.bg-{themecolor} は「背景色の種類」から選択)

 

ボタンのサイズ(Sizes)v4.0.0一部変更

大きめか小さめのボタンにしたいなら、追加サイズとして .btn-lg.btn-sm を追加。

サイズの種類

 .btn-lg

 .btn-sm

(参考)

設定例
大きめのボタン<button type="button" class="btn btn-primary btn-lg">大きめ</button>
<button type="button" class="btn btn-outline-secondary btn-lg">大きめ</button>
小さめのボタン<button type="button" class="btn btn-primary btn-sm">小さめ</button>
<button type="button" class="btn btn-outline-secondary btn-sm">小さめ</button>

【設定】

  • .btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に .btn-{size}(上記の「サイズの種類」から選択)を追加

【変更履歴】

  • 【v4.0.0】
    • 極小:.btn-xs は廃止
    • 小さめ:.btn-sm はv3の時よりさらに小さめに

親要素の全幅にまたがるブロックレベルのボタンを作成するなら、.btn-block を追加。

見本

●モバイルではブロックレベル表示、タブレット以上では通常表示(裏技)v4.2.1追加、v4.6.0設定変更

●同 <a> タグの場合(裏技)

モバイルブロック モバイルブロック
設定例
ブロックレベルのボタン<button type="button" class="btn btn-primary btn-block">ブロックレベル</button>
<button type="button" class="btn btn-outline-secondary btn-block">ブロックレベル</button>
モバイルのみブロックレベル表示<div class="d-flex flex-column d-md-inline-flex flex-md-row">
	<button type="button" class="btn btn-primary">モバイルボタン</button>
	<button type="button" class="btn btn-outline-secondary ml-md-1 mt-1 mt-md-0">モバイルボタン</button>
</div>
同 <a> タグの場合<a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0" href="#" role="button">モバイルブロック</a>
<a class="btn btn-outline-secondary d-block d-md-inline-block mb-2 mb-md-0" href="#" role="button">モバイルブロック</a>

【設定】

  • .btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に .btn-block を追加
  • ※裏技でモバイルのみブロック表示にするときは、
    <button> タグやインプット <input> ボタンの場合は、div.d-flex.flex-column.d-md-inline-flex.flex-md-row > button.btn.btn-{themecolor}(またはinput.btn.btn-outline-{themecolor}
    アンカーリンク <a> ボタンの場合はa.btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に .d-block.d-md-inline-block を追加
    ボタンの間隔の設定には、別途空白ユーティリティクラスを追加すること

【変更履歴】

  • 【v4.4.1】
    • モバイルのみブロック表示(<button> タグやインプット <input> ボタンの場合):.btn.btn-{themecolor}.w-auto.btn.btn-{themecolor}.flex-fill.flex-md-grow-0
  • 【v4.6.0】
    • モバイルのみブロック表示(<button> タグやインプット <input> ボタンの場合):div.d-flex.flex-column.flex-md-row > .btn.btn-{themecolor}.flex-fill.flex-md-grow-0div.d-flex.flex-column.d-md-inline-flex.flex-md-row > .btn.btn-{themecolor}

 

ボタンのアクティブ化(Active state)

背景や境界線が暗くてシャドウが有効ではめ込みシャドウになっている場合は、アクティブとなりボタンが押されたように見える。擬似クラスを使用するので、<button> にクラスを追加する必要はないが、プログラムでアクティブな状態を複製する必要がある場合は、.active(及び aria-pressed="true" 属性を入れる)を使用して、強制的にアクティブな外観にすることが可能。

見本
設定例
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">アクティブボタン</a>
<a href="#" class="btn btn-outline-secondary active" role="button" aria-pressed="true">アクティブボタン</a>

【設定】

  • .btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に .active を追加

アクセシビリティの設定】

  • .active を追加する際は、aria-pressed="true" 属性(支援技術にボタンが押された状態であることを伝える)も入れる

 

ボタンの無効化(Disabled state)v4.6.1設定変更

disabled 属性を <button> 要素に追加することによって、ボタンを非アクティブに見えるようにする。

1.<button> タグで設定

見本

設定例
<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
<button type="button" class="btn btn-outline-secondary" disabled>無効ボタン</button>

【設定】

  • ボタンの設定に disabled 属性を入れる

【変更履歴】

  • 【v4.0.0】
    • ボタンにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった

2.<a> タグで設定 v4.6.1設定変更

<a> 要素で使用する無効化ボタンは、少し違った動作をする:

  • <a>disabled 属性をサポートしていないため、.disabled クラスを追加して視覚的に無効に見えるようにする必要がある
  • フューチャー・フレンドリースタイルには、アンカーボタンのすべての pointer-events を無効にするためのスタイルが含まれており、そのプロパティをサポートするブラウザでは、無効化カーソルはまったく表示されない。
  • <a> を使用する無効化ボタンには、支援技術に対する要素の状態を示すために、aria-disabled="true" 属性を含める必要がある。
  • <a> を使用する無効化ボタンには、href 属性を含めるべきではない
見本
設定例(v4.6.1~)
<a class="btn btn-primary disabled" role="button" aria-disabled="true">無効ボタン</a>
<a class="btn btn-outline-secondary disabled" role="button" aria-disabled="true">無効ボタン</a>

【設定】

  • <a> タグでは disabled 属性の設定ができないので .disabled を入れる

アクセシビリティの設定】

  • 支援技術に要素が無効の状態を伝えるため aria-disabled="true" 属性を入れる

【変更履歴】

  • 【v4.0.0】
    • ボタンにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった
  • 【v4.6.1】
    • href 属性とtabindex="-1" の設定が不要に(参考
      ※他の無効リンクとは違い、role="button" がある場合には aria-disabled="true" の設定は必要

無効化されたリンクで href 属性を保持する必要がある場合をカバーするために、.disabled クラスは pointer-events: none を使用して <a> のリンク機能を無効にしようとする。このCSSプロパティはまだHTMLに対して標準化されていないが、最近のすべてのブラウザがサポートしているので注意。さらに pointer-events: none をサポートするブラウザであっても、キーボードナビゲーションは影響を受けない。つまりこれは晴眼者キーボードユーザーと支援技術ユーザーが引き続きこれらのリンクをアクティブにできることを意味する。従って安全のために、aria-disabled="true" に加えて、これらのリンクに tabindex="-1" 属性を含めて、それらがキーボードフォーカスを受け取らないようにし、カスタムJavaScriptを使用してそれらの機能を完全に無効にする。

見本
設定例
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>

【設定】

  • a.btn.btn-{themecolor}.disabledhref 属性が必要な場合は tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)の設定が必要

 

ボタンプラグイン(Button plugin)v4.4.0設定変更

ボタンをもっと活用しよう。コントロールボタンで、ツールバーのような多くのコンポーネントのボタンの状態を示したり、ボタンのグループが作成可能。
※ステートフルボタン(ロード状態を表示するボタン)は、v3.3.5で既に廃止済。

切替ボタン(Toggle states)

ボタンをプッシュ状態に切り替えるには、data-toggle="button" を追加。ボタンをあらかじめプッシュ状態に切り替えておく場合は、手動で .active クラスと aria-pressed="true"<button> に追加する必要がある。

見本
設定例(v4.4.0~)
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">ココを押す</button>
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">プッシュ状態</button>

【設定】

  • .btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に data-toggle="button"aria-pressed="false"(支援技術にボタンが押されていない状態であることを伝える属性)を入れる
  • ボタンをあらかじめプッシュ状態に切り替えておく場合は、.btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に .active を追加し、data-toggle="button"aria-pressed="true"(支援技術にボタンが押されている状態であることを伝える属性)を入れる
  • Firefoxはページのロード全体でフォームコントロール状態を持続するので、これを回避するため autocomplete="off" を入れる(v4.4.0以降は不要)

【変更履歴】

  • 【v4.4.0】
    • autocomplete="off" は不要に(プログラム内で処理)

チェックボックスとラジオボタン(Checkbox and radio buttons)v4.0.0設定変更

Bootstrapの .button スタイルは、<label> などの他の要素に適用して、チェックボックスやラジオスタイルのボタンの切り替えを行うことが可能。これらの変更されたボタンを含む .btn グループに data-toggle="buttons" を追加してJavaScript経由で切替動作を有効にし、.btn-group-toggle を追加してボタン内の <input> をスタイル。単一かグループの入力電源ボタンも作成可能。

これらのボタンのチェック状態は、ボタンの click イベントによってのみ更新される。例えば <input type="reset"> で入力を更新するために別のメソッドを使用する場合や、inputの checked プロパティを手動で適用する場合は、手動で <label>.active を切り替える必要がある。

事前にボタンをチェック済にしておくには、<label>.active クラスを手動で追加する必要がある。

見本

●チェックボックス

●ラジオボタン

Bootstrap3.xの設定例 赤背景が変更箇所
チェックボックス<div data-toggle="buttons">
	<label class="btn btn-default active">
		<input type="checkbox" checked autocomplete="off"> チェック
	</label>
</div>

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-default active">
		<input type="checkbox" autocomplete="off" checked> アクティブ
	</label>
	<label class="btn btn-default">
		<input type="checkbox" autocomplete="off"> チェック
	</label>
	<label class="btn btn-default">
		<input type="checkbox" autocomplete="off"> チェック
 </label>
</div>
ラジオボタン<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-default active">
		<input type="radio" name="options id="option1" autocomplete="off" checked> アクティブ
	</label>
	<label class="btn btn-default">
		<input type="radio" name="options" id="option2" autocomplete="off"> ラジオ
	</label>
	<label class="btn btn-default">
		<input type="radio" name="options" id="option3" autocomplete="off"> ラジオ
	</label>
</div>
Bootstrap4.x(v4.4.0~)の設定例 緑背景が変更箇所
チェックボックス<div class="btn-group-toggle mb-3" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" checked> チェック
	</label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" checked> アクティブ
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox"> チェック
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox"> チェック
 </label>
</div>
ラジオボタン<div class="btn-group btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="radio" name="options" id="option1" checked> アクティブ
	</label>
	<label class="btn btn-secondary">
		<input type="radio" name="options" id="option2"> ラジオ
	</label>
	<label class="btn btn-secondary">
		<input type="radio" name="options" id="option3"> ラジオ
	</label>
</div>

【設定】

  • チェックボックス:div.btn-group.btn-group-toggle[data-toggle="buttons"] > label.btn.btn-{themecolor} > input[type="checkbox"]label.active > input[type="checkbox"][checked] でチェック済状態になる)
  • ラジオボタン:div.btn-group.btn-group-toggle[data-toggle="buttons"] > label.btn.btn-{themecolor} > input[type="radio"]label.active > input[type="radio"][checked] で選択済状態になる)
  • Firefoxはページのロード全体でフォームコントロール状態を持続するので、これを回避するため autocomplete="off" を入れる(v4.4.0以降は不要)

【変更履歴】

  • 【v4.0.0】
    • div.btn-group[data-toggle="buttons"].btn-group-toggle を追加
  • 【v4.4.0】
    • autocomplete="off" は不要に(プログラム内で処理)

メソッド(Methods)サンプル v4.0.0一部廃止

メソッド 説明
$().button('toggle') プッシュ状態を切り替える。ボタンをアクティブ化された外観にする。
$().button('dispose')
v4.0.0追加
要素のボタンを破棄。

【変更履歴】

  • 【v4.0.0】
    • $().button('reset'), $().button(string) は廃止