グリッドの用意とパーツ配置

HTML

<div class=”container”>
<!– 1行目　ヘッダー–>
<!– 下記でグリッドを用意 –>
<div class=”row”>
<!– 横幅を12としたときにいくつに配分するかで指定する –>
<div class=”col-sm-12″>
<!–ここから パーツを配置 –>
<div class=”header”>
<h1><a href=”#”><img src=”bicycle.png” alt=”” class=”logo”>BICYCLE</a></h1>
</div>
</div><!–col–>
</div><!–row–>

<!– 2行目 ナビゲーション–>
<div class=”row”>
<div class=”col-sm-12″>
<!– ここからパーツを用意 –>
<div class=”menu”>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Bootstrap</a></li>
<li><a href=”#”>Javascript</a></li>
</ul>
</div>
</div><!–col–>
</div><!–row–>

<!– 3行目 記事–>
<div class=”row”>
<div class=”col-sm-8″>
<!– パーツを配置 –>
<div class=”entry”>
<img src=”photo.jpg” width=500px alt=””>
<h3>果てしない直線道を自転車で走る</h3>
<div class=”added”>
<p>
<a href=”#” class=”1b”>自転車の旅</a>
<a href=”#” class=”1b”>おすすめのサイクリングロードはこちら</a>
</p>
</div>
<p>北海道を自転車で旅を始めて4日目。果てしない一本道をひたすら進む。地平線に向かってひたすら進む。ゴールの見えない旅。自分に打ち勝つ旅。</p>
<p>孤独との闘い。自分を見つめなおす旅。自分のちっぽけさをこの広い台地で感じる。クマが出てきて襲われたらどうしよう。</p>
</div>
</div><!–col–>

<!– サブメニュー–>
<div class=”col-sm-4″>
<div class=”menu”>
<h3>カテゴリー</h3>
<ul>
<li><a href=”#”>旅の思い出</a></li>
<li><a href=”#”>おすすめのサイクリングロード</a></li>
<li><a href=”#”>ハプニング</a></li>
<li><a href=”#”>気を付けること</a></li>
</ul>
</div>
</div> <!–col–>
</div> <!–row–>

<!– 4行目 フッター–>
<div class=”row”>
<div class=”col-sm-12″>

Copyright &copy;自転車旅行

</div><!–col–>
</div><!–row–>
</div><!–container–>

Bootstrapを利用するための準備 | Preparing to use Bootstrap

• Bootstrapをダウンロードし、解凍してできるフォルダをサーバー上のWEBページから参照できる場所に置いておく。＊尚、ここではBootstapバージョン3.1.1を使用しています。 こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。
• BootstrapのCSSの設定（「CSS」フォルダ内のbootstrap.min.css）を<link>で指定する。→「<link rel=”stylesheet” href=”bootstrap-3.1.1-dist/css/bootstrap.min.css”>」
• BootstrapのJavaScriptの設定（「js」フォルダ内のbootstrp,min.js）を<script>で指定します。この設定は</body>の直前に追加します。→「<script src=”bootstrap-3.1.1-dist/js/bootstrap.min.js”></script>」
• BootstrapのJavaScriptを機能させるために、Jqueryの設定をします。
  <script src=”http://code.jquery.com/jquery.js”></script>

作成手順

• パーツ（ヘッダー、ナビゲーション、サブメニュー、フッターなど）を並べるためにグリッドを用意します。
• グリッドは行を<div class=”row”>で囲み、その中で行をどのように分割していくかを<div class=”col-sm- * “>で指定します。
• Bootstrapのグリッドシステムでは余白が必要なものは「container」とクラス名をつけたものの中に記述することになっています

レスポンシブルデザインのブレイクポイントを確認

ブラウザ画面の横幅を変更するとレスポンシブ対応となっていることが分かります。これはBootstrapのグリッド機能によるものです。今回では切り替わるポイント（ブレイクポイント）は768ピクセルで767ピクセル以下では1段組で、768ピクセル以上では2段組で表示されます。

Bootstrapのグリッドシステムは、画像の横幅がブレイクポイントより大きいときに、パーツをどのくらいの幅で表示するかを「col- * – *」というクラス名で指定する仕組みになっています。

今回は小画面（ブレイクポイント768px以上）のときに12分の8の幅にするため「col-sm-8」と指定しています。

レベルアップにプロからの学びを。