ボタン

複数のサイズ、状態などをサポートするフォーム、ダイアログなどのアクションに 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>

アクティブな状態

アクティブな場合、ボタンは押されたように見えます (背景が暗くなり、枠線が暗くなり、影が挿入されます)。疑似クラスを使用するため、 s にクラスを追加する必要はありません<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任意の要素に boolean 属性を追加して、ボタンが非アクティブに見えるようにし<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>s はこの属性をサポートしていないため、視覚的に無効に見えるようにクラスをdisabled追加する必要があります。.disabled
pointer-eventsすべてのアンカーボタンを無効にするために、いくつかの将来に適したスタイルが含まれています。そのプロパティをサポートするブラウザーでは、無効化されたカーソルはまったく表示されません。
aria-disabled="true"無効化されたボタンには、要素の状態を支援技術に示すための属性を含める必要があります。

プライマリリンクリンク

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

ボタンプラグイン

ボタンをもっと活用しましょう。ボタンの状態を制御したり、ツールバーなどのその他のコンポーネント用にボタンのグループを作成したりします。

状態の切り替え

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

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

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

Bootstrap の.buttonスタイルを s などの他の要素に適用して<label>、チェックボックスまたはラジオスタイルボタンのトグルを提供できます。これらの変更されたボタンを含むに追加data-toggle="buttons"して、.btn-groupJavaScript によるトグル動作を有効にし、ボタン内のの.btn-group-toggleスタイルを追加し<input>ます。単一の入力電源ボタンまたはそれらのグループを作成できることに注意してください。

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

.active事前にチェックされたボタンでは、クラスを入力のに手動で追加する必要があることに注意してください<label>。

チェック済み

<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')`	要素のボタンを破棄します。

ボタン

例