2回目となる本稿では、Bootstrapバージョン3の特長でもある「グリッドシステム」と、「ナビゲーション」などのコンポーネントについて解説していきます。
グリッドシステムとは
前回解説したように、Bootstrapはレスポンシブデザインに対応したフレームワークです。本稿では、その仕組みであるグリッドシステムについて解説していきます。
グリッドシステム（グリッドレイアウト）は、ページの一面を格子状に区切って、文章／画像／余白等を配置していくデザイン手法です。Bootstrapのグリッドシステムでは、ページの列を12分割して部品を配置していきます。
Bootstrapのグリッドの仕組み
なお、12分割しかできないわけではなく、列の中に行を入れることができる（分割済みの列をさらに分割できる）ため、柔軟にレイアウトすることができます。
グリッドシステムのHTML記述方法
それでは、HTMLを見ていきましょう。グリッドシステムでは、divのクラス名に行（row）を指定し、その中に列（col）を指定します。
ボックスを三等分しているHTML（index.cshtml）
<!-- 行の指定 -->
<div class="row">
<!-- 1つ目(4) -->
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful ...
</p>
<p><a class="btn btn-default" href="http://...">Learn more ...</a></p>
</div>
<!-- 2つ目(4) -->
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is ...</p>
<p><a class="btn btn-default" href="http://...">Learn more ...</a></p>
</div>
<!-- 3つ目(4) -->
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find ...</p>
<p><a class="btn btn-default" href="http://...">Learn more ...</a></p>
</div>
</div>
レイアウトをコントロールしているのは、<div class="col-md-4">の部分で、ここでは「4：4：4」の割合で3分割しています。
トップ画面のグリッドレイアウト（均等に3分割：赤色部分）
試しに割合を「8：3：1」に変更してみましょう。指定の仕方は、「col-md-数字」の数字部分を変更します。数字の部分には1から12までの数字を指定できます。
レイアウトの比率を8対3対1に変更（index.cshtml）
<!-- 行の指定 -->
<div class="row">
<!-- 1つ目(8) -->
<div class="col-md-8">
<h2>Getting started</h2>
（中略）
</div>
<!-- 2つ目(3) -->
<div class="col-md-3">
<h2>Get more libraries</h2>
（中略）
</div>
<!-- 3つ目(1) -->
<div class="col-md-1">
<h2>Web Hosting</h2>
（中略）
</div>
</div>
トップ画面が変更された（左から8対3対1に：開発者ツールで確認）
各領域の幅が、左から8対3対1になったことがわかります。このようにグリッドシステムではクラス名「.col-md-1」～「.col-md-12」によって相対的にレイアウトを指定できます。
