Bootstrap プログラミング

Bootstrapのグリッドシステム(GridSystem)の重要点をおさえておく

更新日:

CSSフレームワークで多数使われるBootstrap。
私は、VB.Net歴が長いので、あまり知らなかったのですが、
かなり便利なようで、ちょっと勉強中です。

 

BootStrapを使う事で、

DBから取得した一覧表示のデザインを一瞬で見栄え良くしたり、

一覧表示している明細に各行で色を設定したり出来るようです。

(vb.NETなどで言うならば、GridスタイルのEvenRowを設定する感じ)

 

なので、どちらかと言うと初心者の方向けの内容になると思いますが、
Bootstrapについて書いておこうと思います。

グリッドシステムについて

bootstrap_grid

サイトの横幅を均等に分割するガイドラインをグリッドと呼び、
Bootstrapでは、グリッドを12分割しています。
グリッドに分けることで、レスポンシブ対応がいい感じに出来るようになっています。

こういった作りをグリッドシステムと言うそうです。

 

グリッドシステムのクラス構成

bootstrap_grid2

グリッドシステムのクラス構成は、

1.コンテナ(.container)

2.ロー(.row)

3.カラム(.col-)

となっています。

コンテナの中に、ロー、カラムは存在します。

またローの中にカラムが存在する形を取っています。
カラムクラスの書き方は、 .col-「画面幅」-「グリッド数」となっています。

画面幅は

xs:Extra small

sm:Small

md:medium

lg:Large

xl:Extra Large

となっています。

 

で、書き方としては、

.col-sm-3

という感じで書きます。

これは、画面幅がSmall以上の場合に、
3つのグリッド分を使う事を意味しています。

 

※随時更新します

 

アドセンス

アドセンス

-Bootstrap, プログラミング
-,

Copyright© WMH(World Media Hirosuke) , 2024 All Rights Reserved Powered by AFFINGER4.