*

助けて!Bootstrapが楽しくて仕事が進まない(グリッド編)

公開日: : 最終更新日:2013/08/15 WEBDESIGN

スクリーンショット 2012-11-07 22.11.49
今回は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>

スクリーンショット 2012-11-07 22.43.42
流動的なサイズ(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>

スクリーンショット 2012-11-07 22.59.44
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>

スクリーンショット 2012-11-07 23.15.57
これで枠はグリグリ行けますね。


Sponsored Link


 
 

関連記事

やっと来た DOF F2-BP V Mount Battery Adapter Plate

ebayで注文を入れたのが11日。そしたら発送したよとメールが来たのが20日の夕方。そして届いたのは

記事を読む

ブラシレスジンバル V2.41b5最新設定値

久しぶりに晴天。刺すような日差しが戻ってきました。朝っぱらから読んだニュースの「朝日新聞の異常な対応

記事を読む

no image

伊香保温泉 河鹿橋紅葉ライトアップ

伊香保温泉の湯元にある河鹿橋は紅葉の名所。 毎年10月末から11月中旬には夜間

記事を読む

FL Studio The Project Picker かっこ良すぎる

今更だけど FL STUDIO のプロジェクトピッカーがカッコイイっていう小ネタ。使いかたも簡単。動

記事を読む

SONY α6300 ピクチャープロファイルの比較検討

最近はa6300を使う機会が増えています。そうなると6500が気になりますが動画野郎には値段差ほどの

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑