【未経験プログラミング】bootstrap【28日-29日】

viewport ありなしで表示の縮小しないようになる。＜モバイル

<meta name="viewport" content="width=device-width, initial-scale=1">

グリッド

横幅いっぱいを12カラム

https://techacademy.s3.amazonaws.com/bootcamp/frontend/bootstrap/5-grid-system-col.png

 隙間をあける場合

"col-sm-offset-2 col-sm-5" 

メディアエクリ

特定の表示環境に対してだけCSSを適用させることができる。

表示幅500px未満では黒（#000）、表示幅500pxでは赤（#f00）

background-color: #000;

@media (min-width: 500px) {body {background-color:#f00;} }

フォーム <input type="text" class="form-control">

のようにinputに　class="form-control"を追加すると青い枠が適用される。