原文:Buttons
フォ-ム、ダイアログ、そして、複数のサイズ、状態など、より多くのための動作のために、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>
Bootstrapには、いくつかの、あらかじめ設定されたボタンのスタイルが含まれています。それぞれが、より多くのコントロールのために投入された、いくつかのエクストラで、それ自身のセマンティックな目的を果たしています。
支援技術に意味を伝える
Conveying meaning to assistive technologies
スクリーン・リーダーのような、外観を提供するだけの意味を追加するために、色を使用すると、それは、支援技術から、ユーザーに伝達されません。.sr-onlyクラスで隠されている追加のテキストのような、(表示されるテキストのような)内容そのものから明らか、あるいは、代替手段が含まれられている色によって、情報が表示されていることを確認します。
ボタン・タグ
.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">
輪郭のあるボタン
ボタンが必要な場合、それらが導入するたくさんの背景色以外はないのでしょうか?どんなボタンでも、すべての背景イメージと色を削除するには、デフォルトの修飾子クラスを.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>要素に追加することで、動かないボタンの外観を作成します。
<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>
リンク機能の注意事項
Link functionality caveat
.disabledクラスは、<a>のリンク機能を無効にしようとするpointer-events: noneを使用します。しかし、それは、CSSプロパティは、まだ標準化されていません。加えて、pointer-events: noneをサポートしているブラウザでさえ、キーボード・ナビゲーションは、影響を受けないままです。これは、目に見えるキーボードユーザーとユーザーの支援技術は、まだ、これらのリンクをアクティブにすることができることを示しています。安全のために、これらのリンクに、tabindex="-1"属性を追加します。(それらが、キーボード・フォーカスを受け取るのを防ぐために)
そして、それらの機能を無効にするために、カスタムJavaScriptを使用しました。
ボタンのプラグイン
ツールバーのようなコンポーネントのために、buttons.Controlボタンの状態やボタンのグループを作成を行います。
トルグの状態
ボタンのアクティブな状態を切り換えるために、data-toggle="button"を追加します。あなたが、ボタンを切り換える前の場合、あなたは、<button>に.activeクラスとaria-pressed="true"を手作業で追加する必要があります。
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button>
チェックボックスとラジオボタン
Bootstrapの.buttonスタイルは、チェックボックスやラジオボタンの切り替えスタイルを提供するために、<label>のような、他の要素に適用することができます。data-toggle="buttons"を、JavaScriptを通して、それらの切り換え動作を有効にするために、これらの変更されたボタンが含まれる.btn-groupに追加します。そして、.btn-group-toggleを、あなたのボタンの<input>のスタイルに追加します。
これらのボタンのチェック状態は、ボタンのクリックイベントによってのみ更新されます。あなたが、別の方法を使用して入力を更新する場合、 -例えば、<input type="reset">で、あるいは、入力のcheckedプロパティを手作業で適用することによって、-あなたは、手作業で、<label>を.activeに切り換える必要があります。
pre-checkedボタンが、あなたが手作業で、.activeクラスを、入力の<label>に追加する必要があることに注意してください。
<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>
メソッド
メソッド | 解説 |
---|---|
$().button('toggle') | プッシュ状態を切り替えます。ボタンに、アクティブ化された外観を与えます。 |
$().button('dispose') | 要素のボタンを破棄します。 |