［前端］Bootstrap5 網格系統 (Grid system)

發佈於前端開發

2023/10/16閱讀時間約 8 分鐘

為甚麼寫這邊文章?

這是 2022 年參加六角學院舉辦的公益程式體驗營而生產的系列筆記，整理課程講義、上課筆記與小組討論等文件，內容多為老師與各路大神的精華，只是透過自己的分類方式再次整理，方便日後有需要時快速回顧與應用。

必須要先認識的排版三劍客

.container (容器)

.row (列)

.col 1~12 (欄位)

階層關係 .container>.row>.col

點擊後會連結到 Bootstrap 的官方介紹頁面，以下會針對這三者做介紹

container ( 容器 )

可以視為包住所有網頁內容的最外層容器，容器本身主要作用是限制你的內容總寬度，並將內容保持水平置中 (margin auto)，這個容器自帶響應式功能，不會跑版 (出現 X 軸)，同時左右兩側為 gutter 網格間距 (padding 0.75rem)，因此即使是 100% 的寬度下左右還是會留有些許間隙。

    padding-right: 15px;
    padding-left: 15px;

Container 分為 Container 與 Container-fluid 兩種，差別在於有沒有設定最大寬度 (max-width) 。

Container 在每一個響應式斷點都會設置一個 max-width

Container-fluid 沒有設定 max-width ，所有斷點都是 width: 100%

但在實務上很常見的情境是，在比較小的裝置上 ( 例如手機、平板或是某些尺寸較小的桌機 ) ，因為版面本身不大，希望內容是以 100% 的寬度呈現，但是現在寬度大的螢幕也越來越多，若是維持寬度 100% ，那在視覺體驗上會比較不好，因為使用者的瀏覽寬度變得很大，此時會希望將內容固定一個最大寬度置中，就可以結合 Container 與 Container-fluid 兩者，使用.container-{breakpoint}, 直到指定斷點之前，都會是 width: 100%。

也就是說，斷點分為五個階段：

裝置寬度 < 576px：版面隨視窗縮放變化
768px > 裝置寬度 ≥ 576pxf：會以540px為版面寬度
992px > 裝置寬度 ≥ 768px：會以720px為版面寬度
1200px > 裝置寬度 ≥ 992px：會以960px為版面寬度
裝置寬度 ≥ 1200px：會以1140px為版面寬度

進階延伸 : 想自訂義容器的寬度，可以通過修改 Sass 原始碼（在 _variables.scss 中找到）來自定義這些預定義的容器類別：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

row ( 列 )

row 會有一個負值的外距 (margin)，剛好與 col 的內距 (padding) 相消，而 col 有自己的 gutter 網格間距 (padding 0.75rem)(可看下方盒模型圖)
row 為 flex 設計，因此可輕易添加 flex 屬性進行調整 col 的排列方式。

col ( 欄位 )

因為Bootstrap是用水平的padding作為欄與欄之間的左右間隔，所以不要在使用col 的<div>上用padding-left、padding-right、margin-left、margin-right這些水平推移的 CSS，以免造成破版。
每一行總共有 12 欄，你可以建立一個任意跨越欄的組合。 Column 代表著要跨越的欄數 (例如：col-4 跨越四欄)。 width 將會以百分比作為基準，如果總和超過 12，就會自動到下一行。
如想以內容為寬，可使用 div.col-auto 將直接以 content 為寬而不是 flex item 之 width 分配值。
如果想強迫換行，可使用 div.w-100 達到類似 <br> 的效果（因無內容而看不到），但實際上建議以第二組 row 設計排列。

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

這三者的 CSS 與盒模型相互對照

css:

@media (min-width: 1400px)
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;

}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.col {
    flex: 1 0 0%;
}