Bootstrapでボタンを作成する

HTML・CSS

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

参考ページ:Buttons

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

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

button1

<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

<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”など設定すると大きさを変更できます。

button3

<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>
スポンサーリンク

コメント

タイトルとURLをコピーしました