Bootstrapのボタン

トップページ > Bootstrap > Bootstrapのボタン

初版2014/06/16：最終更新日2014/06/16

Bootstrapのボタン

目次
・Bootstrapのボタン・aタグを使用したボタン・Bootstrapのボタンサイズを指定する・Bootstrapのボタングループ

Bootstrapのボタン

Bootstrapではbuttonタグにclass属性btnとbtn-default,btn-danger,btn-info,btn-warning,btn-successsを指定できます。

<div class="container">
  <button class="btn">デフォルトボタン</button>
  <button class="btn btn-default">デフォルトボタン</button>
  <button class="btn btn-danger">危険ボタン</button>
  <button class="btn btn-info">情報ボタン</button>
  <button class="btn btn-warning">警告ボタン</button>
  <button class="btn btn-success">成功ボタン</button>
</div>

ボタンを使用したDEMOです。

aタグを使用したボタン

buttonタグを使用せずにaタグを使用しても同様のボタンを作成することができます。
class属性にbtnだけを指定した場合のみ、buttonタグと表示が異なるようです。

<div class="container">
  <a href="#" class="btn">デフォルトボタン</a>
  <a href="#" class="btn btn-default">デフォルトボタン</a>
  <a href="#" class="btn btn-danger">危険ボタン</a>
  <a href="#" class="btn btn-info">情報ボタン</a>
  <a href="#" class="btn btn-warning">警告ボタン</a>
  <a href="#" class="btn btn-success">成功ボタン</a>
</div>

aタグを使用したDEMOです。

Bootstrapのボタンサイズを指定する

Bootstrapのボタングループ

ボタングループとは、その名の通りボタンを横3つ並べたり、縦3つ並べたりするボタンのグループを言います。
ボタンの端は角丸になりますが、真ん中のボタンの角は角丸にはならないようにデザインされます。
ボタンを横に並べるにはdivタグにbtn-groupというclassを追加し、そのdivタグで複数ボタンを囲みます。
また、ボタンを縦に並べるにはdivタグにbtn-group-verticalというclassを追加し、そのdivタグで複数ボタンを囲みます。

<div class="container">
  <div class="btn-group">
    <a href="#" class="btn">デフォルトボタン</a>
    <a href="#" class="btn btn-default">デフォルトボタン</a>
    <a href="#" class="btn btn-danger">危険ボタン</a>
  </div>
  <div class="btn-group-vertical">
    <a href="#" class="btn btn-info">情報ボタン</a>
    <a href="#" class="btn btn-warning">警告ボタン</a>
    <a href="#" class="btn btn-success">成功ボタン</a>
  </div>
</div>

ボタンを横に3つと縦に3つ並べたDEMOです。

ボタングループを横に並べるには、btn-toolbarをクラスに追加します。

<div class="container">
  <div class="btn-toolbar">
    <div class="btn-group">
      <a href="#" class="btn">デフォルトボタン</a>
      <a href="#" class="btn btn-default">デフォルトボタン</a>
      <a href="#" class="btn btn-danger">危険ボタン</a>
    </div>
    <div class="btn-group">
      <a href="#" class="btn btn-info">情報ボタン</a>
      <a href="#" class="btn btn-warning">警告ボタン</a>
      <a href="#" class="btn btn-success">成功ボタン</a>
    </div>
  </div>
</div>

ボタングループ複数を横に並べたDEMOです。

HOME