| 網格概念 |

CH5 18
Bootstrap網格概念圖

  • Gutter Width 為欄位間的縫隙。此預設 20 px
  • Gutter on outside 為外面是否要保留空間,它的寬度為 Gutter Width 的一半為
  • 以繪圖軟體介面來解說
    • 總寬度為 940 px,因勾選 Gutter on outside ,所以內容寬度為 940 px
    • 計算方式 : 60 x 12 + 20 x 11 = 940

| Bootstrap 中的欄與列 |

CH5 19

  • 如果直接把 .box 寫在 .col-xx 上 gutter 會消失
    <!--錯誤寫法-->
    <div class="container">
    <div class="row">
        <div class="col-6 box"></div>
        <div class="col-6 box"></div>
    </div>
    </div>
    <!--正確寫法-->
    <div class="container">
    <div class="row">
        <div class="col-6">
            <div class="box"></div>    
        </div>
        <div class="col-6">
            <div class="box"></div>    
        </div>
    </div>
    </div>

// 此圖出處為六角學院 ▼
Bootstrap-中的欄與列補充01

| Bootstrap 中的響應式斷點 |

CH5 20

  • Bootstrap 是設計來行動優先的框架,透過許多 media queries 來設定中斷點,並製作具彈性的排版
    • Layout / Grid → Grid option
    • 下方示意圖中只有橫式無直式,是因為 Bootstrap 預設皆以手機裝置做為起點
    • 在套入.col- 時可記住這些 class prefix ( xs(省略) 、sm、md、lg 、xl )方便做套用
      • 因為 Bootstrap 以行動裝置優先,所以上方在寫雙欄式 column → .col-6 .col-6 縮小至手機版不會自行換行 ( wrap ) 變上下滿版。這時可套用 .col-sm-xx 就會於斷點 575px 自動換行變單欄式上下兩排
<!--1200px 以上雙欄 ,1200px 以下單欄 ↓-->
<div class="row">
    <div class="col-xl-6">
        <div class="box"></div>
    </div>
    <div class="col-xl-6">
        <div class="box"></div>
    </div>
</div>

<!--768px 以上雙欄 ,768px 以下單欄 ↓-->
<div class="row">
    <div class="col-sm-6">
        <div class="box"></div>
    </div>
    <div class="col-sm-6">
        <div class="box"></div>
    </div>
</div>

<!--768px 以上3欄 ,767px 以下雙欄,575px 以下單欄 ↓-->
<div class="row">
    <div class="col-md-3 col-sm-6">
        <div class="box"></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="box"></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="box"></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="box"></div>
    </div>
</div>

//出處為六角學院 ▼
Bootstrap-Media-queries圖01

//Bootstrap 預設為手機為起點,如下方示意圖 XS。 @media(min-width:576px){ … } 表示於575以上會套用此效果-出處為六角學院 ▼
Bootstrap預設斷點示意圖01

// 官網路徑 Layout Grid → Grid option 六角學院統整 ▼
Bootstrap預設斷點示意圖02


資料來源

最後修改日期: 25 2 月, 2020

作者