ボタン

ボタンスタイル

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>