Bootstrap - CSS Button


クラス .btn の使用例

button, input, a タグで class="btn btn-****" を指定する。**** はボタンのオプション。

a ボタン
<button class="btn btn-default" type="button">button ボタン</button>
<input class="btn btn-default" type="button" value="input ボタン" />
<a class="btn btn-default" href="#" role="button">a ボタン</a>

ボタンのオプション

以下のオプションがある。


 <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>

ボタンの状態設定

active を追加するとラジオボタンのように動作する。

 <button type="button" class="btn btn-default active">ボタン1</button>
 <button type="button" class="btn btn-default active">ボタン2</button>

disabled を追加すると無効状態になる。

 <button type="button" class="btn btn-default disabled">ボタン</button>

ボタンのサイズ

.btn-lg, .btn-sm, .btn-xs のどれかを追加するとボタンの大きさを変更できる。

 <input type="button" class="btn btn-default btn-lg" value="Large" />
 <input type="button" class="btn btn-default btn-sm" value="Small" />
 <input type="button" class="btn btn-default btn-xs" value="Xtra Small" />