twitter-bootstrap
ボタン

構文

• クラス：.btn-default | .btn-primary | .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-link;
• サイズ：.btn-lg | .btn-md | .btn-sm | .btn-xs;
• 状態：アクティブ|消散した。

ボタンクラス

ブートストラップは、スタイリングボタンのための複数のクラスを提供し、それらを際立たせます。

ブートストラップボタンは、 .btnクラスを要素に追加することで作成できます。

ボタンのサイズ

また、 .btn-sizeクラスでさまざまなサイズのボタンを作成することもできます

ボタンをアクティブにする

activeクラスはボタンが押されたように見せます。

<button type="button" class="btn btn-primary active">Active Primary</button>

ボタンを無効にする

disabledクラスをボタンに追加すると、そのボタンをクリックできなくなり、その上にカーソルを置くと禁止されたカーソルが表示されます。

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

ボタンを水平方向にレンダリングする

複数のボタンは、 .btn-groupクラスで水平にレンダリングできます。コンテナ要素内にボタンをラップし、その要素にbtn-groupクラスを渡します。

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

ボタンを垂直方向にレンダリングする

コンテナ要素に.btn-group-verticalクラスを適用する

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apples</button>
  <button type="button" class="btn btn-primary">Oranges</button>
  <button type="button" class="btn btn-primary">Pineapples</button>
</div>

ボタングループを全幅にする

.btn-group要素内にラップされたボタンは、必要なだけの幅を占めます。グループを画面の幅全体に.btn-group-justifiedは、代わりに.btn-group-justified使用します。

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apples</a>
  <a href="#" class="btn btn-primary">Oranges</a>
  <a href="#" class="btn btn-primary">Pineapples</a>
</div>