PJCHENder 未整理筆記

[BS] Bootstrap4 Layout

2017-09-25

[BS] Bootstrap4 Layout

@(CSS)[Bootstrap]

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

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

Grid

自訂 Grid 寬度

1
2
3
4
5
6
7
8
9
10
11
// 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 的使用

1
2
<!--  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 來讓頁面在不同螢幕尺寸時有不同的排版:

1
2
3
4
5
6
7
8
9
<!--
- 當螢幕尺寸為 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}:

1
2
3
4
<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}

1
2
3
4
.row
.col-lg
.col-lg
.col-lg

讓各 item 在所有裝置均等寬

keywords: .col

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

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

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

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

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

keywords: .col-{size}-auto

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

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

在同一 row 中換行

keywords: .w-100

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

1
2
3
4
5
.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 上:

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

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

1
2
// 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 上使用:

1
2
<!--  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
1
2
<!--  html  -->
.container>.row.no-gutters>.col*3

項目排序(Reordering)

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

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

1
2
3
4
5
6
7
8
// 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

1
2
3
4
5
6
7
8
<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

1
2
3
4
<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 來達到推移欄位的效果:

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
// ./bootstrap4/scss/_variables.scss
// grid setting
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
1
2
3
4
5
6
7
8
9
10
11
// ./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%;
}
1
2
3
4
5
6
7
8
9
10
// ./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);
}
1
2
3
4
5
6
7
8
9
// ./bootstrap4/scss/mixins/_grid.scss
// .no-gutters

.no-gutters {
margin-right: 0;
margin-left: 0;
// padding-right: 0;
// padding-left: 0;
}

斷點與 media query

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 預設斷點: 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
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 透過 @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;
}
}

參考

掃描二維條碼,分享此文章