Twitter Bootstrap
メモ（１）
「グリッドシステム？」「レスポンシブデザイン？」
Twitter Bootstrap。
今になって使ってみようと思ったら
「え？ここってどうするの？」と・・。
使い方については英語のサイトばかり・・
日本語の親切なサイトもあるのですが
それでもわからないことがあったので、調べて、
「そうだったのか・・・」と思ったものをメモとして記事にしました。
基本的な使い方については下記のサイトをどうぞ！
Bootstrap from Twitter←本家（ここから持ってくる）
日本語の基本的な使い方・説明をしてくれているサイト。
ブートストラップスターターテンプレート
GreenApple-Room 「Twitter Bootstrapの使い方」
そして、ここからは「そうだったんだ・・」メモ。
■Twitter Bootstrapのグリッドシステムを使いエリアを分割させたとき、
分割させたカラムを更に分割する際、
固定レイアウトの場合と可変レイアウトの場合、方法は同じではない
Twitter Bootstrapはグリッドシステムを提供していて、「固定レイアウト」では横幅940pxの固定エリアを12カラムに分割しています。
「可変レイアウト」では、ブラウザの大きさに合わせて、エリアを12カラムに分割しているようです。
<div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> </div>
こんなかんじで分けますよね。
上では12カラムを4カラム分の大きさ・8カラム分の大きさ、２つに分割しています。
可変レイアウトの場合は”container”を”container-fluid”、”row”を”row-fluid”にしますね。
そして、分けたカラムの中を更に分けるというのも、できるようで・・
<div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8"> <div class="row"> <div class="span4">更に分けた</div> <div class="span4">更に分けた</div> </div> </div> </div> </div>
こんなかんじで、例えば
一番初めのメインで12カラムを4：8に分けて、
分けたカラムをさらに分割したい時は、12カラムを4：8で分けたように分けます。
例えば、メインで8カラム分の大きさに分けたカラムを更に分割する場合は、
自身が8カラム分の大きさなので、中身を8カラムと考え、8カラムを超えないように分割する。
4：4や2：6とか・・
でも、これ可変レイアウトだとうまく行かないんですよね。
可変レイアウトでカラムを更に分割する場合は・・・更に分けたいカラム内を12分割したと考える。
上で、固定レイアウトの場合4：8に分けた8のほうのカラムを更に分けたい時は
中身を8カラムと考え、8カラムを超えないように分割すると言いましたが、
可変レイアウトの場合は、中身が12分割されているようなので、6：6とか2：10とか・・
最初と同じように12カラムを分割するみたいです。
■bootstrap-responsive.cssを入れることにより、レスポンシブデザインなページにできる。
ダウンロードしてきたファイルの中に”bootstrap-responsive.css”というファイルが有ります。
これを入れると、2カラムのページでも一定の画面サイズになると見た目がスマートフォン用に1カラムに変わったりします。
「可変レイアウトってすで画面サイズによって見た目が変わるんじゃないの？？」という感じですが、
可変レイアウトのみだと、2カラムは2カラムのまま。
確かにページの横幅によって可変していきますが、端末やブラウザが小さければ、その大きさに合わせどんどんカラムが狭まっていきます。
なので、スマートフォンの対応を考えているなら、
これを利用した方がいいかもしれませんね！
こちらは固定レイアウト・可変レイアウトどちらにしても、適用されます。
書き方も特にcssを読み込むだけですので、違いは無いのかなあと今のところ思っています。
・・・という感じで、説明の仕方がわかりにくかったり、こんなこと見ればわかる・・とかあるかもしれませんが、
また何かあったらメモ書きます。
