Buttons

Buttons(ボタン)はフォームやダイアログなどのアクションにカスタムボタンスタイルを利用できます。 サイズや状態管理に対応しています。ボタンの使い方の例を示します。

Examples

いくつかの定義済みのボタンスタイルがあり, それぞれ目的を持っています。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Conveying meaning to assistive technologies

色を用いた場合, 視覚でしか意味を伝えることができないのでスクリーンリーダーなどに対応することはできません。 そのため, 色で付加された情報がコンテンツから明らかであるか, 追加のテキストを不可視で追加する .sr-only クラスなどの手法を用いて含まれているかを確認してください。

Button tags

.btn クラスは <button> 要素で使用するために設計されていますが, <a> や <input> 要素でも利用できます。
（ブラウザによってはレンダリングされる内容に差異が可能性があります） .btn を a で機能のトリガーとして利用する場合は　role="button" を適用する必要があります。

Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Outline buttons

アウトラインボタン：.btn-outline-* を適用すると枠線を残してボタンの背景色を透過することができます。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

ボタンのサイズを .btn-lg , .btn-sm を適用すると変更できます。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

.btn-block. を適用すると, 親要素の幅に合わせることができます。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Active state

ボタンを押すと, 押された状態のままに表示することができます。(背景やボーダーが暗くなり, 影がつきます) 擬似クラスを使うので, <button> にクラスを追加する必要はありません。
強制的に押された状態を表示するには aria-pressed="true" とします。

Primary link Link 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Disabled state

ボタンを無効状態にするには aria-disabled="true" を適用します。

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

無効化ボタンを <a> 要素で使用した場合はすこし動きが違います。

  • <a> は disabled 属性をサポートしていません。 .disabled クラスを利用する必要があります。
  • アンカーボタンを無効化したスタイルを含んでいます。ブラウザがその機能をサポートしているのであればカーソルは見えなくなるでしょう。
  • 無効化するボタンには aria-distabled=”true” 属性をつけてください (スクリーンリーダー用)
Primary link Link 
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

.disabled クラスは <a> の機能を使えなくする pointer-events: none を使用していますが, この CSS プロパティは標準化されていません。 加えて, もしブラウザが pointer-events: none をサポートしていない場合, キーボードナビゲーションが影響を受けず残り続け, キーボードを用いたユーザやスクリーンリーダーなどの補助機能を使ったユーザはこのリンクを開くことができます。 安全のため, これらのリンクに tabindex="-1" 属性（キーボードからのフォーカスを防ぐ）をつけ, 加えてカスタム JavaScript を用いてこれらの機能を無効にしてください。

Button plugin

コントロールボタンで, ツールバーのようなコンポーネントのボタンの状態を示したり, ボタンのグループが作成可能です。

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">
  Single toggle
</button>

Checkbox and radio buttons

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

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

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </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> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Methods

Method Description
$().button('toggle') Toggles push state. Gives the button the appearance that it has been activated.
$().button('dispose') Destroys an element’s button.

v4.5