*

助けて!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


 
 

関連記事

SONY α6300 ピクチャープロファイルの比較検討(動画編)

前回の「SONY α6300 ピクチャープロファイルの比較検討」に引き続きDavinciResolv

記事を読む

no image

PHPの改行を消す。挿入。追加する。削除。

知らなかったのでメモ。 改行を消す場合 $tmp = str_replace(PHP_EOL, ''

記事を読む

NATIVE INSTRUMENTS MASSIVE で音作り 2

前回の続きです。ここからは操作をビデオで確認しながら進めてください。言葉で説明するのは難しいのよ。

記事を読む

Canon EF50mm対決:コンパクトマクロ MACRO F2.5 対 撒き餌F1.8 II

キヤノンEF安レンズ対決! 中古で買ったコンパクトマクロ50mmF2.5と激安なのに写りが良いと言

記事を読む

某氏のSimpleBGC GUI設定を研究する(2)詳細タブ

年末だし、バッテリーチャージャー買っておこうかと思いました。アマゾンを見まわって安くて良さそうな製品

記事を読む

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

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 ↑