Web業界にいる方なら誰でも知っている、超有名なCSSフレームワークです。 CSSだけでなく、レスポンシブやモーダルウィンドウなどのよく使う機能が提供されています。 私は、あまり使ったことがありませんでしたが、少し試してみました。

なぜ、Bootstrapを使う必要があるのか？

なぜ、BootstrapやCSSフレームワークを使う必要があるのでしょうか？ 少し考えてみました。

  • 主要なデバイスやブラウザに対応しているため、少ない労力でサイト構築ができる。
  • あまりCSSを知らなくてもサイト構築ができる。
  • （特に管理画面などにおいて）見やすいスタンダードなデザインが気軽に提供できる。
  • モダンな設計がなされたCSSで、コーディングを体感できる。
  • 使っている人が多い。

こんな感じでしょうか。 私の場合、モダンな設計のCSSと、スタンダードなデザインが、どのように実装されているか、気になりました。 Bootstrapは、設計やデザインにおいて、ベターなものが多く含まれています。 クライアントから明示的に指示がなければ、Bootstrapに沿った設計や機能にしておけば、間違いないでしょう。

Bootstrapの使い方

公式サイトからの情報がほとんどですが、簡単に使ってみます。 CDNやBowerから使う方法もありますが、とりあえず、普通にDownload Bootstrapからダウンロードします。

Getting started · Bootstrap #Download 頻繁に使用するようであれば、BowerをGruntやGulpと組み合わせて、使えるようにすると良いでしょう。

準備

解凍すると、distというディレクトリが現れます。 好きな名前にしてしまいましょう。 ディレクトリには、Bootstrapで使用するファイルが一式入っていますが、htmlはありません。 Basic templateからソースをコピペして、htmlを作成します。

Getting started · Bootstrap #Basic template ファイル名は何でも良いですが、ここはindex.htmlにします。 このまま試すことができますが、2行目のlang属性をjaに変えておくくらいはしても良いでしょう。

Grid system（グリッドシステム）

CSSフレームワークを使用する上で、欠かせないものは、やはりGrid systemではないでしょうか。 横幅を12等分にして、そのカラムをいくつ使うか決めて、レイアウトします。 使い方は簡単で、rowというclassの中に等分したいclassを設定するだけです。 12を超えると折り返されます。 

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

CSS · Bootstrap #Grid system

4デバイスのメディアクエリ

上記でcol-md-xxのmd部分には、以下の4つを設定することができます。

Extra small devices Phones(<768px) スマートフォンサイズ.col-xs-
Small devices Tablets(≥768px) タブレット.col-sm-
Medium devices Desktops(≥992px) デスクトップ中サイズ.col-md-
Large devices Desktops(≥1200px) デスクトップ大サイズ.col-lg-

複数記述することで、簡単にレスポンシブにすることができます。 

<div class="row">
    <div class="col-xs-10 col-md-8">.col-xs-10 .col-md-8</div>
    <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
</div>

container（固定枠）とFluid container（可変枠）

固定枠か可変枠を設定することができます。 containerを親要素にすると、画面サイズに応じた横幅の数値が設定され、中央揃えになります。 

<div class="container">
    <div class="row">
        <div class="col-xs-10 col-md-8">.col-xs-10 .col-md-8</div>
        <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
    </div>
</div>
Extra small devices Phones(<768px) スマートフォンサイズNone (auto)
Small devices Tablets(≥768px) タブレット750px
Medium devices Desktops(≥992px) デスクトップ中サイズ970px
Large devices Desktops(≥1200px) デスクトップ大サイズ1170px

container-fluidを設定すると、可変された幅で表示されます。 

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-10 col-md-8">.col-xs-10 .col-md-8</div>
        <div class="col-xs-2 col-md-4">.col-xs-2 .col-md-4</div>
    </div>
</div>

Offsetting columns（空カラムの設定）

カラムが12未満だと、左によってしまいます。 右によせたい場合などは、offsetを利用します。 

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

Nesting columns（カラムの入れ子）

カラムは、入れ子にすることができ、その中でさらに12カラムのレイアウトをすることができます。 

<div class="row">
    <div class="col-sm-9">
    Level 1: .col-sm-9
        <div class="row">
            <div class="col-xs-8 col-sm-6">
            Level 2: .col-xs-8 .col-sm-6
            </div>
            <div class="col-xs-4 col-sm-6">
            Level 2: .col-xs-4 .col-sm-6
            </div>
        </div>
    </div>
</div>

Column ordering（カラム位置の変更）

pullとpushを使用すると、現在配置されている位置からカラムを左右に移動させることができます。 例えば、col-md-push-7を指定すると7列を右に移動し、col-md-pull-5を設定すると、 5列を左に移動します。 

<div class="row">
    <div class="col-md-1 col-md-push-7">.col-md-1</div>
    <div class="col-md-4 col-md-push-7">.col-md-4</div>
    <div class="col-md-7 col-md-pull-5">.col-md-7</div>
</div>

デザインについて

すでに用意されているデザインをざっと確認しておきましょう。

Theme Template for BootstrapBootstrap-theme.CSSを読み込んでいると、ボタンなどが立体的になります。

Glyphicons（アイコン）

200のアイコンが用意されています。 これだけあれば、困ることはないですね。

Components · Bootstrap 空のspanをclassを設定すれば、使用できます。 

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

このアイコンは、fontsディレクトリにあるfontファイルを使用しています。 fontなので、拡大縮小でもきれいです。

JavaScript

Bootstrapには、モーダルウィンドウやタブ切り替えなどの定番機能が、すでに実装されています。 jQueryの知識があるほうが、実装しやすいとは思いますが、ドキュメントのコピペでもサクッと作れるので、便利です。

JavaScript · Bootstrap

  • Modal
    モーダルウィンドウです。
  • Dropdown
    ドロップダウンメニューです。
  • Scrollspy
    スクロールの位置からナビゲーションを更新します。
  • Tab
    タブ切り替えです。
  • Tooltip
    マウスオーバーやタッチで表示されるチップツールです。
  • Popover
    クリックやタップで表示される簡易モーダルウィンドウです。
  • Alert
    閉じることができるアラートが表示できます。
  • Button
    ボタンにトグル機能などつけることができます。
  • Collapse
    アコーディオンのような切り替え機能です。
  • Carousel
    スライドショー機能です。
  • Affix
    スクロール時に、要素を追従させます。

まとめ

流行っているだけあって、全体的に洗練されたモダンなデザインと機能群です。 一部、JavaScriptの機能に、不満があるものの、ここまで気軽に扱えるのは、気持ちよいです。 Bootstrapを使用したフリーのテンプレートであれば、あとから共通の規約で、カスタマイズしやすいのではないでしょうか。 また、使用しないにしても、CSSの実装など参考になりますね。