Skip to main content

[BS4] Bootstrap 4 Layout

在 Bootstrap4 的 Layout 使用的是 CSS flexbox 來達到排版的效果,因此建議可以先瞭解 flexbox 屬性的,flex-containerflex-items 的意義,將能夠更快理解 Bootstrap4。

以下內容整理自 Bootstrap 官方網站 Grid System。羅列我認為幾個比較重要的概念,如果時間允許的話,建議還是閱讀官方文件Bootstrap 4 Gird Examples @ official

Grid#

自訂 Grid 寬度#

// custom col-*// set the width of flex-basis and max-width.col-custom {  flex: 0 0 25%;  max-width: 25%;  position: relative;  width: 100%;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}

Grid Column 的使用#

<!--  html  -->.container>.row>.col-sm{lorem}*3
  • Container 提供基本的方式來置中你的內容,使用 .container 當你的容器寬度是固定的;如果想要滿版寬,則使用.container-fluid
  • Rows 是列的意思,用來包住裡面的 Columns 以確保每欄可以排列適當。
  • 內容則是放在 Columns 裡面,也就是 .row>.col-sm{內容} 這樣的結構
  • 網格等級基於 min-width,意味著它們適用於一個大於等於它的寬度(例如,.col-sm-4 適用於小型、中型、大型、和超大型設備)。
  • 預設共有 12 個柵格
  • 一共可以設定 5 種不同的斷點(breakpoints)
SizeBreakPointClass Prefix
Extra small< 576px.col-
Small≥ 576px.col-sm-
Medium≥ 768px.col-md-
Large≥ 992px.col-lg-
Extra large≥ 1200px.col-xl-

在不同螢幕尺寸上有不同寬度#

keywords: .col-{size}-{number}#

我們可以在同一個 column 上給多的 class 來讓頁面在不同螢幕尺寸時有不同的排版:

<!--  - 當螢幕尺寸為 md 以上時會有 8:4 來顯示  - 當螢幕尺寸為 sm 時會以 4:8 來顯示  - 當螢幕尺寸小於 sm 時會換行顯示--><div class="row">  <div class="col-sm-4 col-md-8">.col-sm-4 .col-md-8</div>  <div class="col-sm-8 col-md-4">.col-sm-8 .col-md-4</div></div>

所有裝置都使用相同的 column 的寬度#

keywords: .col-{number}#

如果你希望能夠自行設定寬度,而且套用在所有尺寸的話,可以使用 .col-{number}:

<div class="row">  <div class="col-8">col-8</div>  <div class="col-4">col-4</div></div>

在特定裝置尺寸以上使用等寬,其餘垂直並列#

keywords: .col-{size}#

如果你希望在 lg 以上時套用 flex 讓項目等寬水平排列,當在 lg 以下時,則垂直排列的話,可以使用 .col-{size}

.row  .col-lg  .col-lg  .col-lg

讓各 item 在所有裝置均等寬#

keywords: .col#

如果希望 .row 中的每一個 col 都等寬的話,可以不用加上數字,每個 col 會自動等寬(在所有的螢幕尺寸均等寬):

// pug.container>.row>.col*4

其中一個 item 固定寬度,其餘等寬#

// pug.container  .row    .col    .col-6 這個項目永遠會佔整個 row 的一半,其餘兩個等寬縮放    .col

讓 item 隨著內容(content)變動寬度#

keywords: .col-{size}-auto#

使用 col-{size}-auto 可以讓 column 的寬度隨著該 item 內的內容而改變,這時候該 .row 可能不會撐到滿版,因此導致向左靠,因此可以搭配上 horizontal alignment 來指定該 row 對齊的方式。

// pug// .col-sm-auto 會隨著內容沿展,另外兩邊則是會自動縮放.container  .row        .col        .col-sm-auto Content Width        .col

在同一 row 中換行#

keywords: .w-100#

當我們想要在 .row 裡面達到換行效果的時候,我們可以在一個空的 column 上使用 .w-100

.container  .row    .col    .w-100    .col

Equal-width Multi-row @ Bootstrap

排序與對齊(alignment)#

垂直對齊(vertical alignment)#

在 row 上使用#
keywords: align-items-start, align-items-center, align-items-end#

這些關鍵字可以加在 .row 上:

// pug.container>.row.align-items-start>.col{one of three columns}*3
在 column 上使用#
keywords: align-self-start, align-self-center, align-self-end#

這些關鍵字可以在 .col 上使用:

// pug.container>.row>.col.align-self-start+.col.align-self-center+.col.align-self-end

水平對齊(horizontal alignment)#

keywords: justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between#

這些關鍵字可以在 .row 上使用:

<!--  html  -->.container>.row.justify-content-start>.col*3

取消間距(gutters)#

keywords: .no-gutters#

在預設的情況下,每一個欄(column)之間都會有間隙(gutter),透過在 .row 上加上 .no-gutters 可以去除:

  • 欄和欄之間的 padding,預設是padding: 0 15px
  • 每一 row 外圍包住的 margin, 預設是 margin: 0 -15px
<!--  html  -->.container>.row.no-gutters>.col*3

項目排序(Reordering)#

keywords: order-{size}-{order}, order-{order}#

當小於 lg 的時候,會垂直排列(.col-lg),且順序是 21435 ;當大於 lg 時將會依照 col-{size}-{order} 來排序,因此順去會是 12345

// jade.container    .row        .col-lg.order-lg-2 2        .col-lg.order-lg-1 1        .col-lg.order-lg-4 4        .col-lg.order-lg-3 3        .col-lg.order-lg-5 5

其他#

使用 clearfix#

keywords: .clearfix#

我們可以在 row 裡面使用 .clearfix

<div class="row">  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->  <div class="clearfix"></div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div></div>

欄位推移(offsetting columns)#

在 Bootstrap 4 中,要達到欄位推移的效果有兩種,一種是使用 offset

<div class="row">  <div class="col-md-4">.col-md-4</div>  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div></div>

注意:Bootstrap 4 beta1 中沒有 offset,但是到了 Bootstrap 4 beta2 中又把 offset 加回來。

另一種則是使用 margin utilities,例如 .mr-auto, .mr-md-auto, .ml-auto 來達到推移欄位的效果:

<div class="row">  <div class="col-md-4">.col-md-4</div>  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div></div><div class="row">  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div></div><div class="row">  <div class="col-auto mr-auto">.col-auto .mr-auto</div>  <div class="col-auto">.col-auto</div></div>

深入 Bootstrap#

// ./bootstrap4/scss/_variables.scss// grid setting$grid-columns: 12 !default;$grid-gutter-width: 30px !default;
// ./bootstrap4/scss/mixins/_grid.scss// .container$grid-gutter-width: 30px !default;
.container {  margin-right: auto;  margin-left: auto;  padding-right: ($grid-gutter-width / 2);  padding-left: ($grid-gutter-width / 2);  width: 100%;}
// ./bootstrap4/scss/mixins/_grid.scss// .row$grid-gutter-width: 30px !default;
.row {  display: flex;  flex-wrap: wrap;  margin-right: ($grid-gutter-width / -2);  margin-left: ($grid-gutter-width / -2);}
// ./bootstrap4/scss/mixins/_grid.scss// .no-gutters
.no-gutters {  margin-right: 0;  margin-left: 0;  // padding-right: 0;  // padding-left: 0;}

斷點與 media query#

// 預設斷點: 576px, 768px, 992px, 1200px$grid-breakpoints: (  xs: 0,  // Extra small screen / phone  sm: 576px,  // Small screen / phone  md: 768px,  // Medium screen / tablet  lg: 992px,  // Large screen / desktop  xl: 1200px // Extra large screen / wide desktop,,,,);
// 預設容器寬度$container-max-widths: (  sm: 540px,  md: 720px,  lg: 960px,  xl: 1140px,);
// 透過 @include 使用斷點
// 使用 min-with,當螢幕寬度超過 ... 時會套用@include media-breakpoint-up(xs) { ... }@include media-breakpoint-up(sm) { ... }@include media-breakpoint-up(md) { ... }@include media-breakpoint-up(lg) { ... }@include media-breakpoint-up(xl) { ... }
// 使用 max-width,當螢幕寬度小於 ... 時會套用@include media-breakpoint-down(xs) { ... }@include media-breakpoint-down(sm) { ... }@include media-breakpoint-down(md) { ... }@include media-breakpoint-down(lg) { ... }
// 同時使用 min-width 和 max-width,當螢幕寬度介於 ... 時會套用@include media-breakpoint-only(xs) { ... }@include media-breakpoint-only(sm) { ... }@include media-breakpoint-only(md) { ... }@include media-breakpoint-only(lg) { ... }@include media-breakpoint-only(xl) { ... }
// 橫跨兩個不同 size 時套用@include media-breakpoint-between(md, xl) { ... }
// 使用範例@include media-breakpoint-up(sm) {  .some-class {    display: block;  }}

參考#