這次介紹主要著重在官方文件上的 Layout 、Utilities,整理出改版後不同處及自己的看法提供參考。
首先在載入 Bootstrap.js 前,除了原本的 jquery 外,還多了一個 popper.js,jquery 版本需求也從 1.9.0 提升到 3.2.1
重構 viewport breakpoints 、 class 命名小變動,官方文件寫的很清楚
col 自動填滿剩餘空間
col-{breakpoints}-auto 維持原寬度 (依內容決定)
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)
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 調整、額外定義樣式,客製一個按鈕好快啊
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; |
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 都幫你寫好了
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 發生衝突可以先參考官方的預設值(官方文件上提到不鼓勵去修改元件設定的預設值)
短評及心得:太強大惹
參考資料:https://getbootstrap.com/docs/4.0/getting-started/introduction/