助けて!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
関連記事
-
-
Brushless GimbalをSimpleBGC_2_40b6にMacでアップデートしてみる
SimpleBGC はソフト自体のアップデートと、それに対応した本体への Firmware をアップ
-
-
時代はMOVIEでしょ?
画像で説明するのも面倒だし、動画のがわかりやすいかなぁ? と思って画面を動画でキャプチ
-
-
FOTGA DP500 III マットボックスは残念な製品でした
結局ですね。可変NDフィルターは画質の低下や色かぶり。中華な激安フィルターはゴミ同然。丸いNDフィル
-
-
NHKの解体を真剣に検討する時期が来ている
様々な問題が出てくるNHK(日本放送協会)。定期的な不祥事だけでなく、その偏向報道ぶりも相変わらずで
-
-
【感想文】FILMMAKER’S EYE-映画のシーンに学ぶ構図と撮影術:原則とその破り方
単なる読書感想文です。FILMMAKER'S EYE-映画のシーンに学ぶ構図と撮影術:原則とその破り
ご質問は掲示板へお願いいたします。