Bootstrapでボタンを作成する

Bootstrapでボタンを作成（デザイン）するには、クラス設定（class）で”btn”と色を設定する”btn-default”を使うとできます。

参考ページ：Buttons

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

btn-defaultと使うと背景色を白にしますが、他にも”btn-primary”、”btn-success”などを使うと違うデザイン（色）に設定できます。

<button type="button" class="btn btn-default">defalut</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>

button要素以外にも、アンカー（a）要素やinputを使いclassに”btn btn-default”を設定してもボタンのデザインができます。

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

サイズは、classに”btn-lg”、”btn-sm”など設定すると大きさを変更できます。

<button type="button" class="btn btn-default btn-lg">btn-lg</button>
<button type="button" class="btn btn-primary">default</button>
<button type="button" class="btn btn-success btn-sm">btn-sm</button>
<button type="button" class="btn btn-info btn-xs">btn-xs</button>