Bootstrapのグリッドシステムについての備忘録

今日はBootstrapについて勉強。
グリッドシステムはよく使うとのことなので、備忘録。

1.HTMLのheadにBootstrapのCSSを読み込む。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2.グリッドで組みたい項目を下記サンプルのように囲う。

    <div class="container">
       <div class="row">
           <div class="col-1 col-sm-4 bg-primary">
               1 of 2
           </div>
           <div class="col-7 col-sm-7 bg-warning">
               2 of 2
           </div>
           <div class="col-4 col-sm-1 bg-success">
               2 of 2
           </div>
       </div>
       <div class="row">
           <div class="col bg-success">
               1 of 3
           </div>
           <div class="col bg-danger">
               2 of 3
           </div>
           <div class="col bg-info">
               3 of 3
           </div>
       </div>
   </div>

＊containerで全体を囲う
＊rowで１行に納めたい項目を囲う
＊colで一つのセルに納めたい内容を囲う
＊colは12分割した幅でレイアウトを操作できる。
＊colｰ6とすると、50％幅になる。またcol-sm  col-mdなどでデバイスの最大幅ごとの分割レイアウトを操作できる。