3-1 格線系統

1. 容器：「.container」最大寬度為1140px左右；「.container-fluid」則是滿版容器。

   <div class="container"></div>

    

2. 格線系統：將畫面分成12格（等份），透過行 (row) 與欄 (column) 的組合建立頁面佈局。

   • .row 代表一個橫列，以確保裡面的欄位可以對齊、排序。

   • .col-sm 斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄

   • 若超過12欄，則會自動新增一個 .row

     <div class="row">
         <div class="col-sm-3">
             <p>
               日期：2020/06/08
             </p>
         </div>
         <div class="col-sm-9">
             <ul>
                 <li>今天到期：1</li>
                 <li>逾期：2</li>
             </ul>
         </div>
     </div>

      

   • BootStrap將螢幕依解析度分成五種： 布局網格示例加深理解

     	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	超大屏幕 ≥1200px
     .container	100%	540px	720px	960px	1140px
     .container-sm	100%	540px	720px	960px	1140px
     .container-md	100%	100%	720px	960px	1140px
     .container-lg	100%	100%	100%	960px	1140px
     .container-xl	100%	100%	100%	100%	1140px
     .container-fluid	100%	100%	100%	100%	100%

   • class=" col-sm-9 " 代表螢幕解析度≥576px時「右邊區域」佔了9欄

   • 左右若想交換，就把2、7行對調一下即可。