Bootstrap 4 Grid System
Bootstrap 4 的 Grid System 是使用的是 CSS flex 來達到排版的效果。
同步發表於HackMD：Bootstrap 4 Grid System 學習紀錄
目錄 Bootstrap 4 Grid System
一、響應式斷點
1-1 variables
Bootstrap 4 預設的斷點如下，我們可以透過修改 scss 檔案來，新增或刪除斷點。
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
- Extra small devices (portrait phones, less than 576px)
- Small devices (landscape phones, 576px and up)
- Medium devices (tablets, 768px and up)
- Large devices (desktops, 992px and up)
- Extra large devices (large desktops, 1200px and up)
1-2 mixins
使用最小和最大中斷點寬度，也有一些 media queries 和 mixins 用於特定螢幕尺寸的其中一段。
/* @media (max-width: 575.98px) */
@include media-breakpoint-down(xs) { ... }
/* @media (min-width: 576px) */
@include media-breakpoint-up(sm) { ... }
/* @media (min-width: 576px) and (max-width: 1199.98px) */
@include media-breakpoint-between(sm,xl) { ... }
/* @media (min-width: 576px) */
@include media-breakpoint-between(sm,lg) { ... }
/* @media (min-width: 576px) and (max-width: 767.98px) */
@include media-breakpoint-only(sm) { ... }
二、Grid System
2-1 基本結構
<!-- HTML -->
<div class="container">
<div class="row">
<div class="col">
<!-- 內容 -->
</div>
</div>
</div>
- 透過
container提供基本的方式來置中你的內容，使用.container當你的容器寬度是固定的；如果想要滿版寬，則使用.container-fluid。 .row是列的意思，用來包住裡面的.col（欄）以確保每欄可以排列適當。- 內容只能位於
.col內，.col只能是.row的直接子類。
2-2 variables
預設欄位數與欄間距如下，我們可以透過修改 scss 檔案來，自訂大小。
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
每個斷點間 .container 的最大寬度，我們可以透過修改 scss 檔案來，自訂大小，
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
注意 最大寬度要小於或等於斷點，不可大於斷點數值。
2-3 容器 container
.container 的預設樣式如下：
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px; /* $grid-gutter-width */
padding-left: 15px; /* $grid-gutter-width */
width: 100%;
max-width: 1140px; /* 隨螢幕尺寸而變 */
}
margin-right: auto和margin-left: auto負責水平置中。- 由於有
padding-right和padding-left實際.container內容大小為max-width減去$grid-gutter-width，所以實際上內容的寬度是1110px。
2-4 列 row
.row 的預設樣式如下：
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px; /* $grid-gutter-width */
margin-left: -15px; /* $grid-gutter-width */
}
- 透過
.row會讓裡面的內容以flex方式排版。 margin-right和margin-left將內容推回.container的max-width，所以內容的寬度變回1140px。
2-5 欄 col
.col 的預設樣式如下：
.col {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
width: 100%;
min-height: 1px;
padding-right: 15px; /* $grid-gutter-width */
padding-left: 15px; /* $grid-gutter-width */
}
- 由於有
padding-right和padding-left所以內容的寬度又變回1110px。
1. 指定 column 的寬度
由於使用的是 flex 來排版，預設每個 .col 是等寬的。
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
指定 .col 的寬度大小，每行超過預設的 12 欄就會自動換行。
<div class="row">
<div class="col-4"></div>
<div class="col-8"></div>
<div class="col-3"></div>
</div>
2. 在不同螢幕尺寸上有不同寬度
.col-<size>-<value>
<size> 設備尺寸
<value> 欄位
- Extra small（
< 576px）：.col- - Small（
≥ 576px）：.col-sm- - Extra small（
≥ 768px）：.col-md- - Large（
≥ 992px）：.col-lg- - Extra large（
≥ 1200px）：.col-xl-
Bootstrap 4 的所有響應斷點樣式都是由小到大 @include media-breakpoint-up() { ... }。
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-3"></div>
<div class="col-12 col-sm-6 col-md-3"></div>
<div class="col-12 col-sm-6 col-md-3"></div>
<div class="col-12 col-sm-6 col-md-3"></div>
</div>
- 欄位預設以 12 顯示
- 當螢幕尺寸為
sm以上時欄位以 6 來顯示 - 當螢幕尺寸為
md以上時欄位以 3 來顯示
2-6 間距 gutters
在預設的情況下，每一個欄之間都會有間隙，透過在 .row 上加上 .no-gutters 可以去除：
<div class="row no-gutters">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
如果要消除 .container 的間隙可以加上 .px-0。
<div class="container px-0">
<div class="row no-gutters">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
2-7 欄的推移
.offset-<size>-<value>
<size> 設備尺寸
<value> 欄位
使用 .offset- 增加欄的左邊距：
<div class="row no-gutters">
<div class="col-3 offset-3"></div>
<div class="col-3"></div>
<div class="col-3 offset-3"></div>
<div class="col-3 offset-6"></div>
<div class="col-3"></div>
</div>
三、通用類別
3-1 間隔 Spacing
Spacing 包含了 margin 與 padding
1. variables
我們可以透過修改 scss 檔案來，新增或刪除數值。
$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
(
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
),
$spacers
);
2. 符號
固定格式：
<property><sides>-<size>-<value>
屬性 property：
.m設定margin.p設定padding
邊緣 sides：
t設定 topb設定 bottoml設定 leftr設定 rightx設定水平 left + righty設定垂直 top + bottom- 無給值則設定四個邊緣
設備尺寸 size：
與之前樣式設定相同不再說明。
數值 value：
0樣式值為 0auto樣式值為 auto1~5可透過變數自訂修改數值與新增刪減。
3-2 Flex
Flex 通用類別用於管理網格欄的排版、對齊和特定尺寸。
詳細可參考 Bootstrap4 通用類別 - Flex。
四、工具
4-1 bootstrap cdn
4-2 Bootstrap 4 Grid System (Flex)
Bootstrap 4 Grid System (Flex)
Bootstrap v4.1.2 grid system and layout utilities.
