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

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

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>

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

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.