BootStrap２日目

しばらく空いてしまったが続き。これ書いたらJavaScriptに入る。
JSが終わってたらMySQLやって、WEBページ作ってみようかな。

グリッドシステム

グリッドシステムとは？

• レイアウトを格子状に分解して配置するデザイン手法
• コンテナ、列、行を使用して、コンテンツをレイアウトし、整列
• 画面サイズによって、レイアウトが変わり、画面サイズが異なるデバイスでも、いい感じに表示される。

グリッドは列数を12として考える。

このサイトが詳しそう→ref

１２分割したカラムのうち、１つだけを使っている場合

<div class="row">
    <div class="col-1 orange">1</div>
</div>

これはcol-5が先に決まり、未指定は自動で決まる。
auto1とauto2は同じグリッド数。

            <div class="row">
                <div class="col orange">auto1</div>
                <div class="col-5 orange">5</div>
                <div class="col orange">auto2</div>
            </div>

画面幅についてもう少し。

• Extra Small
• Small
• Medium
• Large
• Extra Large

それぞれブレイクポイントを期に切り替わり、大きい画面幅から切り替わったら縦並びになる。
例えば画面幅をsmall(sm)に設定していたら、smallの画面幅になった途端に縦並びになる。

            <div class="row">
                <div class="col-sm orange">A</div>
                <div class="col-sm orange">B</div>
                <div class="col-sm orange">C</div>
            </div>

lgより上の画面サイズではlgで指定したグリッド数
lgより下では、mdで指定したグリッド数になる
mdの画面サイズ以下では縦並びになる。

            <div class="row">
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
                <div class="col-lg-1 col-md-2 orange">1</div>
            </div>