ボタンの書式：Bootstrapコードまとめ

投稿：2016年03月14日｜更新：2016年03月16日

Bootstrapのコードを少しずつまとめていきます。
今回はボタンの書式です。

ボタンの書式と色の指定

button要素にclass「btn」と色を指定するclassを適用します。
色指定のclassは以下のとおりです。

class	色
btn-default	白
btn-primary	青系
btn-success	緑系
btn-info	薄い青系
btn-warning	黄系
btn-danger	薄い赤系

これらのclassを適用すると、マウスホバー時にポインタの形状が変化するようになります。

<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>

ブラウザでの表示

ボタンにリンクを貼る場合

a要素に上記のclsassを適用します。

HTML

<h1 class="page-header">a要素で作成</h1>
<a href="http://www.home-movie.biz/" class="btn btn-primary">ビデオ撮影・編集</a>
<a href="https://www.hts-web.biz/" class="btn btn-success">WEBサイト制作</a>
<a href="http://www.hts-video.biz/" class="btn btn-info">ビデオダビング</a>

ブラウザでの表示

ボタンのサイズを変える

下記のclassを追加します。

class	サイズ
btn-lg	大サイズ
btn-sm	小サイズ
btn-xs	極小サイズ

HTML

<button class="btn btn-danger btn-lg">大サイズ</button>
<button class="btn btn-danger">通常サイズ</button>
<button class="btn btn-danger btn-sm">小サイズ</button>
<button class="btn btn-danger btn-xs">極小サイズ</button>

ブラウザでの表示

ボタンをwidth100%で表示する

class「btn-block」を適用します。

ボタンをブロック要素に変更します。
ページにグリッドシステムを使用する場合によく用いられます。

HTML

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
    <div class="visible-xs" style="height:20px;"></div>
    <h2 style="margin-top:0;">SEO対策（アクセス対策</h2>
    <p>「SEO」とはSearch Engine Optimizationの略称です。ホームページが検索結果でより上位にランキングされるための施策のことです。</p>
  </div>

  <div class="col-xs-12 col-sm-6">
    <a href="#" class="btn btn-danger btn-lg btn-block">SEO対策とは</a>
    <a href="#" class="btn btn-primary btn-block">SEO対策の基本</a>
    <a href="#" class="btn btn-success btn-block">今後のSEO対策</a>
  </div>
</div>
</div>

ブラウザでの表示（ウィンドウ幅767px以下の場合）

ボタンの状況表示

ボタンを押した状態で表示したい場合はclass「active」を追加します。
ボタンの色が濃くなり、ボタンがヘコんでいるように表示されます。

使用不可の状態で表示したい場合はclass「disabled」を追加します。
ボタンをマウスオーバーしてもポインタの形状は変化しません。

HTML

<button class="btn btn-success btn-lg">通常</button>
<button class="btn btn-success btn-lg active">activeの追加</button>
<button class="btn btn-success btn-lg disabled">disabledの追加</button>

ブラウザでの表示

ボタングループの作成

グループ化するボタンをdivで囲み、class「btn-group」を適用します。

ボタングループはインラインブロック要素として扱われます。

HTML

<div class="btn-group">
  <button class="btn btn-success btn-lg">トップ</button>
  <button class="btn btn-primary btn-lg">所在地</button>
  <button class="btn btn-warning btn-lg">お問合せ・御質問</button>
</div>

ブラウザでの表示

ボタングループを縦に並べる

div要素にclass「btn-group-verticai」を適用します。

HTML

<div class="btn-group-vertical">
  <button class="btn btn-success btn-lg">トップ</button>
  <button class="btn btn-primary btn-lg">所在地</button>
  <button class="btn btn-warning btn-lg">お問合せ・御質問</button>
</div>

ブラウザでの表示

ボタングループのサイズ

ボタングループ全体に対してサイズを指定します。
標準以外のサイズは下記のclassを追加します。

class	サイズ
btn-group-lg	大サイズ
btn-group-sm	小サイズ
btn-group-xs	極小サイズ

HTML

<div class="btn-group btn-group-lg">
  <button class="btn btn-success">トップ</button>
  <button class="btn btn-primary">所在地</button>
  <button class="btn btn-warning">お問合せ・御質問</button>
</div>
<br><br>
<div class="btn-group">
  <button class="btn btn-success">トップ</button>
  <button class="btn btn-primary">所在地</button>
  <button class="btn btn-warning">お問合せ・御質問</button>
</div>
<br><br>
<div class="btn-group btn-group-sm">
  <button class="btn btn-success">トップ</button>
  <button class="btn btn-primary">所在地</button>
  <button class="btn btn-warning">お問合せ・御質問</button>
</div>
<br><br>
<div class="btn-group btn-group-xs">
  <button class="btn btn-success">トップ</button>
  <button class="btn btn-primary">所在地</button>
  <button class="btn btn-warning">お問合せ・御質問</button>
</div>

ブラウザでの表示

親要素の幅に応じてボタングループを表示

a要素を使ってボタンを作成し、class「btn-group-justified」を適用します。

テーブル要素として扱われ、ボタンは均等配置となります。

HTML

<div class="btn-group btn-group-lg btn-group-justified">
  <a href="#" class="btn btn-warning"><b>先月</b></a>
  <a href="#" class="btn btn-primary"><b>今月の記事一覧</b></a>
  <a href="#" class="btn btn-warning"><b>来月</b></a>
</div>

ブラウザでの表示

ボタンツールバー

ボタングループをさらにグループ化して、ツールバーのように使います。
全体をdiv要素で囲み、class「btn-toolbar」を適用します。

HTML

<div class="btn-toolbar">
  <div class="btn-group">
  　<button class="btn btn-success">トップ</button>
  　<button class="btn btn-primary">所在地</button>
  　<button class="btn btn-warning">お問合せ・御質問</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default">2014年</button>
    <button class="btn btn-default">2015年</button>
    <button class="btn btn-default">2016年</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-primary">Logout</button>
  </div>
</div>

ブラウザでの表示

Twitter でシェア Facebook でシェア Google+ でシェア