※bootstrap.min.cssとbootstrap-responsive.min.cssを読み込んでおり、表示幅に応じてレイアウトが変化します。
4段組の例。 「<div class="span3">～</div>」の記述を4つ並べて、均等幅の4段組を作っています。
2階層の段組を作った例。 1階層目では、「<div class="span4">～</div>」と「<div class="span8">～</div>」で2段組を作っています。 その右側の段の中に、2階層目の段組を作っています。 2階層目では、「<div class="span4">～</div>」の記述を3つ並べて、均等幅の3段組を作っています。
Twitter Bootstrap（ツイッター・ブートストラップ）を使ったサンプルページです。 使用例として、All About ホームページ作成の記事紹介などを掲載しています。 以下は、お勧めの記事3本です。
自分のウェブサイトを、Internet Explorer 9以降に搭載されている「ピン留め」機能に対応させる方法をご紹介。ユーザに使いやすいジャンプリストを提供することで、アクセス頻度の向上を図ってみましょう。
サイトアイコンの存在は、ウェブサイトの識別に役立ちます。複数サイズのアイコンを1ファイルに含めたfavicon.icoファイルを簡単に作成できる「x-icon editor」を使って、サイトアイコンを手軽に作る方法をご紹介。
ウェブサイトの構造把握やデザインの試行錯誤に便利なFirefoxアドオン「Firebug」をご紹介。描画とソースとを対にして表示したり、その場でソースを修正して表示確認したり、ウェブ作成を強力に支援する機能が満載。
グリッドの指定方法いろいろ。
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
2
2
2
2
2
2
3
3
3
3
4
4
4
5
5
2
6
6
7
5
8
4
9
3
10
2
11
1
12
複数階層の段組の例。先のSAMPLE2よりも表示内容が少ないので、こちらの方がHTMLソースの構造が把握しやすいでしょう。
▼2階層 ＝ 2段組＋右側の段をさらに3段組
サイド
3
メイン
9
ボックス
4
ボックス
4
ボックス
4
▼3階層 ＝ 2段組＋右側の段をさらに3段組＋中央をさらに3段組
サイド
2
メイン
10
ボックス
3
ボックス
6
小枠
4
小枠
4
小枠
4
ボックス
3