[前端]Bootstrap5 網格系統 (Grid system)

閱讀時間約 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%。

raw-image
raw-image

也就是說,斷點分為五個階段:

  1. 裝置寬度 < 576px:版面隨視窗縮放變化
  2. 768px > 裝置寬度 ≥ 576pxf:會以540px為版面寬度
  3. 992px > 裝置寬度 ≥ 768px:會以720px為版面寬度
  4. 1200px > 裝置寬度 ≥ 992px:會以960px為版面寬度
  5. 裝置寬度 ≥ 1200px:會以1140px為版面寬度

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

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


row ( 列 )

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


col ( 欄位 )

  1. 因為Bootstrap是用水平的padding作為欄與欄之間的左右間隔,所以不要在使用col <div>上用padding-leftpadding-rightmargin-leftmargin-right這些水平推移的 CSS,以免造成破版。
  2. 每一行總共有 12 欄,你可以建立一個任意跨越欄的組合。 Column 代表著要跨越的欄數 (例如:col-4 跨越四欄)。 width 將會以百分比作為基準,如果總和超過 12,就會自動到下一行。
  3. 如想以內容為寬,可使用 div.col-auto 將直接以 content 為寬而不是 flex item 之 width 分配值。
  4. 如果想強迫換行,可使用 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%;
}


盒模型 :

raw-image
  • 口訣 1:.col- 的外層只能是 .row
  • 口訣 2:.row 裡面只能是 .col-
  • 口訣 3:網頁內容與元件請放在 .col- 裡面

常見錯誤,在 .col 增加寬度
常見錯誤,在格線系統調整左右 margin 與 padding

常見觀念:可以加上下 的 margin 與 padding
常見觀念:最外層至少補一個 container
常見觀念:整體格線邏輯是一致

謝謝你的收看✨




參考資料 :

[基礎課程] Bootstrap5 教學(一):安裝、排版、內容


JS讀書筆記30天 - Day23 Bootstrap的格線系統

21 天帶您做出 Bootstrap 5 募資網站

2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!