Bootstrap 4 學習筆記

Save on your hotel - www.hotelscombined.com

這次介紹主要著重在官方文件上的 Layout 、Utilities，整理出改版後不同處及自己的看法提供參考。

 

首先在載入 Bootstrap.js 前，除了原本的 jquery 外，還多了一個 popper.js，jquery 版本需求也從 1.9.0 提升到 3.2.1

popper.js 介紹

 

重構 viewport breakpoints 、 class 命名小變動，官方文件寫的很清楚

 

col 自動填滿剩餘空間
col-{breakpoints}-auto 維持原寬度 (依內容決定)

col-auto
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">1 of 3</div>
        <div class="col-md-auto">Variable width content</div>
        <div class="col col-lg-2">3 of 3</div>
    </div>
    <div class="row">
        <div class="col">1 of 3</div>
        <div class="col-md-auto">Variable width content</div>
        <div class="col col-lg-2">3 of 3</div>
    </div>
</div>

 

 

透過 spacing class 設定元件 margin、padding，能夠搭配不同斷點使用
（個人覺得還蠻方便的 XD）

 

spacing example
CSS
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
.mt-0 {
  margin-top: 0 !important;
}
 
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
 
.py-2 {
  padding-top: ($spacer * .5) !important;
  padding-bottom: ($spacer * .5) !important;
}
 
.p-3 {
  padding: $spacer !important;
}
 
.p-4 {
  padding-right: ($spacer * 1.5) !important;
}
 
.p-5 {
  padding: ($spacer * 3) !important;
}
 
//You can add more sizes by adding entries to the $spacers Sass map variable.

 

利用 Flex 特性重新定義 offsetting columns 方式

Order ：設定 col 排序，一樣能夠搭配 breakpoints 調整

 

Display：淺顯易懂的規則外，還可以搭配斷點使用， RWD 設計更方便啦
但並非所有 display property 都有支援，下方為官方文件說明。

 

 

Colors：預定義顏色在使用上也更多元，附上官方說明

text-{colors} 也可以搭配 bg-{colors}使用

進階一點可以至 _variables.scss 調整、額外定義樣式，客製一個按鈕好快啊

customize colors
Sass
1
2
3
4
5
6
7
8
9
10
11
$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800,
  custom: #4ce39e,
) !default;

customize colors
XHTML
1
2
<a href="#" class="btn btn-custom text-white">more</a>
<div class="bg-custom text-white">custom</div>

 

Responsive breakpoints mixins
這次更貼心幫你把 RWD 常用的 mixins 都幫你寫好了

 

RWD mixins
Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//@media (min-width: 576px)
@include media-breakpoint-up(xs) {
  ...
}
 
//@media (max-width: 575px)
@include media-breakpoint-down(xs) {
  ...
}
 
//@media (min-width: 768px) and (max-width: 1199px)
@include media-breakpoint-between(md, xl) {
  ...
}
 
@include media-breakpoint-only(xs) {
  ...
}

 

Header 及 Loader 常用到的 z-index ，

Bootstrap 中部分元件也有使用到，若跟你的 css 發生衝突可以先參考官方的預設值（官方文件上提到不鼓勵去修改元件設定的預設值）

 

短評及心得：太強大惹

 

圖片來源：http://getbootstrap.com/

參考資料：https://getbootstrap.com/docs/4.0/getting-started/introduction/