公式ドキュメントのうち JavaScript に依存せず CSS だけで部品を装飾する Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS Components および CSS です。

グリフアイコン

使用できるアイコン一覧から選択します。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

アラートメッセージ

通常表示

<div class="alert alert-info">Info メッセージ</div>

リンクあり

<div class="alert alert-info"><a href="#" class="alert-link">リンク</a> あり Info メッセージ</div>

ばつ印をクリックすると消える (JavaScript 必須)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="alert alert-info alert-dismissable">
  <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  消せる Info メッセージ (JavaScript 必須)
</div>

ちょっとしたカラフルなメッセージラベル

<span class="label label-default">メッセージ</span>
<span class="label label-primary">メッセージ</span>
<span class="label label-success">メッセージ</span>
<span class="label label-info">メッセージ</span>
<span class="label label-warning">メッセージ</span>
<span class="label label-danger">メッセージ</span>

ナビゲーションバー (Navbar)

ヘッダー部分に表示する、サイトの主要機能へのリンクが記載されたバーです。container の外部で使用します。

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <!-- ブランドロゴなど -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">ABC システム</a>
    </div>

    <!-- 左寄せ -->
    <ul class="nav navbar-nav navbar-left">
      <li class="active"><a href="#">アクティブ</a></li>
      <li><a href="#">非アクティブ</a></li>
    </ul>

    <!-- 右寄せ -->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">右寄せ非アクティブ</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  コンテンツ
</div>

検索 Form のあるナビゲーションバー

<div class="container-fluid"></div> 内に含めます。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="検索">
  </div>
  <button type="submit" class="btn btn-default">検索</button>
</form>

白黒反転させる

<nav class="navbar navbar-default">
↓
<nav class="navbar navbar-inverse">

固定されたナビゲーションバー

上部に固定 (スクロールしても消えない)

<nav class="navbar navbar-default">
↓
<nav class="navbar navbar-default navbar-fixed-top">

上部に固定 (スクロールすれば消える)

<nav class="navbar navbar-default">
↓
<nav class="navbar navbar-default navbar-static-top">

下部に固定 (スクロールしても消えない)

<nav class="navbar navbar-default">
↓
<nav class="navbar navbar-default navbar-fixed-bottom">

その他パーツをナビゲーションバーに含める

<div class="container-fluid"></div> 内に含めます。

ボタン

<button type="button" class="btn btn-default navbar-btn">ログイン</button>

テキスト

リンクなし

<p class="navbar-text">田中 太郎としてログインしています</p>

リンクあり

<p class="navbar-text navbar-right"><a href="#" class="navbar-link">田中 太郎</a>としてログインしています</p>

ページネーション

<div class="container"></div> の中に含めます。

<nav>
  <ul class="pagination pagination-lg">
  <!-- <ul class="pagination pagination-sm"> -->
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li class="disabled"><a href="#">&raquo;</a></li>
  </ul>
</nav>

ページャ

<div class="container"></div> の中に含めます。class="previous" および class="next" を指定しなければ中央揃えとなります。また disabled で無効化もできます。

<nav>
  <ul class="pager">
    <li class="previous"><a href="#">前へ</a></li>
    <li class="next"><a href="#">次へ</a></li>
  </ul>
</nav>

トップページなどで使用しそうな要素

<div class="container"></div> に含めて使用します。

Jumbotron

<div class="jumbotron">
  <h1>タイトル</h1>
  <p>サブタイトル</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

ページヘッダー

<div class="page-header">
  <h1>タイトル</h1>
</div>

ウェル (囲み)

<div class="container"></div> に含めて使用します。

<div class="well">囲み</div>
<div class="well well-lg">囲み (大)</div>
<div class="well well-sm">囲み (小)</div>

テーブル

基本形

<table class="table">
  <tr>
    <th>列1</th>
    <th>列2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

偶数奇数で色を変える (しま模様)

<table class="table">
↓
<table class="table table-striped">

マウスホバーで色を変える

<table class="table">
↓
<table class="table table-hover">

すべて枠

<table class="table">
↓
<table class="table table-bordered">

要素が小さければ詰める

<table class="table">
↓
<table class="table table-condensed">

行の色を変える

<tr class="success">
<tr class="info">
<tr class="warning">
<tr class="danger">
<tr class="active">

ExtraSmall のときにテーブルをレスポンシブにする

<table class="table">
↓
<div class="table-responsive">
  <table class="table">
  ...
  </table>
</div>

• ExtraSmall のときに横幅を画面幅 100% にする
• 必要に応じて横スクロールバーがテーブル直下につく

フロート

グリッドシステムを使用せずに CSS のフロートを使用したい場合は pull-left または pull-right を使用します。clearfix でフロートを解除します。

<div class="container" style="background-color: #fafafa;">
  <div class="row">
    <div class="pull-left" style="background-color: #f00;">
      <p>左寄せ</p>
    </div>
    <div class="pull-right" style="background-color: #0f0;">
      <p>右寄せ</p>
    </div>
    <div class="clearfix"></div>
    <div class="center-block" style="background-color: #00f; width: 100px;">
      <p>中央寄せ</p>
    </div>
  </div>
</div>

• pull-left → float: left
• pull-right → float: right
• clearfix → フロートの解除
• center-block → ブロックを中央揃え (margin-right, margin-left ともに 0)

文字の装飾

色をつける (default, primary, success, info, warning, danger)

<span class="text-default">INFO</span>

左右中央に寄せる

<p class="text-left">左寄せ</p>
<p class="text-center">中央寄せ</p>
<p class="text-right">右寄せ</p>

パンくずリスト

<div class="container"></div> に含めて使用します。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

プログレスバー

<div class="container"></div> に含めて使用します。基本形は以下のとおりです。

<div class="progress">
  <div class="progress-bar" style="width: 60%">60%</div>
</div>

色を付与

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 60%">60%</div>
</div>

ストライプ表示

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 60%">60%</div>
</div>

ストライプ表示 (アニメーション)

<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width: 60%">60%</div>
</div>

重ねる

<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
  <div class="progress-bar progress-bar-warning" style="width: 10%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 15%"></div>
</div>

パネル

<div class="container"></div> に含めて使用します。

<div class="panel panel-primary">
  <div class="panel-heading">
    <h1 class="panel-title">タイトル</h1>
  </div>
  <div class="panel-body">
    本文
  </div>
  <div class="panel-footer">
    フッター
  </div>
</div>

画像関連の装飾

以下の例では holder.js を利用しています。これは開発時に仮の画像を配置するためのライブラリです。

<script src="https://raw.githubusercontent.com/imsky/holder/master/holder.js"></script>
<img src="holder.js/100x100">

加工

角を丸める

<img src="holder.js/100x100" alt="何らかのテキスト" class="img-rounded">

円形に切り取る

<img src="holder.js/100x100" alt="何らかのテキスト" class="img-circle">

サムネイルっぽく枠を付ける

<img src="holder.js/100x100" alt="何らかのテキスト" class="img-thumbnail">

キャプション (見出し)

<div class="container"></div> に含めて使用します。グリッドシステムと併用するとよさそうです。

<div class="thumbnail">
  <img src="holder.js/100x100" alt="何らかのテキスト" class="img-thumbnail">
  <div class="caption">
    <h4>見出し</h4>
    <p>本文</p>
</div>

検索結果のように縦に並べて列挙

以下のようにメディアオブジェクトのリストを使用します。

<ul class="media-list">
  <li class="media">
    <div class="pull-left">
      <img src="holder.js/100x100" alt="何らかのテキスト" class="img-thumbnail">
    </div>
    <div class="media-body">
      <h4 class="media-heading">タイトル</h4>
      <p>本文</p>
    </div>
  </li>
</ul>

リスト

<div class="container"></div> に含めて使用します。

装飾のないリスト

<ul class="list-unstyled">
  <li>A</li>
  <li>B</li>
</ul>

一行で表示するリスト (インライン)

<ul class="list-inline">
  <li>A</li>
  <li>B</li>
</ul>

見出しと説明を数多く列挙する

<dl class="dl-horizontal">
  <dt>見出し</dt>
  <dd>説明</dd>
</dl>

リストグループ (スマートフォン対応ページでよくみる)

<ul class="list-group">
  <li class="list-group-item">A</li>
  <li class="list-group-item">B</li>
</ul>

バッジという数値を右側に表示

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">10</span>
    A
  </li>
</ul>

クリックできるリストグループは div と a で作る

<div class="list-group">
  <a href="#" class="list-group-item"><span class="badge">10</span>A</a>
  <a href="#" class="list-group-item active"><span class="badge">10</span>B</a>
  <a href="#" class="list-group-item">C</a>
</div>

見出しと本文のあるリスト

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">見出し</h4>
    <p class="list-group-item-text">本文</p>
  </a>
</div>

タブ (Navs)

<div class="container"></div> に含めて使用します。Tab および Pill は機能としては同じです。見た目が異なります。

静的なタブを作成

Tab

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">選択中のタブ</a></li>
  <li role="presentation"><a href="#">タブ</a></li>
  <li role="presentation" class="disabled"><a href="#">無効なタブ</a></li>
</ul>

Pill

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">選択中のタブ</a></li>
  <li role="presentation"><a href="#">タブ</a></li>
  <li role="presentation" class="disabled"><a href="#">無効なタブ</a></li>
</ul>

タブをスタックさせて縦に並べる

<ul class="nav nav-pills">
↓
<ul class="nav nav-pills nav-stacked">

レスポンシブにする (均等なタブ幅、画面幅が小さくなれば縦に並ぶ(一段組み))

<ul class="nav nav-pills">
↓
<ul class="nav nav-pills nav-justified">

静的なタブを動的にする (これに限っては jQuery と js/bootstrap.min.js が必要です)

タブに適用するためには pill を tab に置換します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#abc" data-toggle="pill">ABC</a></li>
  <li role="presentation"><a href="#xyz" data-toggle="pill">XYZ</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="abc">内容 ABC</div>
  <div role="tabpanel" class="tab-pane" id="xyz">内容 XYZ</div>
</div>

グループ化されたボタン

等幅ボタン (a タグでのみ可能)

<div class="btn-group-justified">
  <a href="#" class="btn btn-default">等幅ボタン</a>
  <a href="#" class="btn btn-default">等幅ボタン</a>
  <a href="#" class="btn btn-default">等幅ボタン</a>
</div>

横にグループ化されたボタン

<div class="btn-group">
  <button class="btn btn-default">ボタン 1</button>
  <button class="btn btn-default">ボタン 2</button>
</div>

縦にグループ化されたボタン

<div class="btn-group-vertical">
  <button class="btn btn-default">ボタン 1</button>
  <button class="btn btn-default">ボタン 2</button>
</div>

グループ内のボタンの大きさをまとめて変更

<div class="btn-group btn-group-xs">
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-lg">

ボタングループ群をグループ化

<div class="btn-toolbar">

  <div class="btn-group">
    <button class="btn btn-default">ボタン 1</button>
    <button class="btn btn-default">ボタン 2</button>
  </div>

  <div class="btn-group">
    <button class="btn btn-default">ボタン 1</button>
    <button class="btn btn-default">ボタン 2</button>
  </div>
</div>