Bootstrapのボタンの色やサイズ、タイプの種類を紹介！
Bootstrapで作成できるボタンの色やサイズをサンプルコードやプレビューを交えて紹介します。また、Bootsrapに用意されている、ボタンの背景色を変えることで選択中や選択不可な状態を表す方法や、トグルボタンの作り方も解説しています。
コンテンツ [表示]
Bootstrapのボタンの基本的な使い方
Bootstrapには整った見た目のボタンを作成できるクラスが用意されています。また、ボタンの色や大きさなどを簡単に指定することもできます。
今回は、Bootstrapで作成できるボタンとその見た目をまとめてご紹介します。JavaScriptを用いたトグルボタンの作成方法についても解説します。
ボタンの基本的な作成方法
index.html
<button type="button" class="btn btn-primary">ボタン</button>まず、Bootstrapでは上記のように、button要素に.btnと.btn-primaryなどを適用することでボタンを作成することができます。（a要素やinput要素でも作成できますが、ブラウザによっては見た目が異なる場合があります。）
上記の例では.btn-primaryを適用しており、ボタンの色が青色になっていますが、次節で紹介する他のクラスを適用することで違う色にすることができます。
こちらのコードを実際に表示させると、以下のような見た目になります。
Bootstrapのボタンの色の種類
続いては、ボタンの色を指定するクラスをまとめて紹介します。
【btn-*】背景色を指定
以下のように、button要素に対して.btn-primary、.btn-secondary、.btn-success、.btn-danger、.btn-warning、.btn-info、.btn-light、.btn-darkを適用することで、対応する色のボタンを作成することができます。
index.html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>これらのボタンの実際の見た目は以下のようになっています。
【btn-outline-*】背景を透過して枠線の色と文字色を指定
また、button要素に対して.btn-outline-primary、.btn-outline-secondary、.btn-outline-success、.btn-outline-danger、.btn-outline-warning、.btn-outline-info、.btn-outline-light、.btn-outline-darkを適用することで、枠線と文字色が対応する色であり、背景色が透過されたボタンを作成できます。
index.html
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>これらのボタンの実際の見た目は以下のようになっています。
【btn-link】リンクのような見た目にする
button要素に対して.btn-linkを適用することで、ボタンでありながらリンクのような見た目にすることもできます。
index.html
<button type="button" class="btn btn-link">Link</button>こちらのボタンの実際の見た目は以下のようになっています。
【activeとdisabled】ボタンの状態の見た目のみを指定
.activeを適用するとボタンが選択されているような見た目になり、.disabledを適用するとボタンが選択不可のような見た目になります。（実際の機能は伴いません。）
index.html
<button type="button" class="btn btn-primary">通常</button>
<button type="button" class="btn btn-primary active">active</button>
<button type="button" class="btn btn-primary disabled">disabled</button>これらのボタンの見た目は以下のようになっています。
disabled属性で選択不可にする方法
button要素に対してdisabled属性を追加することでも、ボタンを選択不可な見た目にすることができます。
ただし、a要素でボタンを作成した場合はdisabled属性が使えないため、先述の.disabledを使用してください。
Bootstrapのボタンのサイズの種類
Bootstrapにはボタンの大きさを指定するクラスも用意されています。
【btn-lgとbtn-sm】ボタンサイズを指定
.btn-lgと.btn-smを適用することで、通常よりも大きいサイズや小さいサイズのボタンを作成できます。
index.html
<button type="button" class="btn btn-primary btn-lg">btn-lg適用</button>
<button type="button" class="btn btn-primary">通常ボタン</button>
<button type="button" class="btn btn-primary btn-sm">btn-sm適用</button>これらのボタンは実際の見た目は以下のようになっています。
【btn-block】画面幅いっぱいに広がるボタン
また、.btn-blockを適用することでボタンの横幅が親要素いっぱいに広がります。
Bootstrapのトグルボタン
Bootstrapの機能を用いて、選択・未選択状態を保持するトグルボタンを作成することもできます。
なお、トグルボタンの作成にはJavaScriptの仕組みを使用するため、機能させるためにはBootstrapのJavaScriptプラグインを読み込む必要があります。
トグルボタンの作成方法
button要素にdata-toggle="button"を追加することで、トグルボタンを作成することができます。
実際に以下のプレビューでボタンをクリックすると、選択状態（ボタンの色が暗くなる）が保持されます。
（ブラウザによっては、クリック時に水色の枠が出現しますが、これはフォーカス状態を表しており、今回のトグル機能とは関係ありません。）
なお以下の例では、aria-pressed="false"を追加することでボタンが初期状態では非選択であることを明示しており、autocomplete="off"を追加することでブラウザの自動補完を禁止しています。
