*

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


 
 

関連記事

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど内容がわからないものなどをメモ

記事を読む

SMALLRIG NATOレール(ARRIロゼット付き)とQRチーズハンドルを買ってみた

camvateというメーカー?を発見。画像を見る限りは微妙な仕上げですが、値段も安めで、ちょっと独創

記事を読む

PM2.5が入って中華より届いた品は Heavens Giftの電子タバコパーツ

いつものように中華より届いた荷物を「なんだっけ?」的に開けてみると、出てきたのは電子タバコの部品やら

記事を読む

WEBデザイン参考ブックマーク

PhotoshopでWEBパーツを作る例が解説されている。ヨサゲなサイトをブックマークしました。ある

記事を読む

GH2のハックをStreamParserで確認してみる

節穴の目では見分けられないのか?撮影したサンプルがアレなのか? 結局わからないので、M

記事を読む

ブラシレスジンバルのROLL(水平)が正しく戻らない

新しいバージョンが出たのでアップデートして、各数値を調整しなおしています。そう、苦労しています(爆)

記事を読む

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

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

CeVIO Creative StudioがMacのWin10で認証失敗

久しぶりに更新できました。 この時期は寒くて...と言い訳から入

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

謎と言っても私の理解が足りないだけなんですけどね^^; 一応私の

Macで MikuMikuDanceができる〜 nanoemというフリーソフト

blenderが難しすぎて挫折しかかっていたときに知った xismo

wacom Intuos ペンモデルの small (ミントブルー)がかわいい

誰がなんと言おうと美少女です! すっかり xismoが気に入って

無料3D作成ソフト xismo がすごくわかりやすい感じ

こんばんは 心は美少女です。 Blenderを使いこなす、という

→もっと見る




  •  

PAGE TOP ↑