助けて！Bootstrapが楽しくて仕事が進まない（グリッド編）
公開日：
:
最終更新日：2013/08/15
WEBDESIGN
今回はBootstrap2.2.1のレイアウトとグリッドを色々試してみます。
レイアウトは２種類
Bootstrap2のレイアウトは固定幅（940px）と流動的（ブラウザの枠に連動）の２種類です。
固定幅の場合は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の全体幅を２列に分割する枠ができます。次の例は、左側に4列（span4）分の幅の列と、右側に8列（span8）分の幅を持った２列の枠ができあがります。
<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を２個入れて２列作るイメージです。流動サイズで見てみましょう。
<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
関連記事
-
-
新しいレンタルサーバー発見
ミニムというレンタルサーバー発見。なかなか良い感じだけど...HPデザインがダサすぎ。ロリポをイメー
-
-
届いた KomputerBay 64GB 1000X UDMA7 CFカードを使う
暑い日が増えてきましたが、もうすぐ梅雨の季節。雨が降るとジンバルの出動が難しくなるのでさみしいですね
-
-
NATIVE INSTRUMENTS MASCHINE のお勉強
ガッツりとExpansionsでパワーアップしたMASCHINEを一からお勉強してみる。内容は間違い
-
-
Boostrap CSSを使って自分で書いた横並びのメニューをiPhoneで見たときは縦並びになるようにしたい
なげーよ。ってわけで、今回は表題の通り。 お気に入りの Bootstrap だがメニューがイマイチな
-
-
沼田市のイルミネーション「星の絆」
群馬県沼田市のイルミネーション「星の絆」。 毎年クリスマス前後に行われているイ
ご質問は掲示板へお願いいたします。