WEBプログラミング開発on備忘録~PHP / BootStrap / jQuery / API / iOS

php,css(ブートストラップ),javascriptなどWEBシステムやコンテンツを作りたい自分ようのまとめ

bootstrapのレイアウトの基本を知る

さっそくbootstrapを使っていこうかな、と思います。

 

今回、参考にさせていただいたのはこちらのサイト様です。

 

https://webnetamemo.com/coding/bootstrap/20150629450

 

http://www.tohoho-web.com/ex/bootstrap.html

 

 

詳しくは、上記サイト様をご覧いただくのがベストだと思います。

 

以下、備忘録。

 

 

グリッドシステム

 

bootstrapはグリッドシステムというのを採用しているようで

12分割する方式でレイアウトを組むようです。

 

<div class="row">

を行にみたてて囲み

 

<div class="col-md-6">

 を列にみたててrowの中にいれるようです

 

この6っていうのを、合計すると12になれば1行ってことなので、

この場合、あと6スペースが使える

 

なるほど。

 

mdってのは、画面サイズのことのようです。

ミドルサイズの画面の場合、このクラス指定が適用される、という認識でしょうか。

 

mdと指定した場合、それより小さいと無視されている感じです。

つまり、xsで指定しておけばどのサイズでも適用される感じですね。

別途サイズ指定しなければ。  

 

 

サイズに関して

 

モバイル(スマホ) 768px未満     エクストラスモール=xs     col-xs-*
タブレット768px以上992px未満     スモール=sm     col-sm-*
デスクトップ992px以上1200px未満     ミディアム=md     col-md-*
デスクトップ1200px以上     ラージ=lg     col-lg-*

 

レイアウト

 

rowとうかコンテンツは基本的に.containerで囲むようです。

大枠の意味合いでしょうか。

.container-fluid にすると、全画面になるようです。

 

ス マートフォンサイズ(768px未満)の場合は全幅、タブレットサイズ(768~991px)の場合は 750px固定、中型ディスプレイ(992~1199px)の場合は 970px固定、大型ディスプレイ(1200px以上)の場合は 1170px 固定となります。コンテナはセンタリングされます。左右には 15px のパディングが付きます。

 

 とあるので、やっぱり基本的には.containerで囲むのがよさそうです。