Bootstrapの使い方（５）〜ボタンの作成

HTML&CSS
2015.04.19

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

スポンサーリンク

buttonタグでボタンの作成

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

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

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

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

HTMLコード例

<div class="container">
  <h1>ボタンの作成</h1>
  <div class="row">
   <div class="col-xs-12">
    <h2>classなし</h2>
    	<button>default</button>
        <button>primary</button>
        <button>success</button>
        <button>info</button>
        <button>warning</button>
        <button>danger</button>
    </div>
    <div class="col-xs-12">
    <h2>色指定のclassのみ</h2>
    	<button class="btn-default">default</button>
        <button class="btn-primary">primary</button>
        <button class="btn-success">success</button>
        <button class="btn-info">info</button>
        <button class="btn-warning">warning</button>
        <button class="btn-danger">danger</button>
    </div>
    <div class="col-xs-12">
    <h2>btnと色指定のclass</h2>
    	<button class="btn btn-default">default</button>
        <button class="btn btn-primary">primary</button>
        <button class="btn btn-success">success</button>
        <button class="btn btn-info">info</button>
        <button class="btn btn-warning">warning</button>
        <button class="btn btn-danger">danger</button>
    </div>
  </div>
</div>

リンクボタンの作成

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

HTMLコード例

<a class="btn btn-default">default</a>
<a class="btn btn-primary">primary</a>
<a class="btn btn-success">success</a>
<a class="btn btn-info">info</a>
<a class="btn btn-warning">warning</a>
<a class="btn btn-danger">danger</a>
<a class="btn btn-link">link</a><!--btn-linkサンプル-->

補足　リンクボタンに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コード

<div class="col-xs-12">
  <button class="btn btn-primary btn-lg">大きいサイズ</button>
  <button class="btn btn-primary">普通サイズ</button>
  <button class="btn btn-primary btn-sm">小さいサイズ</button>
  <button class="btn btn-primary btn-xs">極小サイズ</button>
</div>
  <div class="col-xs-12">
  <button class="btn btn-primary btn-block">ブロックサイズ</button>
</div>

activeの状態

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

<div class="col-xs-12">
  <button class="btn btn-primary">普通サイズ</button>
  <button class="btn btn-primary active">active状態</button>
  <button class="btn btn-primary disabled">使用不可</button>
</div>

ボタンのグループ化

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

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コード

  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group btn-group-lg">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        <div class="btn-group">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        <div class="btn-group btn-group-sm">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        <div class="btn-group btn-group-xs">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
    </div>
</div>
 <div class="row">
    <div class="col-xs-12">
      <div class="btn-group-vertical">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
    </div>
  </div>

btn-group-justified

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

btn6

btn-group-justifiedサンプル

   <div class="btn-group btn-group-justified">
    	<a class="btn btn-default">default</a>
        <a class="btn btn-primary">primary</a>
        <a class="btn btn-success">success</a>
        <a class="btn btn-info">info</a>
        <a class="btn btn-warning">warning</a>
        <a class="btn btn-danger">danger</a>
    </div>

ボタンツールバー

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

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

    <div class="col-xs-12">
    <div class="btn-toolbar">
      <div class="btn-group">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        <div class="btn-group">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        <div class="btn-group">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        <div class="btn-group">
        <button class="btn btn-primary">ボタンA</button>
        <button class="btn btn-primary">ボタンB</button>
        <button class="btn btn-primary">ボタンC</button>
        </div>
        </div>
    </div>

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

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

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

btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}

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

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3071a9;
  border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary .badge {
  color: #428bca;
  background-color: #fff;
}
.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}
.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}
.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}
.btn-link {
  font-weight: normal;
  color: #428bca;
  border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: #2a6496;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #777;
  text-decoration: none;
}

BootstrapのSassのコードを確認すると次のような設定があります。マウスホバー時の設定はdarken($background, 10%)となっており、通常の背景色より10％暗く明度を落としています。
[sass]
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
//一部省略
&:hover {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
//以下省略
}
[/sass]

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

.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-block {
  display: block;
  width: 100%;
}
スポンサーリンク
タイトルとURLをコピーしました