Eyecatch Bootstrap1

CSS Twitter Bootstrap3で簡単レスポンシブWebデザイン 【第5回】

Posted 11月 8 2013 by kubota  

CSS Twitter Bootstrap3で簡単レスポンシブWebデザイン

Twitter Bootstrap ~第5回は、Grid Systemについて~

今回は、Bootstrapの特徴の一つである、Grid systemについて見ていきます。

■たし合わせると12になる。これがカラム構造の基本。

前回はコピペでヘッダを作りましたが、今度はbody以下を作っていきます。とりあえずは3カラムで。
これもBootstrapのWebサイトの⇒ここのコピペで基本できてしまいます。

<div class="row">
  <div class="col-md-3">左カラム</div>
  <div class="col-md-6">中央カラム</div>
  <div class="col-md-3">右カラム</div>
</div>

上記のソースをbody内に入れるだけで、出来上がるのが下。

分かりやすいように色分けして高さも設定していますが、3:6:3の3カラム構造ができあがったのがわかると思います。
class名のcol-md-3の数字を変えて、カラムの合計が12になるように分けられるんですね。4:4:4の3カラムもできるし、4:8の2カラムもできます。pixelで幅を決めているわけではないので、モニタサイズに応じて勝手にレスポンシブ対応してくれます。

max-width:1199px;だとこうですが、

max-width:911px;だとこんな感じ。

max-width:767px;だとこうです。

こんなふうに3:6:3の割合で、自動でレスポンシブ対応してくれています。あとは各カラムの中にコンテンツを詰めていけば、bodyが完成します。

■次回はさらに便利なComponentsについてです。

せっかくカラムがレスポンシブ対応しているのだから、中のメニューや写真のボックスも同じくレスポンシブ対応させたいですよね。もちろんBootstrapなら大抵のものが揃っています。次回はそれらを使って、コンテンツを入れていきましょう。
 


Bootstrap column CSS flat design HTML JavaScript jquery navi カラムレイアウト レスポンシブ



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。