グリッドの用意とパーツ配置 | Grid preparation and parts placement in Bootstrap

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ページから参照できる場所に置いておく。| Download Bootstrap and place the unzipped folder in a location that can be referenced from the WEB page on the server.＊尚、ここではBootstapバージョン3.1.1を使用しています。| * Bootstap version 3.1.1 is used here. こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。| If you use a new version, some parts may not work.
• 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>

作成手順 | Creation procedure

• パーツ（ヘッダー、ナビゲーション、サブメニュー、フッターなど）を並べるためにグリッドを用意します。| Prepare a grid to arrange the parts (headers, navigation, submenus, footers, etc.).
• グリッドは行を<div class="row">で囲み、その中で行をどのように分割していくかを<div class="col-sm- * ">で指定します。| The grid encloses the rows in &<div class = "row"> and specifies how to divide the rows in it with &<div class = "col-sm- *">.
• Bootstrapのグリッドシステムでは余白が必要なものは「container」とクラス名をつけたものの中に記述することになっています。| In Bootstrap's grid system, anything that requires a margin is described in the one with the class name "container".

レスポンシブルデザインのブレイクポイントを確認 | Check the break points of responsive design

ブラウザ画面の横幅を変更するとレスポンシブ対応となっていることが分かります。これはBootstrapのグリッド機能によるものです。今回では切り替わるポイント（ブレイクポイント）は768ピクセルで767ピクセル以下では1段組で、768ピクセル以上では2段組で表示されます。| If you change the width of the browser screen, you can see that it is responsive. This is due to Bootstrap's grid function. This time, the switching point (break point) is 768 pixels, and if it is 767 pixels or less, it is displayed in 1 column, and if it is 768 pixels or more, it is displayed in 2 columns.

Bootstrapのグリッドシステムは、画像の横幅がブレイクポイントより大きいときに、パーツをどのくらいの幅で表示するかを「col- * - *」というクラス名で指定する仕組みになっています。| Bootstrap's grid system is designed to specify how wide a part should be displayed with the class name "col-*-*" when the width of the image is larger than the breakpoint.

今回は小画面（ブレイクポイント768px以上）のときに12分の8の幅にするため「col-sm-8」と指定しています。| This time, "col-sm-8" is specified to make the width 8/12 when the screen is small (breakpoint 768px or more).

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.