Bootstrap3
日本語リファレンス

広告

ボタン  Buttons


a要素、button要素、input要素に使うボタン用のクラス。


a要素、button要素、input要素のclass属性に、btn btn-defaultを指定する。

サンプル
a要素
ソースコード
<a class="btn btn-default" href="#" role="button">a要素</a>
<button class="btn btn-default">button要素</button>
<input class="btn btn-default" type="button" value="input要素">
<input class="btn btn-default" type="submit" value="送信ボタン">

コンテキストに応じて使用できるカラー・バリエーションとスタイルが用意されている。

サンプル
ソースコード
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-link">link</button>

4つのサイズが用意されている。

サンプル

ソースコード
<p>
	<button type="button" class="btn btn-default btn-lg">大</button>
	<button type="button" class="btn btn-primary btn-lg">大</button>
</p>
<p>
	<button type="button" class="btn btn-default">中</button>
	<button type="button" class="btn btn-primary">中</button>
</p>
<p>
	<button type="button" class="btn btn-default btn-sm">小</button>
	<button type="button" class="btn btn-primary btn-sm">小</button>
</p>
<p>
	<button type="button" class="btn btn-default btn-xs">極小</button>
	<button type="button" class="btn btn-primary btn-xs">極小</button>
</p>

class属性にbtn-blockを追加するとブロック・レベルのボタンになる。

サンプル
a要素でブロック・レベル・ボタン default 中 a要素でブロック・レベル・ボタン default 大
ソースコード
<a href="#" class="btn btn-default btn-block">a要素でブロック・レベル・ボタン default 中</a>
<a href="#" class="btn btn-default btn-lg btn-block">a要素でブロック・レベル・ボタン default 大</a>
<button type="button" class="btn btn-default btn-block">button要素でブロック・レベル・ボタン default 中</button>
<button type="button" class="btn btn-primary btn-block">button要素でブロック・レベル・ボタン primary 中</button>
<button type="button" class="btn btn-default btn-lg btn-block">button要素でブロック・レベル・ボタン default 大</button>
<button type="button" class="btn btn-primary btn-lg btn-block">button要素でブロック・レベル・ボタン primary 大</button>

class属性にactiveを追加すると、ボタンを押した状態を表すアクティブ・ボタンになる。

サンプル

ソースコード
<p>
	<button type="button" class="btn btn-default active">default 中</button>
	<button type="button" class="btn btn-primary active">primary 中</button>
	<button type="button" class="btn btn-success active">success 中</button>
	<button type="button" class="btn btn-info active">info 中</button>
	<button type="button" class="btn btn-warning active">warning 中</button>
	<button type="button" class="btn btn-danger active">danger 中</button>
	<button type="button" class="btn btn-link active">link 中</button>
</p>
<p>
	<button type="button" class="btn btn-default btn-lg active">default 大</button>
	<button type="button" class="btn btn-primary btn-lg active">primary 大</button>
</p>
<p>
	<button type="button" class="btn btn-default btn-block active">button要素でブロック・レベル・ボタン default 中</button>
	<button type="button" class="btn btn-default btn-lg btn-block active">button要素でブロック・レベル・ボタン default 大</button>
	<button type="button" class="btn btn-primary btn-block active">button要素でブロック・レベル・ボタン primary 中</button>
	<button type="button" class="btn btn-primary btn-lg btn-block active">button要素でブロック・レベル・ボタン primary 大</button>
</p>

class属性にactiveを追加すると、ボタンを押した状態を表すアクティブ・ボタンになる。

ソースコード
<p>
	<a href="#" class="btn btn-default active">default 中</a>
	<a href="#" class="btn btn-primary active">primary 中</a>
	<a href="#" class="btn btn-success active">success 中</a>
	<a href="#" class="btn btn-info active">info 中</a>
	<a href="#" class="btn btn-warning active">warning 中</a>
	<a href="#" class="btn btn-danger active">danger 中</a>
	<a href="#" class="btn btn-link active">link 中</a>
</p>
<p>
	<a href="#" class="btn btn-default btn-lg active">default 大</a>
	<a href="#" class="btn btn-primary btn-lg active">primary 大</a>
</p>
<p>
	<a href="#" class="btn btn-default btn-block active">a要素でブロック・レベル・ボタン default 中</a>
	<a href="#" class="btn btn-default btn-lg btn-block active">a要素でブロック・レベル・ボタン default 大</a>
	<a href="#" class="btn btn-primary btn-block active">a要素でブロック・レベル・ボタン primary 中</a>
	<a href="#" class="btn btn-primary btn-lg btn-block active">a要素でブロック・レベル・ボタン primary 大</a>
</p>

disabled属性を追加し、無効化したbutton要素ボタンのスタイル。

サンプル

ソースコード
<p>
	<button type="button" class="btn btn-default" disabled="disabled">default 中</button>
	<button type="button" class="btn btn-primary" disabled="disabled">primary 中</button>
	<button type="button" class="btn btn-success" disabled="disabled">success 中</button>
	<button type="button" class="btn btn-info" disabled="disabled">info 中</button>
	<button type="button" class="btn btn-warning" disabled="disabled">warning 中</button>
	<button type="button" class="btn btn-danger" disabled="disabled">danger 中</button>
	<button type="button" class="btn btn-link" disabled="disabled">link 中</button>
</p>
<p>
	<button type="button" class="btn btn-default btn-lg" disabled="disabled">default 大</button>
	<button type="button" class="btn btn-primary btn-lg" disabled="disabled">primary 大</button>
</p>
<p>
	<button type="button" class="btn btn-default btn-block" disabled="disabled">button要素でブロック・レベル・ボタン default 中</button>
	<button type="button" class="btn btn-default btn-lg btn-block" disabled="disabled">button要素でブロック・レベル・ボタン default 大</button>
	<button type="button" class="btn btn-primary btn-block" disabled="disabled">button要素でブロック・レベル・ボタン primary 中</button>
	<button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled">button要素でブロック・レベル・ボタン primary 大</button>
</p>

disabled属性を追加し、無効化したa要素ボタンのスタイル。

ソースコード
<p>
	<a href="#" class="btn btn-default" disabled="disabled">default 中</a>
	<a href="#" class="btn btn-primary" disabled="disabled">primary 中</a>
	<a href="#" class="btn btn-success" disabled="disabled">success 中</a>
	<a href="#" class="btn btn-info" disabled="disabled">info 中</a>
	<a href="#" class="btn btn-warning" disabled="disabled">warning 中</a>
	<a href="#" class="btn btn-danger" disabled="disabled">danger 中</a>
	<a href="#" class="btn btn-link" disabled="disabled">link 中</a>
</p>
<p>
	<a href="#" class="btn btn-default btn-lg" disabled="disabled">default 大</a>
	<a href="#" class="btn btn-primary btn-lg" disabled="disabled">primary 大</a>
</p>
<p>
	<a href="#" class="btn btn-default btn-block" disabled="disabled">a要素でブロック・レベル・ボタン default 中</a>
	<a href="#" class="btn btn-default btn-lg btn-block" disabled="disabled">a要素でブロック・レベル・ボタン default 大</a>
	<a href="#" class="btn btn-primary btn-block" disabled="disabled">a要素でブロック・レベル・ボタン primary 中</a>
	<a href="#" class="btn btn-primary btn-lg btn-block" disabled="disabled">a要素でブロック・レベル・ボタン primary 大</a>
</p>

広告