助けて!Bootstrapが楽しくて仕事が進まない(グリッド編)
公開日:
:
最終更新日:2013/08/15
WEBDESIGN
今回はBootstrap2.2.1のレイアウトとグリッドを色々試してみます。
レイアウトは2種類
Bootstrap2のレイアウトは固定幅(940px)と流動的(ブラウザの枠に連動)の2種類です。
固定幅の場合はcontainerクラスを指定します。
<body> <div class="container"> この部分にGridが入る </div> </body>
流動的なサイズの場合はcontainer-fluidクラスでの指定となります。
<body> <div class="container-fluid"> この部分にGridが入る </div> </body>
レイアウトの指定の中に、より細かい枠となるgrid(グリッド)を書いていきます。このgridもレイアウトの指定によって変化するようです。
固定サイズの場合は rowクラスでspan1 ~span12を囲います。固定幅(940px)は12の列で分割されています。つまり、左側の列を12個のうちの3列分、右側の列を12個のうちの9個分(12-3=9)で940pxの全体幅を2列に分割する枠ができます。次の例は、左側に4列(span4)分の幅の列と、右側に8列(span8)分の幅を持った2列の枠ができあがります。
<body> <div class="container"> <div class="row"> <div class="span4">span4</div> <div class="span8">span8</div> </div> </div> </body>
流動的なサイズ(container-fluidクラス)を指定した場合は rowクラスが row-fluidクラスに変わります。
<body> <div class="container-fluid"> <div class="row-fluid"> <div class="span4">span4</div> <div class="span8">span8</div> </div> </div> </body>
これらの指定を混同して使用した場合(containerと指定するところをcontainer-fluidと書いてしまった場合など)、流動的なサイズとして表示されるようです。細かいところまでの検証はしていないので、トラブルがあるかもしれませんのでご注意ください。
グリッドが色々
gridシステムはとっても便利で簡単です。かなり直感的に指定できます。でも実践するには「ネスト(ネスティング)」も覚えなければなりません。これは子供(孫?)のgridです。つまり上の例で言えば span8の中にspan4を2個入れて2列作るイメージです。流動サイズで見てみましょう。
<body> <div class="container-fluid"> <div class="row-fluid"> <div class="span4">span4</div> <div class="span8">span8 <div class="row-fluid"> <div class="span5">span5</div> <div class="span7">span7</div> </div> </div> </div> </div> </body>
span8の中にrow-fluidを入れてspanで分割という感じでしょうか。中に入るspanは、やはり合計が12になるように指定します。8を分割では無いことに注意ですね。
もう一点、offsetingがあります。枠の幅は span# というように spanに続く数字でしていしますが、その枠の左側をどの程度あけるか指定するものです。
<div class="row"> <div class="span1 offset1"> span1 offset1 </div> <div class="span10"> span10 </div> </div> <div class="row"> <div class="span1 offset2"> span1 offset2 </div> <div class="span9"> span9 </div> </div> <div class="row"> <div class="span4"> span4 </div> <div class="span6 offset2"> span6 offset2 </div> </div>
これで枠はグリグリ行けますね。
Sponsored Link
関連記事
-
やっと来た DOF F2-BP V Mount Battery Adapter Plate
ebayで注文を入れたのが11日。そしたら発送したよとメールが来たのが20日の夕方。そして届いたのは
-
ブラシレスジンバル V2.41b5最新設定値
久しぶりに晴天。刺すような日差しが戻ってきました。朝っぱらから読んだニュースの「朝日新聞の異常な対応
-
伊香保温泉 河鹿橋紅葉ライトアップ
伊香保温泉の湯元にある河鹿橋は紅葉の名所。 毎年10月末から11月中旬には夜間
-
FL Studio The Project Picker かっこ良すぎる
今更だけど FL STUDIO のプロジェクトピッカーがカッコイイっていう小ネタ。使いかたも簡単。動
-
SONY α6300 ピクチャープロファイルの比較検討
最近はa6300を使う機会が増えています。そうなると6500が気になりますが動画野郎には値段差ほどの
ご質問は掲示板へお願いいたします。