[BS4] Bootstrap 4 Layout

在 Bootstrap4 的 Layout 使用的是 CSS flexbox 來達到排版的效果，因此建議可以先瞭解 flexbox 屬性的，flex-container 和 flex-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）

Size	BreakPoint	Class 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;
  }
}

參考

• Bootstrap Layout