Boostrapでボタンやアンカーを装飾する

button,input,a要素に同じようにスタイルを指定できる。
下記の例ではbutton,input,a要素のclass属性に、同じ設定値である「"btn btn-primary btn-lg"」をセットしている。

	<button type="button" class="btn btn-primary btn-lg">button タグ</button>
	<input type="button" class="btn btn-primary btn-lg" value="input タグ" />
	<a href="#" class="btn btn-primary btn-lg">a タグ</a>
			

button タグ a タグ

ボタンにはいくつかのスタイルがある。 スタイルにはdefault,primary,success,info,warning,danger,linkがある。

	<input type="button" class="btn btn-default" value="default" />
	<input type="button" class="btn btn-primary" value="primary" />
	<input type="button" class="btn btn-success" value="success" />
	<input type="button" class="btn btn-info" value="info" />
	<input type="button" class="btn btn-warning" value="warning" />
	<input type="button" class="btn btn-danger" value="danger" />
	<input type="button" class="btn btn-link" value="link" />

ボタンのサイズは4種類あり、大きい、ふつう、小さい、極小から選んで指定できる。
lg,sm,xsを指定すると大きい、小さい、極小となる。省略した場合はふつうサイズとなる。

	<input type="button" class="btn btn-primary btn-lg" value="大きい" />
	<input type="button" class="btn btn-primary " value="ふつう" />
	<input type="button" class="btn btn-primary btn-sm" value="小さい" />
	<input type="button" class="btn btn-primary btn-xs" value="極小" />

ボタンを連結する場合。

	<div class="btn-group">
		<a class="btn btn-success" href="#">見出しタイプ</a>
		<a class="btn  btn-primary" href="#">プランタイプ</a>
		<button class="btn btn btn-danger">テストタイプ</button>
	</div>

ボタンにアイコンを表示する。ただしa,buttonタグ限定。
アイコンは単独で表示させることもできる。

	<a class="btn btn-primary " title="リンク"><span class="glyphicon glyphicon-link"></span></a>
	<a class="btn btn-primary " title="画像"><span class="glyphicon glyphicon-picture"></span></a>
	<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 検索</button>
	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

検索

ボタンを右寄せにするには「pull-right」を記述する。

<button type="button" class="btn btn-primary btn-xs pull-right"><span class="glyphicon glyphicon-minus"></span></button>

ボタングループ化している場合

<div class="btn-group pull-right">