ボタン ≪ CSS ≪ Bootstrap3日本語リファレンス

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

基本バリエーションサイズ変更ブロック・レベル・ボタンアクティブ・ボタン - button要素アクティブ・ボタン - a要素無効化ボタン - button要素無効化ボタン - a要素

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>

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

サンプル

ソースコード

<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を追加すると、ボタンを押した状態を表すアクティブ・ボタンになる。

サンプル

default　中 primary　中 success　中 info　中 warning　中 danger　中 link　中

default　大 primary　大

a要素でブロック・レベル・ボタン　default　中 a要素でブロック・レベル・ボタン　default　大 a要素でブロック・レベル・ボタン　primary　中 a要素でブロック・レベル・ボタン　primary　大

ソースコード

<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要素ボタンのスタイル。

サンプル

default　中 primary　中 success　中 info　中 warning　中 danger　中 link　中

default　大 primary　大

ソースコード

<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>

Bootstrap3
日本語リファレンス

ボタン　　Buttons

基本

バリエーション

サイズ変更

ブロック・レベル・ボタン

アクティブ・ボタン - button要素

アクティブ・ボタン - a要素

無効化ボタン - button要素

無効化ボタン - a要素

ボタン Buttons

基本

バリエーション

サイズ変更

ブロック・レベル・ボタン

アクティブ・ボタン - button要素

アクティブ・ボタン - a要素

無効化ボタン - button要素

無効化ボタン - a要素

ボタン　　Buttons