BootStarp4實做入門

6. 網格系統

一、使用網格的注意事項

  1. BootStrap4的網格系統以 flexbox（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
  2. 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
  3. 網格系統必須在容器（.container）中才有作用

二、指定欄寬用法

  1. 一般使用範例： 
    <div class="container">
    <div class="row">
        <div class="col-sm-3">側邊三欄</div>
        <div class="col-sm-9">右邊九欄</div>
    </div>
</div>

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

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

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

三、自動等寬用法

  1. 在 BootStrap4 中也可以這樣使用等寬欄位：

    <div class="container">
    <div class="row">
        <div class="col">col 等寬 1/5</div>
        <div class="col">col 等寬 2/5</div>
        <div class="col">col 等寬 3/5</div>
        <div class="col">col 等寬 4/5</div>
        <div class="col">col 等寬 5/5</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm 等寬 1/5</div>
        <div class="col-sm">col-sm 等寬 2/5</div>
        <div class="col-sm">col-sm 等寬 3/5</div>
        <div class="col-sm">col-sm 等寬 4/5</div>
        <div class="col-sm">col-sm 等寬 5/5</div>
    </div>
</div>

  2. 上方的用法就是不管螢幕多大，都要分成五欄

  3. 下方的用法是當螢幕在 576 以上時，才分五欄，在 576 以下的時候，會自動調成單欄式。

小技巧：
輸入 .row>.col-sm*5 然後按 tab 鍵，可以快速產生以上語法

四、指定欄寬+自動欄寬

  1. 可以指定某幾欄的欄寬，其餘的自行自動平均 
    <div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-7">指定佔 7 欄</div>
        <div class="col-sm">自動平均分配</div>
    </div>
</div>

五、根據內容多寡自動調整欄寬

  1. 若不確定該站多少欄寬，亦可讓電腦自行根據內容多寡來判斷： 
    <div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-auto">根據中間內容多多寡來判斷欄寬</div>
        <div class="col-sm">自動平均分配</div>
    </div>
</div>

六、不同斷點的欄寬搭配

  1. 可以在同一個欄位根據不同斷點給予不同大小 
    <div class="container">
    <div class="row">
        <div class="col">自動平均分配</div>
        <div class="col-sm-6 col-md-7 col-lg-8">根據不同螢幕大小來指定中間欄位欄寬</div>
        <div class="col">自動平均分配</div>
    </div>
</div>
  2. 如果是只有用col，那麼，任何裝置都會按照 col 設定來分欄位（不管螢幕多大多小）
  3. 可以同時用多個斷點，例如：col-sm-4 col-md-3，意思就是用手機看時，該區域寬度佔4欄，用平板看時，該區域寬度佔3欄。
  4. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/