「Bootstrap.cssのButtons」のサンプル

「Bootstrap.cssのクラス名のサンプル：和訳」の「Buttons」のサンプルページです。

• a、button、inputに設定可能。
• クラスは「btn btn-○○○○」って感じ

基本

aタグに使う場合は「role="button"」をいれてあげる（<a href="#" role="button" class="btn btn-link">のようにする）

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

サイズ変更

「btn-lg」「btn-sm」「btn-xs」のいずれかを追加。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

ボタンをインラインじゃなくてブロック要素にする

「btn-block」を追加。

ブロック要素になるので幅が100％になってしまうので、親要素で幅調整する必要あり。

<button type="button" class="btn btn-primary btn-block">ブロック要素にしたボタン１</button>
<button type="button" class="btn btn-primary btn-block">ブロック要素にしたボタン２</button>

アクティブ状態

「active」を追加

<button type="button" class="btn btn-primary active">ボタンタグのアクティブ状態１</button>
<button type="button" class="btn btn-default active">ボタンタグのアクティブ状態２</button>

無効化

buttonやinputなら「disabled」の属性、aタグはクラスに「disabled」を追加（<a href="#" class="btn btn-default disabled" role="button">のようにする）

<button type="button" class="btn btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default" disabled="disabled">Button</button>

関連ページ

• Bootstrap
• CSS
• Html/cssのサンプル
• Bootstrap.cssのクラス名のサンプル：和訳