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で囲むのがよさそうです。