ボタン（Buttons） v4.0.0一部変更

ボタンの設定（Examples）v4.0.0一部変更

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

ボタンの種類

設定例

通常のボタンコピー<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>

テキストの折り返しを無効にする（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="リセット">

アウトラインボタン（Outline buttons）v4.0.0新設

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

ボタンの種類

設定例

コピー<button type="button" class="btn btn-outline-primary">...</button>

背景色と併用コピー<button type="button" class="btn btn-outline-primary bg-warning">...</button>

ボタンのサイズ（Sizes）v4.0.0一部変更

大きめか小さめのボタンにしたいなら、追加サイズとして .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-block を追加。

見本

設定例

ブロックレベルのボタンコピー<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>

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

ボタンの無効化（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>

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>

リンク機能の警告 v4.6.1更新

無効化されたリンクで 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>

ボタンプラグイン（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>

チェックボックスとラジオボタン（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 クラスを手動で追加する必要がある。

見本

チェックボックス<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>

チェックボックスコピー<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>

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