概要

Bootstrap のメジャーバージョンは 2015-2-01(Sun) 現在 3 であり、最も人気のある HTML, CSS, JS のフレームワークです。Grid system という、いわゆるレスポンシブデザインを行うために便利な機能も利用できます。デザインの独自性にこだわらない業務アプリケーションなどを短期間で作る場合にも便利ですし、インターネットに公開する独自性が求められるアプリケーションの土台として利用する場合にも有用です。後者の例としては公式サイトのこちらにまとめられています。

Bootstrap 3 の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまっています。以下では公式ドキュメントのどこに何が記載されているかを把握して、必要なときに参照して利用できるようになることを目指します。

ダウンロード

こちらのページにある "Download Bootstrap" リンクをクリックして、コンパイル済みのファイル一式がまとめられた zip ファイルをダウンロードおよび解凍します。

リンクのすぐ下の部分には、インターネット上にホスティングされたものを利用する Bootstrap CDN や、各種コマンドラインツールによるインストール方法、あるいはソースコードをダウンロードして自分で Grunt を用いてコンパイルする方法がつらつらと記載されていますが、通常は不要な情報です。

テンプレートの選定

大別するとテンプレートは以下の二種類です。必要なものをコピーして利用します。

Basic template: Bootstrap を利用する必要最低限の情報が記述されたテンプレート
Examples: よくあるデザイン構成の雛形となる情報も記述されたテンプレート

テンプレートの種類によらず、日本語のサイトを作成する場合には

<!DOCTYPE html>
<html lang="en">
...
</html>

となっている部分を

<!DOCTYPE html>
<html lang="ja">
...
</html>

に変更しておきます。

公式ドキュメントの構成

上述のダウンロードおよびインストール方法の情報や Bootstrap を使用したサイトの紹介を除くと、公式ドキュメントは以下の 3 パートで構成されています。

CSS

CSS パートには HTML, CSS フレームワークとしての Bootstrap の使用方法が記載されています。

Containers: すべての要素の入れ物であるコンテナ要素
Grid system: ページを 12 列に分割してデザインする機能
Typography: 文字列の装飾タグ (h1, h2, p, li,...)
Code: ソースコードの装飾タグ (pre, code,...)
Tables: テーブルタグ関連の装飾
Forms: フォームタグ関連の装飾
Buttons: ボタンの装飾
Images: img タグの利用方法
Helper classes: その他の雑多な装飾機能 (文字列の背景色など)
Responsive utilities: レスポンシブデザイン関連 (画面サイズによって要素を隠す方法など)
Using Less: 文字列サイズなど既定のデザインパラメータを Bootstrap が標準採用する Less で変更する方法
Using Sass: Rails などで標準採用されている Sass を Less の代替として使用する方法

Components

Components パートにも HTML, CSS フレームワークとしての Bootstrap の使用方法が記載されています。CSS パートが HTML タグの CSS 装飾の方法に特化した記述になっていたのに対し、こちらではよく利用しそうな部品の紹介およびその利用方法が記載されています。具体的には以下のようなものです。

標準で提供されているアイコン、ドロップダウンリスト、高機能なボタン、高機能なフォーム、高機能なテーブル、タブ機能、ナビゲーションバー、ページャ、サムネイル、アラート、プログレスバー、動画埋め込み

JavaScript

JavaScript パートには JS フレームワークとしての Bootstrap の使用方法が記載されています。ただし、ここでいうフレームワークは jQuery のような仕組みのことではありません。Bootstrap の JS フレームワークは内部で jQuery を利用しています。Bootstrap のために作成された jQuery プラグインの紹介およびその利用方法が記載されたページということになります。具体的には以下のようなものです。

ツールチップ、モーダル、ドロップダウンリスト、タブ、アラート、ボタン、チェックボックス、ラジオボタン、アコーディオンパネル

カスタマイズされた軽量な Bootstrap を入手

標準ダウンロード版では Bootstrap が提供する Grid system, Tables, Forms, Glyphicons, Tooltips などがすべて内包されています。その一部しか使用しない場合などはこちらのページで不要な機能を削除した軽量な Bootstrap をダウンロードできます。

簡単な使用例

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> ←IEの互換モードを無効化
    <meta name="viewport" content="width=device-width, initial-scale=1"> ←スマートフォンにレスポンシブWebデザインを適用するために必須
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    ↓IE8以前への対応。JSをDLしてローカル保存しておくとWebから消失しても安心
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

      <div class="alert alert-success" role="alert">更新に成功しました。</div>

      <p>
        <span class="glyphicon glyphicon-star"></span> ディレクトリを移動するためには <code>cd</code> を利用します。
        <button type="button" class="btn btn-default" data-toggle="tooltip" title="日本語もOK">
          ツールチップボタン
        </button>
      </p>

      <pre>$ cd ..</pre>

      <div class="row">
        <div class="col-md-8 bg-primary">.col-md-8</div>
        <div class="col-md-4 bg-info">.col-md-4</div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
     $(function (){
       $('[data-toggle="tooltip"]').tooltip();
     })
    </script>
  </body>
</html>

ディレクトリ構成

$ tree 
.
├── css
│   ├── bootstrap.css (あると便利。デバッグしやすい)
│   ├── bootstrap.css.map (必須)
│   ├── bootstrap.min.css (必須)
│   ├── bootstrap-theme.css (不要)
│   ├── bootstrap-theme.css.map (不要)
│   └── bootstrap-theme.min.css (不要)
├── fonts (グリフアイコンのフォント。すべて bootstrap.css から参照されており必須)
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
├── index.html
└── js
    ├── bootstrap.js (JS コンポーネントを使用する場合は必要)
    ├── bootstrap.min.js (bootstrap.js を使用する場合はあると便利。デバッグしやすい)
    └── npm.js (不要)

3 directories, 15 files