Bootstrap グリッドシステム

bootstrapのグリッドシステムとは?

サイトの横幅を均等に分けるガイドラインを「グリッド」と呼び、Bootstrapでは12本のグリッドが存在する。
グリッドに沿って表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなる。

.container・・格納庫、コンテナはロー、カラムを格納している。
コンテナは決められた幅を持っている。PCからスマホなどの画面幅を5段階に用意されている(極小から特大)。

.row・・行に与えるクラス。コンテナを水平にして分割し、上から下へ並ぶ。

.col・・列を表すクラス。.rowを縦に割り左から右へ並ぶ。

左側にアドレス、右側にgooglemapを入れてみると、

こう表示される↓

マップは当初、隣のテキストの範囲が適用されてしまうので、別にマップだけスタイルを指定しなければいけない。

参考サイト
http://websae.net/twitter-bootstrap-grid-system-21060224/
http://websae.net/twitter-bootstrap-grid-system-21060224/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です