Button

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>

Bootstrapには、いくつかの、あらかじめ設定されたボタンのスタイルが含まれています。それぞれが、より多くのコントロールのために投入された、いくつかのエクストラで、それ自身のセマンティックな目的を果たしています。

支援技術に意味を伝える

Button tags

.btnクラスは、<button>要素で使用されるように設計されています。しかしながら、また、あなたは、<a>や<input>要素上で、これらのクラスを使用することができます。（一部のブラウザが、わずかに他の表現を適用するかもしれませんが）。

<a>要素のbuttonクラスを使用するとき、それは、ページの機能を起動するために使用されます。（折りたたむコンテンツのように）、現在のページ内で、新しいページやセクションを始めるリンクではなく、これらのリンクは、スクリーン・リーダーのような、それらの目的を、適切に、支援技術に選択するために、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">

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>にクラスを追加する必要性は、ありません。しかしながら、あなたは、また、.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>

Disabled state

無効なブール値属性を<button>要素に追加することで、動かないボタンの外観を作成します。

<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クラスを追加する必要があります。
• いくつかの今後に配慮したスタイルは、アンカー・ボタン上で、すべてのポインター-イベントを無効にするために、含まれています。そのプロパティをサポートするブラウザで、あなたは、すべての無効なカーソルを見ることはないでしょう。
• 無効なボタンは、支援技術に要素の状態を示すために、aria-disabled="true"属性が含まれている必要があります。

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

リンク機能の注意事項

.disabledクラスは、<a>のリンク機能を無効にしようとするpointer-events: noneを使用します。しかし、それは、CSSプロパティは、まだ標準化されていません。加えて、pointer-events: noneをサポートしているブラウザでさえ、キーボード・ナビゲーションは、影響を受けないままです。これは、目に見えるキーボードユーザーとユーザーの支援技術は、まだ、これらのリンクをアクティブにすることができることを示しています。安全のために、これらのリンクに、tabindex="-1"属性を追加します。（それらが、キーボード・フォーカスを受け取るのを防ぐために）
そして、それらの機能を無効にするために、カスタムJavaScriptを使用しました。

Toggle states

ツールバーのようなコンポーネントのために、buttons.Controlボタンの状態やボタンのグループを作成を行います。

トルグの状態

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

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Active
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Check
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Check
  </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>

メソッド