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

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.2.1】長丸ボタン:.btn.btn-{themecolor}.bagde-pill.btn.btn-{themecolor}.rounded-pill

【Bootstrap3.xとの変更箇所】

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

 

ボタンタグ(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"属性(支援技術にボタンの役割を伝える)を入れる

【変更履歴】

  • 【v4.0.0-beta.3】ボタンにカーソルを合わせた際に、指カーソル(cursor: pointer;)に変化しない(アンカーリンク <a> での設定を除く)仕様を取り止め

 

アウトラインボタン(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}(上記の「サイズの種類」から選択)を追加

【Bootstrap3.xとの変更箇所】

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

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

見本

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

●同 <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 flex-md-row">
	<button type="button" class="btn btn-primary w-auto">モバイルボタン</button>
	<button type="button" class="btn btn-outline-secondary w-auto 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.flex-md-row > a.btn.btn-{themecolor}.w-auto(または.btn.btn-outline-{themecolor}.w-auto
    アンカーリンク <a> ボタンの場合はa.btn.btn-{themecolor}(または.btn.btn-outline-{themecolor})に .d-block.d-md-inline-block を追加
    ボタンの間隔の設定には、別途空白ユーティリティクラスを追加すること

 

ボタンのアクティブ化(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)

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

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

1. <button> タグで設定

見本

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

【設定】

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

【Bootstrap3.xとの変更箇所】

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

2. <a> タグで設定

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

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

【設定】

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

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

  • 支援技術に要素が無効の状態を伝えるため aria-disabled="true" 属性を入れる
  • リンクにキーボードフォーカスを受け取らないようにするために tabindex="-1" を入れる

【Bootstrap3.xとの変更箇所】

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

 

ボタンのプラグイン(Button plugin)

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

切替ボタン(Toggle states)

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

見本
設定例
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">ココを押す</button>
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">プッシュ状態</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" を入れる

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

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の設定例 緑背景が変更箇所
チェックボックス<div class="btn-group-toggle mb-3" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" checked autocomplete="off"> チェック
	</label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" autocomplete="off" checked> アクティブ
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" autocomplete="off"> チェック
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" autocomplete="off"> チェック
 </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" autocomplete="off"" checked> アクティブ
	</label>
	<label class="btn btn-secondary">
		<input type="radio" name="options" id="option2" autocomplete="off"> ラジオ
	</label>
	<label class="btn btn-secondary">
		<input type="radio" name="options" id="option3" autocomplete="off"> ラジオ
	</label>
</div>

【設定】

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

【変更履歴】

  • 【v4.0.0-beta.3】div.btn-group[data-toggle="buttons"].btn-group-toggle を追加

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

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

【Bootstrap3.xとの変更箇所】

  • $().button('reset'), $().button(string) は廃止