*

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


 
 

関連記事

Alexmos Simple BGC GUI 8bit 設定事例を更新しました

毎度お世話になります。初めてごらんいただいたかた、いつもご覧になってくれているかた、みなさんこんばん

記事を読む

WordPressのオリジナルプラグインにショートコード機能を持たせる

ペンション・民宿・プチホテル用 宿泊予約 WordPress プラグインを作る連載で、ショートコード

記事を読む

Canon EF Lens to Micro Four Thirds Speed Boosterが欲しい

はじめてモデルさんとの撮影を経験して色々勉強になりました。やっぱり人の撮影は面白い!話を作るっていう

記事を読む

xismoを使ってみて覚えたところと謎なところ(追記あり)

謎と言っても私の理解が足りないだけなんですけどね^^; 一応私の自画像(美少女)3Dモデルがあ

記事を読む

no image

すごい逆張りEAを作ってみた

前回の記事で一応仕上げたEAをデモで動かしてみた結果バク益www  すごい逆張りEAを作ってみる

記事を読む

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

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 ↑