GitHub で表示

ボタン

フォーム、ダイアログなどで、複数のサイズ、状態などをサポートするBootstrapのカスタムボタンスタイルを使用してアクションを実行します。

例

Bootstrapには、いくつかの定義済みのボタンスタイルが含まれており、それぞれが独自のセマンティックな目的を果たし、より多くの制御のためにいくつかの追加機能が追加されています。

<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>
支援技術への意味の伝達

色を使用して意味を追加しても、視覚的な表示しか提供されず、スクリーンリーダーなどの支援技術のユーザーには伝わらない場合があります。色の意味は、コンテンツ自体（例：表示されているテキスト）から明らかであるか、.sr-onlyクラスで非表示にした追加テキストなど、代替手段で含めるようにしてください。

テキストの折り返しの無効化

ボタンテキストを折り返したくない場合は、ボタンに.text-nowrapクラスを追加できます。Sassでは、$btn-white-space: nowrapを設定して、各ボタンのテキストの折り返しを無効にできます。

ボタンタグ

.btnクラスは<button>要素で使用することを目的としています。ただし、これらのクラスは<a>または<input>要素でも使用できます（ただし、一部のブラウザではレンダリングがわずかに異なる場合があります）。

新しいページへのリンクまたは現在のページ内のセクションへのリンクではなく、ページ内の機能（コンテンツの折りたたみなど）をトリガーするために使用される<a>要素でボタンクラスを使用する場合は、これらのリンクにrole="button"を指定して、スクリーンリーダーなどの支援技術に目的を適切に伝える必要があります。

リンク 
<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">

アウトラインボタン

ボタンが必要ですが、それらがもたらす大きな背景色は必要ありませんか？デフォルトの修飾子クラスを.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>
ボタンスタイルの一部は比較的明るい前景の色を使用しており、十分なコントラストを得るために暗い背景でのみ使用してください。

サイズ

より大きくしたり、小さくしたりしたいですか？追加のサイズとして.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>

アクティブ状態

ボタンは、アクティブな場合、暗い背景、暗いボーダー、影が有効になっている場合はインセットシャドウを使用して押されたように見えます。<button>は擬似クラスを使用するため、クラスを追加する必要はありません。ただし、状態をプログラムで再現する必要がある場合は、.active（およびaria-pressed="true"属性を含む）を使用して、同じアクティブな外観を強制的に適用できます。

プライマリリンク リンク
<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>

無効状態

<button>要素にdisabledブール属性を追加することで、ボタンを非アクティブに見せることができます。

<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クラスを追加する必要があります。
  • アンカーボタンのすべてのpointer-eventsを無効にするために、将来的なスタイルがいくつか含まれています。そのプロパティをサポートするブラウザでは、無効なカーソルはまったく表示されません。
  • <a>を使用する無効なボタンには、支援技術に要素の状態を示すaria-disabled="true"属性を含める必要があります。
  • <a>を使用する無効なボタンには、href属性を含めるべきではありません。
プライマリリンク リンク
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

無効なリンクで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">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ボタンプラグイン

ボタンでさらに多くのことを行います。ボタンの状態を制御したり、ツールバーなどのコンポーネントのボタンをグループ化したりします。

トグル状態

ボタンのactive状態を切り替えるには、data-toggle="button"を追加します。ボタンを事前に切り替える場合は、.activeクラスとaria-pressed="true"を<button>に手動で追加する必要があります。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

チェックボックスとラジオボタン

Bootstrapの.buttonスタイルは、チェックボックスまたはラジオスタイルのボタンの切り替えを提供するために、<label>などの他の要素に適用できます。JavaScriptを使用して切り替え動作を有効にするには、これらの修正済みボタンを含む.btn-groupにdata-toggle="buttons"を追加し、ボタン内の<input>のスタイルを設定するには.btn-group-toggleを追加します。入力で駆動される単一ボタンまたはボタンのグループを作成できます。

これらのボタンのチェック済み状態は、ボタンのclickイベントでのみ更新されます。別の方法（例：<input type="reset">を使用するか、入力のcheckedプロパティを手動で適用する）を使用して入力を更新する場合は、<label>の.activeを手動で切り替える必要があります。

事前にチェックされたボタンには、入力の<label>に.activeクラスを手動で追加する必要があります。

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

メソッド

メソッド 説明
$().button('toggle') プッシュ状態を切り替えます。ボタンがアクティブ化されたように表示します。
$().button('dispose') 要素のボタンを破棄します。