Bootstrap 4 學習筆記

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

 

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

popper.js 介紹

 

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

 

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

<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）

 

.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 調整、額外定義樣式，客製一個按鈕好快啊

$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800,
  custom: #4ce39e,
) !default;

<a href="#" class="btn btn-custom text-white">more</a>
<div class="bg-custom text-white">custom</div>

 

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

 

//@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/