in English

ボタン

複数のサイズ、状態などをサポートするフォーム、ダイアログなどのアクションに 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すべてのアンカー ボタンを無効にするために、いくつかの将来に適したスタイルが含まれています。そのプロパティをサポートするブラウザーでは、無効化されたカーソルはまったく表示されません。
  • 使用する無効化されたボタンには、要素の状態を支援技術に示すため<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>

ボタンプラグイン

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

状態の切り替え

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