ボタン

ボタンスタイル

Bootstrapには8つのボタンスタイルがあります。

<button type="button" class="btn">Basic</button>
<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>

ボタンクラスは、 <a><button> 、または <input> 要素で使用できます。

Link Button
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

ボタンサイズ

4つのボタンサイズが指定できます。

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

ブロックレベルのボタン

ブロックレベルのボタンは親要素の幅全体に及びます。

<button type="button" class="btn btn-primary btn-block">Button</button>

Active/Disabled

ボタンは、アクティブ(押されているように見える)状態またはディスエーブル(選択不可能)状態に設定できます

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