Bootstrap3 ボタンとButtonGroupの簡単な使い方

Pocket

Bootstrap3で使えるボタンとButtonGroupの簡単な使いかを解説します。

Webサイトで必ずと言っていいほど使われるボタン。サイトに合わせてスタイルを変更する必要がありますが、基本的な動作はどのサイトでも同じですよね。Bootstrap3で用意されているボタンコンポーネントを使えば、Bootstrap3のCSSコードを上書きするだけでサイトに合わせたおしゃれなボタンを作ることができます。

ここではBootstrap3のボタンコンポーネントの基本的な部分の使い方について紹介します。

このページで書いているコードのデモページはこちら

Bootstrap3のButtonの使い方

Buttonとサイズ

Bootstrap3でボタンを使う際は<a><button><input>の3つの要素に対して.btnclassを付け加えます。

サイズ変更は.btn-lg.btn-sm.btn-xsから選ぶことができます。

Class名 概要
.btn ボタンの基本class
.btn.btn-lg 大きいサイズのボタン
.btn.btn-sm 小さいサイズのボタン
.btn.btn-xs さらに小さいサイズのボタン
<!-- ボタンとサイズ -->
<button type="button" class="btn btn-default btn-lg">LGボタン</button>
<button type="button" class="btn btn-default">通常サイズのボタン</button>
<button type="button" class="btn btn-default btn-sm">SMサイズのボタン</button>
<button type="button" class="btn btn-default btn-xs">XSサイズのボタン</button>

Bootstrap3で選べるButtonのカラー

ボタンのカラーもclassの追加で変更可能。class名はdangerとかになってますが、危険なとき以外も赤色使えるのでご安心ください。

Class名 概要
.btn btn-default デフォルトのボタン
.btn btn-primary 青色のボタン
.btn btn-success 緑色のボタン
.btn btn-info 水色のボタン
.btn btn-warning 黄色のボタン
.btn btn-danger 赤い色のボタン
.btn btn-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>

Buttonの状態

ボタンの状態として、アクティブ、無効の2つが用意されてます。無効の場合のみclassではなく、属性として追加するので注意してください。

Class名 概要
.btn.active 有効な状態、classにactiveを追加
disabled="disabled" 選択できない状態、classではなく属性として追加
<!-- アクティブ -->
<a href="#" class="btn btn-default active" role="button">Button</a>
<!-- 無効 -->
<button type="button" class="btn btn-default" disabled="disabled">Button</button>

Buttonグループの使い方

Buttonグループとサイズ

バラバラのボタンではなく、グループとして見せたい場合にボタングループを使用します。使い方は複数のボタンを.btn-groupをつけたdivタグで囲むだけ。

ボタングループも通常のボタンと同様3つのサイズが用意されています。

Class名 概要
.btn-group > .btn 通常のボタングループ
.btn-group.btn-group-lg > .btn 大きいサイズのボタングループ
.btn-group.btn-group-sm > .btn 小さいサイズのボタングループ
.btn-group.btn-group-xs > .btn さらに小さいサイズのボタングループ
<!-- Buttonグループ -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">左</button>
  <button type="button" class="btn btn-default">中央</button>
  <button type="button" class="btn btn-default">右</button>
</div>
<!-- Buttonグループのサイズ変更 -->
<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-default">左</button>
  <button type="button" class="btn btn-default">中央</button>
  <button type="button" class="btn btn-default">右</button>
</div>

Buttonグループの形

ボタングループは横並びのレイアウトだけでなく、ツールバー(メニューボタン?)として使えたり、縦に並んだレイアウト、横幅いっぱいに広がったレイアウトなどに変更することが可能です。

Class名 概要
.btn-toolbar > .btn-group > .btn ツールバータイプのレイアウトに変更
.btn-group-vertical > .btn 縦並びのレイアウトに変更
.btn-group.btn-group-justified > .btn 横幅いっぱいのレイアウトに変更
<!-- ツールバー -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">4</button>
    <button type="button" class="btn btn-default">5</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">6</button>
  </div>
</div>

<!-- タテ型 -->
<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-default">Button1</button>
  <button type="button" class="btn btn-default">Button2</button>
  <button type="button" class="btn btn-default">Button3</button>
</div>

<!-- 横いっぱい -->
<div class="btn-group btn-group-justified" role="group">
  <a href="#" class="btn btn-default">左</a>
  <a href="#" class="btn btn-default">中央</a>
  <a href="#" class="btn btn-default">右</a>
</div>

デモページはこちら