助けて!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
関連記事
-
-
激安アルカスイスタイプ(互換)クランプ中華な装いで現る
欲しかったのは横と後ろに水平器が仕込まれたヤツ。探し求めていたものがやっと見つかりました。はるばる海
-
-
GH4のV-LogとNatural-Logを試す – 10bit:8bit, ISO200-6400, Sharpness
果たして10bit4:2:2の外部収録に意味はあるのか? 言うまでもなく意味はあるんでしょうが、自分
-
-
シルイ / SIRUI TY-5D II Arca-Type Pro Quick Release Plate を買ってみた
既に廃盤で市場在庫のみという噂を聞いて一つ仕入れておきました。シルイ/SIRUI TY-5D II
-
-
【読書感想文】クライマックスまで誘い込む絵作りの秘訣(追記あり)
本を読む・購入する場合、頭には問題意識というか悩みがあり、それを解決してくれるであろうと思われるもの
-
-
2015年末期症状なカメラ関係で欲しいものリスト
今更だが世の中は金である。金が全てとは思わないが、それでも現実として金が占める割合はかなり大きい。な
ご質問は掲示板へお願いいたします。