Jill 筆記 - 線上書籍

:::

PHP從入門到放棄實戰班
============

1. 容器：「.container」最大寬度為1140px左右；「.container-fluid」則是滿版容器。 
  ```markup
  <div class="container"></div>
  ```
2. 格線系統：將畫面分成12格（等份），透過行 (row) 與欄 (column) 的組合建立頁面佈局。 
  - `.row` 代表一個橫列，以確保裡面的欄位可以對齊、排序。
  - `.col-sm` 斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄
  - 若超過12欄，則會自動新增一個 `.row`
      
       
      ```markup
      <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將螢幕依解析度分成五種： [布局網格示例加深理解](https://code.z01.com/v4/examples/grid/#containers)
      
       <table class="table text-left"> <thead> <tr> <th> </th> <th>超小屏幕  
       <span class="font-weight-normal"><576px</span></th> <th>小屏幕  
       <span class="font-weight-normal">≥576px</span></th> <th>中等屏幕  
       <span class="font-weight-normal">≥768px</span></th> <th>大屏幕  
       <span class="font-weight-normal">≥992px</span></th> <th>超大屏幕  
       <span class="font-weight-normal">≥1200px</span></th> </tr> </thead> <tbody> <tr> <td>`.container`</td> <td class="text-muted">100%</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> </tr> <tr> <td>`.container-sm`</td> <td class="text-muted">100%</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> </tr> <tr> <td>`.container-md`</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td>720px</td> <td>960px</td> <td>1140px</td> </tr> <tr> <td>`.container-lg`</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td>960px</td> <td>1140px</td> </tr> <tr> <td>`.container-xl`</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td>1140px</td> </tr> <tr> <td>`.container-fluid`</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> <td class="text-muted">100%</td> </tr> </tbody> </table>
  - class=" col-sm-9 " 代表螢幕解析度<span class="font-weight-normal">≥576px</span>時「右邊區域」佔了9欄
  - 左右若想交換，就把2、7行對調一下即可。

MarkDown