*

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


 
 

関連記事

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

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

記事を読む

no image

CodeIgniterでメールアドレス検証

CodeIgniterでメールアドレスの検証を行うと、ちょっと問題がある。 aaa.@dddxxx.

記事を読む

no image

FuelPHP1.3が来てたのでインストールしてみる

さっそく新バージョンが出ていたので入れ替えることにする。 まず、今までのものは全て削除。特に何

記事を読む

Smallrig HDMLロック 1572と1679でα6300リグのカスタマイズ(一応成功)

横目でチラチラ α7SIIの値段を見ています。ゴールデンウィークの影響でしょうか? 微妙な値上がり.

記事を読む

関連記事プラグイン(YARPP)の表示がおかしいので修正してみる

こんにちはイケメンです。 高機能で便利なWordpressの関連記事表示プラグイン「YARPP」。

記事を読む

ダイソーLED電球の色温度をα6300で計測してみる

風邪を引いたのですが舐めていたら悪化して中耳炎になりました。2周間ほど寝込んでいて未だにセキはとまり

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

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

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

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

欲しかった Kontakt 5 - Native Instrument

可変NDフィルターの色かぶりを調整する【追試あり】

しかしセキが止まりませんな。既に二ヶ月近くゴホゴホ。鼻水ずるずる。熱は

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

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

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

最近はa6300を使う機会が増えています。そうなると6500が気になり

【妄想】片手持ちハンドヘルド 3軸ジンバルスタビライザーの比較

未だに風邪が抜けません。もう一ヶ月以上...どうやら今年の風邪は長引く

→もっと見る




  •  

PAGE TOP ↑