Bootstrapのグリッドシステムについて

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

用意されたブレイクポイントは768、992、1200ピクセルの３つで、それぞれのパーツの幅は「col-sm-*」「col-md-*」「col-lg」というクラス名で指定します。これらのクラス名は複合的にも使用することができます。

完成イメージはこちらをクリック

HTML

<div class=”container”>
<div class=”row”>

<!– タイトルA, –>
<div class=”col-sm-12 col-md-4″>
<div class=”title”>
<div id=”waku”>
<h1>タイトルA</h1>
<p>BON JOVI</p>
</div>
</div>
</div><!–col–>

<!– タイトルB, –>
<div class=”col-sm-6 col-md-4″>
<div class=”title”>
<div id=”waku”>
<h1>タイトルB</h1>
<p>DREAM THEATER</p>
</div>
</div>
</div><!–col–>

<!– タイトルC, –>
<div class=”col-sm-6 col-md-4″>
<div class=”title”>
<div id=”waku”>
<h1>タイトルC</h1>
<p>Mr BIG</p>
</div>
</div>
</div><!–col–>

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

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