[Bootstrap] グリッドシステムを実際に動かしてみる。

前回グリッドシステムについて理解を整理したので、今回実際にコードで動かしてみる。

動かし方に関して、参考にさせていただいたサイトはこちら。

0.1 下準備
0.2 等幅グリッド
0.3 colの幅を指定する
0.4 複数colを指定して、スマホに対応
0.5 rowクラスの中で、colクラスを色々な方向に寄せる。
- 0.5.1 縦方向の調整 (row)
- 0.5.2 縦方向の調整 (col)

1 全体像を把握する

下準備

まずはBootstrapのファイルをダウンロードする。

ダウンロードはこちらからできる。

https://getbootstrap.com/

ダウンロードしたら、HTMLにファイルを読み込ませる。

読み込むファイルは二つ。あとは自分でわかりやすいように、自分のCSSファイルで装飾する。

bootstrap.min.css
bootstrap.min.js

<!DOCTYPE html>
<html>
 <head>
  <title>grid system</title>
  <meta charset="UTF-8">
   <link rel="stylesheet" href="./bootstrap.min.css">
 </head>
 <body>

 <script src="./bootstrap.min.js"></script>
 </body>
</html>

/* .colの部分は、HTMLの定義に合わせて変える*/
/* グリッドをわかりやすくするためのCSS　*/
.col{
  background-color:#cccccc;
  border: medium solid black;
  height:300px;
}

等幅グリッド

まずは単純にrowとcolをセット。

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>

colの幅を指定する

colの幅を指定する。グリッドは最大12列まで。

<div class="container-fruid">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
</div>

複数colを指定して、スマホに対応

複数のcolを指定して、画面の幅が異なる場合も対応できるようにする。

下記のようなイメージ。

PC画面ではlgを指定。

スマホ画面ではxsを指定。

*Bootstrap3では、Extra Smallサイズは「col-xs-○ 」という書き方だが、Bootstrap4からは、「.col-○」だけでよくなった。

詳しくはこちら。（https://getbootstrap.com/docs/4.1/layout/grid/#grid-options）

<div class="container-fruid">
       <div class="row">
           <div class="col-6 col-lg-8">A</div>
           <div class="col-6 col-lg-4">B</div>
       </div>
   　　<div class="row">
           <div class="col-6 col-lg-3">C</div>
           <div class="col-6 col-lg-3">D</div>
           <div class="col-6 col-lg-3">E</div>
           <div class="col-6 col-lg-3">F</div>
       </div>
   </div>

Largeサイズでみてみるとこちら。

画面幅がExtra Smallサイズだと、変化している。

rowクラスの中で、colクラスを色々な方向に寄せる。

rowクラスの中で、colクラスを色々な方向に寄せることができる。

縦方向の調整 (row)

align-itemsを使うことで、rowクラスに入っているcolクラス全体に対して、縦方向に調整が可能。

align-items-start（上寄せ）
align-items-center（中央）
align-items-end（下寄せ）

<!-- 中央寄せの例>

<div class="container-fruid">
       <div class="row align-items-center">
           <div class="col-lg-6">A</div>
           <div class="col-lg-6">B</div>
       </div>
   </div>

縦方向の調整 (col)

.align-selfを使うことで、カラム一つ一つを調整することもできる。

align-self-start（上寄せ）
align-self-center（中央）
align-self-end（下寄せ）

<div class="container-fruid">
       <div class="row align-items-center">
           <div class="col-lg-4 align-self-start">1</div>
           <div class="col-lg-4 align-self-center">2</div>
           <div class="col-lg-4 align-self-end">3</div>
       </div>
   </div>