【Bootstrapのコンポーネント】ボタン(Buttons)に関して

Bootstrapのボタンコンポーネントについて解説していきます。

Bootstrapのボタンコンポーネントは、単なる標準的なボタンを作ることも可能ですが、ボーダーの外枠だけのボタンや、大きめのボタン、ブロック要素の横幅いっぱいのボタンを作ることもできます。

ここでは、Bootstrapで作成可能なボタンについて見ていきます。

Bootstrapで作成可能なボタンの種類

作成可能なボタンの種類は次の通りです。

ボタンのカラーバリエーション btn-primary etc…
アウトラインのみのボタン(外枠のみのボタン) btn-outilne
ボタンのサイズ違い(普通・小・大) btn btn-sm btn-lg
ブロックタイプ要素ボタン btn-block
非活性ボタン disabled
【その他】リンクボタン、送信ボタン、入力リセットボタンなど input=”submit” input=”reset” etc…

 

では、それぞれについて見ていきましょう。

ボタンの作成方法

ボタンのカラーバリエーション

ボタンには色違いのボタンがあります。
基本要素の色【Colors】についてでもお伝えしている、同じクラス名で色を変えることができます。

ボタンのカラーバリエーション

  1.     <button type=”button” class=”btn btn-primary“>Primary</button>
  2.     <button type=”button” class=”btn btn-secondary”>Secondary</button>
  3.     <button type=”button” class=”btn btn-success”>Success</button>
  4.     <button type=”button” class=”btn btn-danger”>Danger</button>
  5.     <button type=”button” class=”btn btn-warning”>Warning</button>
  6.     <button type=”button” class=”btn btn-info”>info</button>
  7.     <button type=”button” class=”btn btn-light”>light</button>
  8.     <button type=”button” class=”btn btn-dark”>Dark</button>

 

色違いのボタン

画像では分かりませんが、マウスホバーすると色が変わります。

アウトラインのみのボタン(外枠のみのボタン)

文字と外枠のみ配色されている、アウトラインのみのボタンを作ることができます。

アウトラインのみのボタン(外枠のみのボタン)

  1.     <button type=”button” class=”btn btn-outline-primary“>Primary</button>
  2.     <button type=”button” class=”btn btn-outline-secondary”>Secondary</button>
  3.     <button type=”button” class=”btn btn-outline-success”>Success</button>
  4.     <button type=”button” class=”btn btn-outline-danger”>Danger</button>
  5.     <button type=”button” class=”btn btn-outline-warning”>Warning</button>
  6.     <button type=”button” class=”btn btn-outline-info”>info</button>
  7.     <button type=”button” class=”btn btn-outline-light”>light</button>
  8.     <button type=”button” class=”btn btn-outline-dark”>Dark</button>

 

アウトラインのボタン

こちらもホバーさせると、色がつきます。アウトラインのボタンではなく、背景色のついたボタンに変わります。

ボタンのサイズ違い(普通・小・大)

サイズ違いボタン

  1.     <button type=”button” class=”btn btn-primary”>Primary</button>
  2.     <button type=”button” class=”btn btn-secondary btn-lg“>Secondary</button>
  3.     <button type=”button” class=”btn btn-success btn-sm“>Success</button>
  4.     <button type=”button” class=”btn btn-danger”>Danger</button>
  5.     <button type=”button” class=”btn btn-warning”>Warning</button>
  6.     <button type=”button” class=”btn btn-info”>info</button>
  7.     <button type=”button” class=”btn btn-light”>light</button>
  8.     <button type=”button” class=”btn btn-dark”>Dark</button>

 

サイズの違うボタン

左から、普通サイズのボタン、大きめのボタン、小さめのボタン、普通サイズ・・・・と続きます。

ブロックタイプ要素ボタン

ブロックタイプ要素ボタン

  1.     <button type=”button” class=”btn btn-primary btn-block“>Primary</button>
  2.     <button type=”button” class=”btn btn-secondary btn-block”>Secondary</button>
  3.     <button type=”button” class=”btn btn-success btn-block”>Success</button>
  4.     <button type=”button” class=”btn btn-danger”>Danger</button>
  5.     <button type=”button” class=”btn btn-warning”>Warning</button>
  6.     <button type=”button” class=”btn btn-info”>info</button>
  7.     <button type=”button” class=”btn btn-light”>light</button>
  8.     <button type=”button” class=”btn btn-dark”>Dark</button>

 

ブロックタイプ要素のボタン

containerなど、横幅指定があるブロックで囲まれていないため、画面幅いっぱいのボタンになってしまいましたが、ブロックタイプ要素のボタンができていることが分かります。

通常はこういった、画面幅いっぱいのボタンはないと思うので、cotantierでくるむなどしたあげると、親切かと思います。

非活性ボタン

非活性ボタンは、「このボタンは押せませんよ」というボタンです。

非活性ボタン

  1.     <button type=”button” class=”btn btn-primary disabled“>Primary</button>
  2.     <button type=”button” class=”btn btn-secondary disabled”>Secondary</button>
  3.     <button type=”button” class=”btn btn-success disabled”>Success</button>
  4.     <button type=”button” class=”btn btn-danger”>Danger</button>
  5.     <button type=”button” class=”btn btn-warning”>Warning</button>
  6.     <button type=”button” class=”btn btn-info”>info</button>
  7.     <button type=”button” class=”btn btn-light”>light</button>
  8.     <button type=”button” class=”btn btn-dark”>Dark</button>

 

非活性のボタン

【比較】通常のボタン(上段) 非活性のボタン(下段)

左から3つ目までは、色が薄くなっていることが分かります。
分かりにくい場合は、【比較】の画像を見てもらうと違いが分かるでしょう。

これが非活性ボタンです。

【その他】リンクボタン、送信ボタン、入力リセットボタンなど

その他buttonタグだけではなく、aタグやinputタグなどでもボタンを表示することが可能です。

その他のボタン

  1.     <a href=”#” class=”btn btn-primary”>Link</a>
  2.     <input type=”button” class=”btn btn-primary” value=”Input”>
  3.     <input type=”submit” class=”btn btn-primary” value=”Submit”>
  4.     <input type=”reset” class=”btn btn-primary” value=”Reset”>

 

その他のボタン

aタグのアンカーリンクや、inputタイプのボタン、送信ボタン、入力文字をリセットするリセットボタンなどがあります。

まとめ

Bootstrapのボタンコンポーネントについて解説しました。

ここまでやってきたことをおさらいします。
ボタンの種類は以下でした。

ボタンのカラーバリエーション btn-primary etc…
アウトラインのみのボタン(外枠のみのボタン) btn-outilne
ボタンのサイズ違い(普通・小・大) btn btn-sm btn-lg
ブロックタイプ要素ボタン btn-block
非活性ボタン disabled
【その他】リンクボタン、送信ボタン、入力リセットボタンなど input=”submit” input=”reset” etc…

 

ボタン要素はよく使う要素だと思うので、種類を把握して、使い分けましょう。