Buttons
フォームやダイアログなどのアクションにカスタムボタンスタイルを利用できます。 サイズや状態管理に対応しています。
Examples
いくつかの定義済みのボタンスタイルがあり, それぞれ目的を持っています。
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
<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>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only
class.
.btn
クラスは <button>
要素で使用するために設計されていますが, <a>
や <input>
要素でも利用できます。
(ブラウザによってはレンダリングされる内容に差異が可能性があります)
.btn
を 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-*
を適用すると枠線を残してボタンの背景色を透過することができます。
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<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
を適用すると変更できます。
Large button
Large button
<button type= "button" class= "btn btn-primary btn-lg" > Large button</button>
<button type= "button" class= "btn btn-secondary btn-lg" > Large button</button>
Small button
Small 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. を適用すると, 親要素の幅に合わせることができます。
Block level button
Block level button
<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>
にクラスを追加する必要はありません。
強制的に押された状態を表示するには 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
ボタンを無効状態にするには aria-disabled="true"
を適用します。
Primary button
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
属性をサポートしていません。 .disabled
クラスを利用する必要があります。
アンカーボタンを無効化したスタイルを含んでいます。ブラウザがその機能をサポートしているのであればカーソルは見えなくなるでしょう。
無効化するボタンには aria-distabled=”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>
Link functionality caveat
The .disabled
class uses pointer-events: none
to try to disable the link functionality of <a>
s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none
, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1"
attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
コントロールボタンで, ツールバーのようなコンポーネントのボタンの状態を示したり, ボタンのグループが作成可能です。
Toggle states
ボタンを押された状態に切り替えるには, data-toggle="button"
を追加します。
ボタンをあらかじめ押された状態に切り替えておく場合は, .active
クラスと aria-pressed="true"
を <button>
に適用します。
Single toggle
<button type= "button" class= "btn btn-primary" data-toggle= "button" aria-pressed= "false" autocomplete= "off" >
Single toggle
</button>
.button
スタイルは, <label>
などの他の要素に適用すると, チェックボックスやラジオボタンの切り替えを行うことが可能です。
.btn
グループに data-toggle="buttons"
を追加してJavaScript経由で切替動作を有効にします。
単一またはグループの入力電源ボタンも作成可能。
これらのボタンのチェック状態は, クリックイベントによってのみ更新されます。
例えば <input type="reset">
で入力を更新するために別のメソッドを使用する場合や,input
の checked
プロパティに適用する場合は, <label>
を .active
を切り替える必要があります。
事前にボタンをチェック済みにしておくには, <label>
に .active
クラスを追加する必要があります。
<div class= "btn-group-toggle" data-toggle= "buttons" >
<label class= "btn btn-secondary active" >
<input type= "checkbox" checked autocomplete= "off" > 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" 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>
Methods
Method
Description
$().button('toggle')
Toggles push state. Gives the button the appearance that it has been activated.
$().button('dispose')
Destroys an element’s button.