Bootstrapの基本構造・グリッドシステムの使い方

Bootstrapのグリッドシステムとは?

ブラウザの横幅を12列に分割して、ブラウザの大きさに応じてレイアウトを変化させるシステム(レスポンシブレイアウト)です。

グリッドシステムのクラス

以下ブラウザの横幅を指定するクラスです。
xssmmdlg
横幅767以下768以上991以下992以上1199以下1200以上
端末スマホタブレットデスクトップPCデスクトップPC(画面サイズ大)

基本的な使い方

1行ごと「row」クラスでつつみ、列をトータルで12列になるようにします。

全体をコンテナで包む

「container-fluid」または「container」で全体を包んでください。
「row」のパディングがpadding-right:-15px、padding-left:-15pxとなっています。また、「container-fluid」及び「container」はpadding-left:15px padding-right:15pxとなっており、「row」と「container 」を同時に使うことにより、paddingが相殺されpadding-right:0px、padding-left:0pxとなります。

container-fluidかcontainerの違い
container-fluidブラウザ全体の横幅に応じて、完全に可変的に内部の比率を変更する。
containerブラウザ全体の横幅に応じて、段階的に内部の比率を変更する。例えば768pxまではこの比率。768pxから991まではこの比率など。

ブラウザの大きさにより、要素を非表示にする「hidden-端末」

例えば、スマホで非表示にしたい要素は「hidden-xs」

ブラウザの大きさにより、要素を表示する「visible-端末」

例えば、スマホだけで表示にしたい要素は「visible-xs」

ブラウザの大きさにより、左右の要素の場所を変更する

container-fluidかcontainerの違い
col-端末-push本来の列の開始位置を右にずらす。
col-端末-pull本来の列の開始位置を左にずらす。

例えば、以下のように設定すると、タブレット以下で表示する場合に完全にカラムの表示順序を逆にすることができます。