1. Home
2. CSS
3. ボタン

ボタン

用意されたクラスを指定することでボタンの見た目を変更できます。
押せないボタンや押されたボタンなどの状態を指定するクラスもありますがこちらでは割愛しています。

• 基本のボタン
• ボタンの色指定
• ボタンのサイズ

基本のボタン

<a>、<button>、<input>に.btnクラスと.btn-defaultクラスなどの色指定を一緒に指定することで使用できます。

Link Button

				<a class="btn btn-default" href="#" role="button">Link</a>
				<button class=" btn-default" type="submit">Button</button>
				<input class="btn btn-default" type="button" value="Input">
				<input class="btn btn-default" type="submit" value="Submit">

ボタンの色指定

.btnクラスと7種の用意されたクラスを指定することでボタンの色を変更できます。
.btn-linkは上下左右に余白が入っている透明ボタンです。

Default Primary Success Info Warning Danger Link

				<button type="button" class="btn btn-default">Default</button>
				<button type="button" class="btn btn-primary">Primary</button>
				<button type="button" class="btn btn-success">Success</button>
				<button type="button" class="btn btn-info">Info</button>
				<button type="button" class="btn btn-warning">Warning</button>
				<button type="button" class="btn btn-danger">Danger</button>
				<button type="button" class="btn btn-link">Link</button>

ボタンのサイズ

ボタンのサイズは4種類用意されています。また横幅全体のブロックレベルボタンをも作成できます。
.btnクラスと.btn-defaultなどの色指定のクラスに加えてサイズのクラスを指定することで使用できます。.btn-lgで大きなボタンに、.btn-smで少し小さなボタンに、.btn-xsでさらに小さなボタンになります。指定がないと通常サイズになります。
さらに.btn-blockを指定することでブロックレベルのボタンになります。

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Block level button Block level button

				<p>
					<button type="button" class="btn btn-primary btn-lg">Large button</button>
					<button type="button" class="btn btn-default btn-lg">Large button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary">Default button</button>
					<button type="button" class="btn btn-default">Default button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-sm">Small button</button>
					<button type="button" class="btn btn-default btn-sm">Small button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
					<button type="button" class="btn btn-default btn-xs">Extra small button</button>
				</p>
				<p>
					<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
					<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
				</p>