解 説

Bootstrapを使うと手軽に見栄えのよいデザインでしかも使い勝手のよいボタンやナビゲーションを作成することができます。

buttonタグでボタンの作成

Bootstrapを使ってボタンを作成するには、buttonタグにクラス名 btnと、ボタンの色を指定するbtn-○○ を指定します。
btn2

ボタンの色指定クラス
クラス名 ボタンの色
btn-default
btn-primary 青系
btn-success 緑系
btn-info ライトブルー
btn-warning 黄系
btn-danger 赤系

btnクラスとボタンの色を指定するbtn-○○ をあわせて使用します。

buttonタグを使ったボタンのサンプル

HTMLコード例

リンクボタンの作成

リンク用のボタンを作成する場合はaタグにbtnクラスとボタンの色を指定するbtn-○○ をあわせて使用します。
リンクボタンのサンプル

HTMLコード例

補足 リンクボタンにbuttonタグは使用できません。 buttonタグの子要素としてa要素を使用することはできません。また、aタグでbutton要素を囲むこともできません。これはよく間違って使用されていますが、文法的には間違いです。buttonタグはjQueryなどのスクリプトのクリックイベント用に使用します。
a要素はHTML5からp要素やdiv要素を囲めるようになりましたが、buttonなどのインタラクティブ・コンテンツを内包することはできません。

蛇足になりますが、a要素はトランスペアレントとして規定されています。そのため、親要素次第で挙動が変わりますので注意しておく必要があります。例えばaタグでdivタグを囲めますが、pタグの中でaタグでdivタグを囲むことはできません。考えてみれば当然なのですが。。

btn-linkクラス

btn3
あまり使用する機会はないかもしれませんが、buttonタグにbtn-linkクラスを指定すると、aタグを使用したかのようにボタンの形からリンク文字に変わります。これはbuttonタグをaタグで囲んでリンクするためのものではありません。あくまでaタグ風にテキスト表示をしてスクリプトなどを実行するためのものです。どのような表示になるか、buttonタグを使ったボタンのサンプルの「link」部分の表示を確認してみてください。

ボタンのサイズの指定

ボタンのサイズ指定のクラスで大、小と極小そしてブロック状態を指定することができます。中サイズはサイズ指定しない状態のボタンです。
btn1

ボタンのサイズ指定サンプル

ボタンのサイズ指定クラス
クラス名 ボタンのサイズ
btn-lg より大きい
btn-sm より小さい
btn-xs 極小
btn-block ブロック状態

HTMLコード

activeの状態

Bootstrapではactiveというクラス名を付けるとボタンを押した状態になります。
また、disabledというクラスを付けると使用不可の状態になります。
btn4
ボタンの状態サンプル

ボタンのグループ化

ボタンをグループ化することができます。グループ化すると少しボタンのデザインが変わります。

btn5

グループ化したいボタンをdivで囲んでクラス btn-groupをつけます。
縦並びにしたい場合はbtn-group-verticalクラスをつけます。

グループのサイズを指定する場合は、btn-groupクラスとbtn-group-lgなどのサイズ指定クラスをあわせて指定します。

btn-group-lg グループを大サイズにする
btn-group-sm グループを小サイズにする
btn-group-xs グループを極小サイズにする
btn-group-vertical 縦並びのグループにする

ボタンのグループ化サンプル

HTMLコード

btn-group-justified

a要素で作成したボタンに限ってbtn-group-justifiedクラスを使用すると均等な配分になったボタンのグループが作成されます。

btn6

btn-group-justifiedサンプル

ボタンツールバー

ボタングループを更にグループ化するボタンツールバーという機能もあります。
ボタングループを更にdivで囲み、btn-toolbarクラスを付加します。

ボタンツールバーサンプル

ボタン作成クラスのbootstrap.cssの内容

ボタン作成のために用意しているbootstrap.cssの内容を知っておくことはBootstrap以外のページでcss設定をする上でも有益です。

btnクラスの記述ではdisplay: inline-blockが使われています。
line-height: 1.42857143はfont-size: 14pxとしていますので、行間を20pxにするため20px ÷ 14px = 1.428571429という倍数を設定しているようです。
こうすることで高さが36pxのボタンに14pxのテキストを垂直中央揃えで表示できます。この辺の数字は一般のページにボタンを作成するときの指針にもなります。

次はボタンの色を決めるそれぞれのボタンのクラスの設定です。
長くなりますが、色使いの変化、たとえば通常時の色とホバーした時の色の変化をどの程度つけているのかなど参考になります。

BootstrapのSassのコードを確認すると次のような設定があります。マウスホバー時の設定はdarken($background, 10%)となっており、通常の背景色より10%暗く明度を落としています。

サイズを決めるクラスは次のとおりです。
.btn-blockでdisplay: blockと指定されています。