解 説

レスポンシブWebデザインは一つのファイルで複数のデバイスに対応させることができる仕組みです。スマホサイトの重要性はますます高くなっていますので、サイト作成イコールレスポンシブ対応は当たり前になってきています。
スマホ用とPC用を考慮して設計するのは結構手間がかかりますが、Bootstrapを使うと簡単にレスポンシブに対応してくれます。

デバイスの画面に応じて列幅を変更

デバイスの画面幅に応じてレイアウトを変更する仕組みはCSS3のメディアクエリを使います。
レイアウトを切り替えるポイントになる画面幅をブレイクポイントと呼びます。
Bootstrapでレスポンシブに対応させるにはグリッドシステムを活用します。
Bootstrapのグリッドシステムではあらかじめブレイクポイントが決められています。

ブレイクポイント
ウインドウ幅 デバイスの種類
0px以上 スマートフォン
768px以上 タブレット
992px以上 ノートPC
1200px以上 大画面PC

Bootstrapが用意している.containerのCSS記述を見ると次のようにブレイクポイントが設定されており、それぞれのブレイクポイントで.containerの幅を切り替えています。つまり.containerを使用すればデバイスが変われば表示幅が変更されることになるわけです。

.containerのcss記述(抜粋)

グリッドの幅をレスポンシブ対応にする仕組み

CSSにブレイクポイントが設定されているものにはグリッド幅を決めるために使用したcol-○○-Nがあります。
col-○○-Nには4つの種類がありますが、決まったブレイクポイントの範囲内で使用可能になります。
col-xs-Nはすべてのデバイスで使用可能
col-sm-Nは768px以上の幅で使用可能
col-md-Nは992px以上の幅で使用可能
col-lg-Nは1200px以上の幅で使用可能です。

ブレイクポイント別クラス名
ウインドウ幅 デバイスの種類 クラス名
0px以上 スマートフォン col-xs-N
768px以上 タブレット col-sm-N
992px以上 ノートPC col-md-N
1200px以上 大画面PC col-lg-N

この仕組みはBootstrapのCSSを確認するとわかりやすいです。
以下はそれぞれのブレイクポイントとcol-○○-Nのcss記述(抜粋)内容です。

複数のcol-○○-Nクラスを使用

複数のcol-○○-Nクラスを使用するとデバイスごとにカラム数の違うレイアウトを作成することができます。
col-xs-Nはすべてのデバイス(画面幅)で使用可能です。col-xs-Nとcol-sm-Nの2つのクラスを指定しておけば、768px以上の幅でcol-sm-Nで指定したカラムの幅になります。また、767px以下ではcol-xs-Nの指定どおりになります。つまり768px以上の幅ではcol-sm-Nが優先されます。このことは上に示したBootstrapのCSSの指定を確認すると理解できると思います。
col-xs-Nとcol-sm-Nとcol-md-Nを指定した場合は768px未満ではcol-xs-Nの指定に従い、768px〜992px未満ではcol-sm-Nの指定になります。そして、992px以上の幅でcol-md-Nの指定になります。

次のように下のクラスの方が優先度が高く、使用できる範囲は狭くなります。
col-xs-N 全てで使用可

col-sm-N 768px以上で使用可

col-md-N 992px以上で使用可

col-lg-N 1200px以上で使用可

次のサンプルを見てください。
3つのdivにcol-xs-Nを全てN=12で指定しています。768px未満では、カラムA、B、Cとも横幅いっぱいのグリッドを作成します。つまり縦に並びます。
次に2つめのクラスcol-sm-NはA=12,B=8,C=4としています。 768px以上の幅ではカラムAは横幅いっぱいに広がります。B、Cはカラム落ちしてカラムAの下について8:4の割合で横に並びます。
3つめのクラスcol-md-N はA=6,B=4,C=2としています。992px以上の幅ではカラムはすべて6:4:2の割合で横に並びます。

複数のcol-○○-Nクラスを使用したサンプル

bt2

col-○○-offset-Nもレスポンシブで活用

col-○○-offset-Nは左側に余白を作ります。また、カラムを左にずらすcol-○○-pull-Nや右にずらすcol-○○-push-Nについてもレスポンシブに対応しています。
クラス名の○○部分にxs,sm,md,lgを指定することでそれぞれのブレイクポイントで活用することができます。

col-○○-offset-Nを使ったサンプル

col-○○-offset-Nをブレイクポイントが変化した時に消去したい場合はcol-md-offset-0を指定

要素の表示と非表示

クラス名hidden-○○は画面のサイズに応じて要素を表示にしたり、非表示にしたりすることができます。
display:blockにしたりdisplay:noneにしたりしているわけです。

非表示

要素を非表示にするクラス名
非表示のウインドウ幅 クラス名
767px以下で非表示 hidden-xs
768px〜991pxで非表示 hidden-sm
992px〜1199pxで非表示 hidden-md
1200px以上で非表示 hidden-lg

hidden-○○サンプル

Bootstrapのcssの記述(抜粋)は以下のとおりです。
!importantが付いていることに注目です。

表示

非表示の要素を表示するためのクラスもあります。

 非表示要素を表示にするクラス名
表示のウインドウ幅 クラス名
767px以下で非表示 visible-xs
768px〜991pxで非表示 visible-sm
992px〜1199pxで非表示 visible-md
1200px以上で非表示 visible-lg

visible-○○のBootstrapのcssの記述(抜粋)は以下のとおりです。

グリッド幅に合わせた画像の表示

画像をグリッドシステムに配置した場合そのままではグリッド幅が変更されたときに画像がグリッドからあふれ出す場合があります。グリッドの幅に応じて画像を縮小してくれるクラスがimg-responsiveになります。ただし、これはグリッド幅に合わせて画像を縮小するだけで拡大する機能はありません。

.img-responsiveのBootstrapのcssの記述(抜粋)は以下のとおりです。

レスポンシブ対応にする場合はimgにclass-“img-responsive”を設定しておくこと