概要

こちらのページに記載した公式ドキュメントのうち 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>

画像関連の装飾

JavaScript が利用された動的な部品 (Bootstrap 3)
概要 こちらのページに記載した Bootstrap 3 公式ドキュメントのうち JavaScript に依存した動的な部品をコード例とともに列挙します。公式ページは JavaScript です。いずれの部品を使用する場合でも以下のように jQuery と Bootstrap (JS) の読み込みが必要です。 <script src="https://ajax.googleapis.com/aja