Bootstrap – Larry的午茶時光 https://blog.yuyansoftware.com.tw Tue, 21 Jan 2025 10:02:41 +0000 zh-TW hourly 1 https://wordpress.org/?v=7.0.2 https://blog.yuyansoftware.com.tw/wp-content/uploads/2022/10/favicon-45x45.png Bootstrap – Larry的午茶時光 https://blog.yuyansoftware.com.tw 32 32 Bootstrap 5.3 主要更新：深色模式 Dark mode，自訂 color mode，翻新調色盤色票，新的連結樣式 https://blog.yuyansoftware.com.tw/2023/06/bootstrap-5-3-features/ Wed, 28 Jun 2023 09:40:44 +0000 https://blog.yuyansoftware.com.tw/?p=15730 https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/
前幾個星期 (2023/5/30) Bootstrap 5.3 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

撰文的現在是2023年6月。可以看到每一個 minor version 的更新，就是半年～1年；major version 的更新，是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了，時間真的過得太快。

以下是 Bootstrap 5.3 的主要更新：

深色模式 Dark mode，自訂新的 color mode

Bootstrap 核心已經重新設計，以支援 Dark mode。並新增了關於 Color Mode 的文件 (5.2 沒有)
https://getbootstrap.com/docs/5.3/customize/color-modes/

Bootstrap 5.3 不但支援 Dark mode，也允許開發者設計自己的 color mode。語法上，在一開始的 html tag 下 data-bs-theme，例如

<html lang="en" data-bs-theme="dark">
  <!-- ... -->
</html>

你也可以在特定的元件下 color mode，例如 dropdown menu

<div class="dropdown" data-bs-theme="dark">
  <!-- ... -->
</div>

這樣無論上方 html tag 的 color mode，你的 dropdown menu 就會切換成 Dark mode。

當然，如果你想要本來「亮底」的樣式，設定 data-bs-theme="light"，或是將來你自己客製的樣式。

Light / Dark mode 都定義在 scss/_root.scss，包含如果你將來要新增自己的 color mode，也是定義在這支檔案。

目前 scss/_root.scss 定義的是 CSS 變數，你也可以在其中指定特定元件的樣式。例如

@include color-mode(dark) {
  ...
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
  ...
}

另外，如果你重設這個 SCSS 變數

$color-mode-type: media-query; // default 是 "data"

上面那段 SCSS 會編譯成

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

這樣就不是 data-bs-theme 設定 scope 的概念，而是 media query prefers-color-scheme，隨使用者作業系統調整亮/暗模式。

有一些 Dark mode 的 CSS 變數是定義在 scss/_variables-dark.scss。當然，你可以修改再重新編譯。如果你要新增 color mode，官方文件也建議新增新的 scss 檔案，例如 scss/_variables-blue.scss。

scss/_variables-dark.scss 中大量的使用 Bootstrap 內建的 SCSS function shade-color()、tint-color()，也就是拿原始的調色盤色票去做深淺變化。如果你要整個換色系的話，修改原始色票再重新編譯，scss/_variables-dark.scss 這支檔案就會自動幫你做深淺變化了。

翻新調色盤色票 Color Palette

文件也做大幅更新，第一節 Colors 是 5.3 新增的。
https://getbootstrap.com/docs/5.3/customize/color/

新增 secondary、tertiary 兩個色票。舉例來說，Bootstrap 5.3 Light mode 中這幾個變數 (數值是 Bootstrap 5.3 定義的，之後版本不一定會改)

--bs-body-color-rgb: 33,37,41;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-tertiary-color: rgba(33, 37, 41, 0.5);

因為是 Light mode，背景是白的，隨著 alpha 值越透明，tertiary 文字顏色最淡。

Bootstrap 5.3 Dark mode 中這幾個變數的數值

--bs-body-color-rgb: 173,181,189;
--bs-secondary-color: rgba(173, 181, 189, 0.75);
--bs-tertiary-color: rgba(173, 181, 189, 0.5);

因為是 Dark mode，背景是黑的，隨著 alpha 值越透明，也就是 tertiary 文字顏色最深。

進一步說明，以目前 (2023年6月) Bootstrap 官網文件來說，如果是 Dark mode，一般文字顏色就是 --bs-body-color，secondary / tertiary 多了兩個不同灰階 (顏色更深) 的選擇。

.bg-body-secondary、.bg-body-tertiary 就不是深淺灰階的概念，是由 Bootstrap 直接定義值，用來搭配 --bs-secondary-color、--bs-tertiary-color 的顏色。 

另外還新增 {color}-bg-subtle、{color}-border-subtle、{color}-text-emphasis 這幾個顏色。

subtle 這邊指的是暗的、淡的。比如說 .bg-success 是軟體操作成功的綠色，.bg-success-subtle 在 Light mode 就是淡綠色，在 Dark mode 就是墨綠色。

https://getbootstrap.com/docs/5.3/customize/color/
文件也列出 Bootstrap 所有可用的色票，包含紅橙黃綠藍靛紫，以及各自的灰階，如果要很快的找一個色票使用，可以參考這裡。

新的 Link 連結樣式

新的 Link 文件 (Bootstrap 5.2 沒有)，包含透明度 opacity，底線 underline 等樣式。
https://getbootstrap.com/docs/5.3/utilities/link/

新的 Icon Link 文件 (Bootstrap 5.2 沒有)
https://getbootstrap.com/docs/5.3/helpers/icon-link/

可以輕易的在連結的前或後，加上小圖。如果再加上 css .icon-link-hover，滑鼠 hover 時小圖會有小動畫。

<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg>...</svg>
</a>

新的 css .focus-ring，讓元件在 :focus 狀態下，不要顯示預設的 outline，而是變成 box-shadow，這樣可以更好的讓開發者客製化。

.focus-ring 也是 Bootstrap 5.3 的新文件
https://getbootstrap.com/docs/5.3/helpers/focus-ring/

總結

這次 Bootstrap 5.3 更新主要是在深色模式 Dark mode，還有各種色系、色票的更新，並沒有大的架構或排版上的更新。

Dark mode 的確是近幾年的 CSS 主題：Windows / Mac / Android / iPhone / iPad 作業系統都支援 Dark mode，當然細緻一點的 web app，應該也要支援 Dark mode。

調色盤色票的更新，則是讓我們再 review 一次，未來可不可用 Bootstrap 內建的色票架構。

]]> Bootstrap 5.2 主要更新：幾乎全部元件都用 CSS 變數實作，新的 CSS build sequence https://blog.yuyansoftware.com.tw/2022/07/bootstrap-5-2-features/ Fri, 29 Jul 2022 03:36:00 +0000 https://blog.yuyansoftware.com.tw/?p=11285 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/
前幾天 (2022/7/19) Bootstrap 5.2 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

撰文的現在是2022年7月。可以看到每一個 Bootstrap minor version 的更新，就是半年～1年。更甭論 major version 的更新是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了。

以下是 Bootstrap 5.2 的主要更新：

官網首頁重新設計，以及文件網頁優化

重新設計了 Bootstrap 官網首頁，文件網頁也有多處優化，包含左側 menu 的重組，文件搜尋的使用體驗，等等。

更新按鈕樣式

border-radius 調大了一點，雖然按鈕大小跟之前一樣，看起來好像 padding 變小而文字更突出的感覺。

幾乎全部元件都用 CSS 變數 (custom property) 實作

比 Bootstrap 5.1 更多的 CSS 變數實作，幾乎全部元件都是。

新的 _maps.scss

有一個新的 scss/_maps.scss (Bootstrap 5.1 沒有)。_maps.scss 將一些 Sass map 從 _variables.scss 抽出。修正對原始 Sass map 修改時，基於原始 Sass map 擴展的 map，不會繼承這些修改的問題。

舉例來說 $utilities-colors 基於 $theme-colors 擴展。因為 Bootstrap 5.1 $utilities-colors 在 _variables.scss 就定義生成了，所以在

@import "variables";

之後對 $theme-colors 的修改，都不會繼承到 $utilities-colors (它已經生成了)。

而 Bootstrap 5.2 $utilities-colors 移到 _map.scss，整個架構上會比較清楚，你的 Bootstrap CSS build 順序可以參考：

// Functions come first
@import "functions";

// Your optional variable overrides here

// Variables come next
@import "variables";

// Your optional Sass map overrides here

// Third the default maps
@import "maps";

// The rest
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";

新的 CSS helpers and utilities

新的 .text-bg-{color} helper，使用 .text-bg-{color} 可以直接設定 background-color 和文字顏色，而不是兩個 css class 個別設定。

font-weight 方面新增 .fw-semibold (font weight 600)。border-radius 方面新增 .rounded-4 (border radius 1rem) .rounded-5 (border radius 2rem)

Responsive offcanvas

Bootstrap 5.2 可以使用 .offcanvas-{sm|md|lg|xl|xxl}，例如 .offcanvas-lg，在 viewport 大於 lg breakpoint 時，已經顯示的 offcanvas 會隱藏。

Bootstrap 5.0、5.1 就開始使用的 .offcanvas class 仍然存在，使用 .offcanvas 顯示就不隨 viewport 大小而改變。

compile CSS Grid 版本時可以包含 container class

scss/_variables.scss 新增了一個變數 $enable-container-classes，如果是 true，當 compile 成 CSS Grid 版本，container class 仍然會 compile 進去 (5.1 之前不會)。

總結

Bootstrap 5.2 沒有大的架構更新，就是多了一些 CSS helper class。CSS 變數的使用幾乎遍及所有元件，所以大家要知道 CSS 變數的使用是一個趨勢。也要稍微知道一下新的 _maps.scss，它的邏輯是什麼，Bootstrap 5.2 CSS build 的順序是什麼。

]]> Bootstrap 5.1 主要更新：開始使用 CSS Grid 實作 grid system，新的元件，更多的 CSS 變數 (custom property) https://blog.yuyansoftware.com.tw/2021/08/bootstrap-5-1-css-grid-custom-property/ Tue, 24 Aug 2021 07:46:34 +0000 https://blog.yuyansoftware.com.tw/?p=8377 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/
前幾天 (2021年 8/4) Bootstrap 5.1 釋出了。每次看到新的 Bootstrap 版本釋出，都會有感於時間過的真的飛快。

上一篇我關於 Bootstrap 5 的文章是在去年底 (2020年底)，一轉眼 2021 年大半年又過了。

以下是 Bootstrap 5.1 的主要更新：

使用 CSS Grid 實作 grid system

使用 CSS Grid 實作 grid system 是 Bootstrap 5.1 的主要更新。很多專家認為 CSS Grid 是繼 Flexbox 後，近代 CSS 的另一個里程碑。Bootstrap 4 開始使用 Flexbox 實作 grid system，Bootstrap 5.1 預設也是 Flexbox 實作，但可以切換為 CSS Grid 實作。

同時也釋出了新的 CSS Grid 文件，5.0 還沒有這頁文件，從 5.1 開始。
https://getbootstrap.com/docs/5.1/layout/css-grid/

Bootstrap 5.1 如何切換 Flexbox 實作到 CSS Grid 實作？找到檔案位置 /bootstrap-5.1.0/scss/_variables.scss, 設定這兩個變數

$enable-grid-classes: false; 
$enable-cssgrid: true;

改好了重新 compile SCSS。Bootstrap 5.0 的 _variables.scss 沒有 $enable-cssgrid 這個變數，所以可以確定是 5.1 引入的。

一樣是 Bootstrap Grid System row/col 的架構，只是將 row 換成 grid，col 換成 g-col。例如這樣三個 div 分別在 12 份中佔有一份、兩份、和三份。
.grid 設定 display:grid，g-col-* 設定 grid-column

<div class="grid">
  <div class="g-col-1">
    Column
  </div>
  <div class="g-col-2">
    Column
  </div>
  <div class="g-col-3">
    Column
  </div>
</div>

.grid 同時定義了 CSS gap。相較於用 padding/margin 去做 gutter，gap 是新一代做 gutter 的方式。如果仔細去看，每個 g-col 本身沒有 padding/margin，但卻能彼此分開，這不符合 CSS box model 阿？larry 看到一種說法，gutter 如字面翻譯是水溝，在 CSS Grid 裡面 gutter 本身就是一種物件，會佔面積。而 gap 只是定義了 gutter 的寬度。

下方是 Bootstrap CSS Grid 文件中的 sample code。這個 sample 做了一個 9×9 的 grid，第一個 child 是第一行第一個，第二個 child 是第二行第二個，第三個 child 是第三行第三個。以賓果遊戲來說，是左上到右下連線的圖形。

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

從這個 sample 我們可以看出

  1. Bootstrap 官方鼓勵 inline CSS custom property 的使用。inline 指定 --bs-rows, --bs-columns 是不是更靈活，redundant code 更少一些。
  2. g-start-* 可以指定水平開頭的位置，inline CSS grid-row 可以指定是屬於第幾行。

Offcanvas in navbar (new component)

Offcanvas 在 Bootstrap 5.0 已經新增了，是一個新的元件。觸發時左、右、上、下其中一側彈出視窗，按按鈕或按叉結束時再縮回原處。

Bootstrap 5.1 將 Offcanvas 和 navbar 做整合。尤其手機版的 navbar 通常會縮成一個 toggle button，點了之後可以指定 Offcanvas 從哪個方向彈出，navbar 的內容可以放在 Offcanvas 裡面。

Placeholder (new component)

將還沒 load 好的文字，用銀色區塊替代。例如 Facebook，早就是這樣做 placeholder。

在要顯示銀色區塊的 DOM (不一定是銀色，可以自行設定 background-color)，加上 CSS class .placeholder，DOM 的寬度要設定一下。container 可以加上 CSS class .placeholder-glow 或 .placeholder-wave，讓 placeholder 區塊有小小的水波閃爍。

.bg-* & .text-* utility 的實作變數化

Bootstrap 5.0 中 background color utility 實作如下 (text color utility 類似，僅用 background 舉例)

.bg-success {
  background-color: #198754 !important;
}

Bootstrap 5.1 改為

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

這樣如果你要微調 .bg-success 的顏色，在你的專案裡重新設定 --bs-success-rgb 就好了。未來 Bootstrap 會接著把其他 utility 也變數化。Bootstrap 的演進有這樣的味道：Bootstrap 只管架構，顏色等屬性由 CSS 變數設定。對軟體工程有研究的讀者應該知道，資料 / 邏輯分離的概念。

總結

Bootstrap 5.1 開始使用 CSS Grid 實作 grid system，而且又新增了很多元件。從 Bootstrap 的發展和文件可以看出來，Bootstrap 非常大量的使用 CSS custom property，同時也鼓勵開發者在專案裡使用 CSS custom property 做出變化。CSS Grid、Bootstrap 的新元件、CSS custom property 的使用，都是很值得參考的。

]]> Bootstrap 5 主要更新：不再相依 jQuery，新增 Utilities API，使用 CSS custom properties https://blog.yuyansoftware.com.tw/2020/12/bootstrap-5-features/ Fri, 11 Dec 2020 11:44:54 +0000 https://blog.yuyansoftware.com.tw/?p=5820 圖片來源 Bootstrap官方部落格

https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/
Bootstrap 5 beta 幾天前發佈了，時間過得真的很快，Bootstrap 4 beta 發佈時 (2017 年 8 月) 我有一篇文章 Bootstrap 4 主要更新：Grid System、CSS

2018 年我還有一篇關於 Bootstrap 4 Flexbox 的文章 Bootstrap 4 Flex

本篇會走一遍 Bootstrap 5 的主要更新，懂前端工程的讀者，可以看看有沒有東西是值得拿來使用，或進一步再去研讀的。以下大致是從 Bootstrap 5 比較重要的部分，往比較 minor 的部分排序。

移除 jQuery 的相依性

移除對 library 的相依性就軟體工程來說本來就是好的，開發者也不用在引入 Bootstrap 前先引入 jQuery，可能還會有版本相容的問題。以整個專案來說，應該也會更輕量，而且因為使用原生的 JavaScript，效能應該也應該會更好。

Utilities API (with the state option)

https://getbootstrap.com/docs/5.0/utilities/api/
Utilities API 是基於 Sass maps 的技術，可以先看一下 Sass maps 的官方文件
https://sass-lang.com/documentation/values/maps

基本上 Sass maps 就是一連串的 key / value pairs，用小括號括起來。調用端可以用 map.get function 去把指定變數裡的指定的 key 的值讀取出來，詳細寫法跟變化可以參考上方 Sass maps 的官方文件。使用 Sass maps 可以把 CSS 的設定組織化。

Bootstrap 5 基於 Sass maps 的架構衍伸出一套讓開發者可以自行設定 utility classes，就是 Utilities API，而且 Bootstrap 5 預設的 utility classes 也是用 Utilities API 實作的。這次 beta release 特別提到 Utilities API 加入了 state option，可以指定 pseudo-class 像是 hover、focus 等。

Utilities API 的主要功能在產生同樣屬性，不同數值的 utility classes。larry 覺得 Sass maps 和 Bootstrap 5 Utilities API 都是滿值得參考的。

使用 CSS custom properties 實作底層 CSS

CSS custom properties 讓原生 CSS 可以支援變數，而不需要 Sass 或其他語言來協助。變數要以 – – (double dash) 開頭，用 var function 讀取，例如

--my-text-color: #554433;
color: var(--my-text-color);

如果要切換樣式，可以這樣寫

.my-text-style1 {
  --my-text-color: #554433;
}
.my-text-style2 {
  --my-text-color: #998877;
}
...
color: var(--my-text-color); // 這一行不用動

而不是

.my-text-style1 {
  color: #554433;
}
.my-text-style2 {
  color: #998877;
}

所以同一架構不同樣式，就下不同的 CSS 變數就好，而不是重寫 CSS，這樣管理或擴充樣式的話都會容易而且輕量很多。實際 Bootstrap 5 底層是怎麼使用，有興趣的讀者可以再去研究看看。

RTL (right-to-left text) 右到左排序的文字

https://getbootstrap.com/docs/5.0/getting-started/rtl/
就是橫式的文字由右到左排序 (一般我們習慣網頁文字是由左到右排序)。要使用 RTL，要先在 <html> 上設定 dir=”rtl” 還有 lang 兩個屬性。詳細的寫法參考上方官方文件。

重新命名某些 CSS Class，用 start / end 取代 left / right

為了支援 RTL，帶有 left / right 意涵的 CSS class，例如 ml-3 代表 margin-left，將會用 start / end 的邏輯來取代。這樣當換文字方向時，不用整篇 css 重改一遍。例如在 Bootstrap 5 請使用 ms-3 (s means start) 代替 ml-3，在 LTR (左到右) 文本時，ms-3 是 margin-left，但在 RTL (右到左) 文本時，ms-3 是 margin-right。

加強了 Grid System

新增 xxl 的 breakpoint，gutter class (cell 間距) 的設定，等等。

新樣式的輸入框，選擇按鈕

包含 Floating labels，New file input，checkbox，radio buttons，switch buttons 等等。

全新的 Customize 文件網頁

https://getbootstrap.com/docs/5.0/customize/overview/
如果要客製化設定一些 CSS，請參考這些 coding convention。

升級 Popper.js 到 v2

Popper.js 就是一些 tooltip / popup 的效果。

使用 data-bs-attribute 取代原本的 data-attribute

例如本來的 data-toggle=”dropdown”，現在是 data-bs-toggle=”dropdown”。加 bs 可以讓開發者更好辨認出這是 Bootstrap 的屬性。

用純 CSS 的方法來指定 Toast 的位置

在 Bootstrap，Toast 指的就是小的通知方塊，也許是服務提供方的來訊，也許是其他用戶的來訊。開發者可以使用純 CSS 的方法來指定 Toast 的位置。

總結

以上是 Bootstrap 5 的主要更新，Utilities API，CSS custom properties，新的 Grid System，新的 Customize 文件，這些都是 larry 覺得滿有參考價值的部分。

]]> Bootstrap 4 Flex https://blog.yuyansoftware.com.tw/2018/04/bootstrap-4-flex/ Thu, 19 Apr 2018 08:25:00 +0000 圖片來源 Laravel官方部落格

http://blog.getbootstrap.com/2018/04/09/bootstrap-4-1
Bootstrap 4.1 前幾天釋出了，主要只是新增一些 class 可供使用，沒什麼 major change. larry 只有注意到一點：Added new .flex-fill, .flex-grow-*, and .flex-shrink-* utilities.

我想趁這個機會從頭看一遍 Bootstrap flex utility
https://getbootstrap.com/docs/4.1/utilities/flex

如 native css 一樣，要使用 flexbox, 要在 container 上宣告 class="d-flex" 或是 class="d-inline-flex" (可以看出來 d-inline-flex 是行內元素)

接著你可以指定 flexbox 裡面 children 排列的方向，例如：

  • class="d-flex flex-row" (橫排，左到右，這是預設值，一般不用加 flex-row)
  • class="d-flex flex-row-reverse" (橫排，右到左)
  • class="d-flex flex-column" (直排，上到下)
  • class="d-flex flex-column-reverse" (直排，下到上)

這邊 flex-row, flex-column 對應的是 css 的 flex-direction

justify-content 指定左右方向如何分佈

  • class="d-flex justify-content-start" (從左到右，這是預設值，一般不用加 justify-content-start)
  • class="d-flex justify-content-end" (從右到左)
  • class="d-flex justify-content-center" (置中)
  • class="d-flex justify-content-between" (平均分配間距)
  • class="d-flex justify-content-around" (平均分配間距，且分配的間距再分配到單一 child 的左右)

align-items 指定垂直方向如何分佈

  • class="d-flex align-items-start" (從上到下，這是預設值，一般不用加 justify-content-start)
  • class="d-flex align-items-end" (從下到上)
  • class="d-flex align-items-center" (垂直置中)
  • class="d-flex align-items-baseline" (這比較特殊，不常用，有興趣的朋友請自行 study)
  • class="d-flex align-items-stretch" (所有 children 垂直方向佔滿 container)

到這邊大家會不會想到一個問題，如果 flex-column 搭配 align-items-center 會如何？(以下使用 native css 測試，如果 Bootstrap 的 css class 結果不一樣請讓我知道 🙂

flex-direction: column 搭配 align-items: center，3個 children 依然由上往下，但會水平置中

Child 1
Child 2
Child 3

flex-direction: column 搭配 justify-content: center，3個 children 會垂直置中

Child 1
Child 2
Child 3

flex-direction: column 搭配 justify-content: flex-end，3個 children 會向下對齊

Child 1
Child 2
Child 3

flex-direction: column 搭配 justify-content: center 且 align-items: center，3個 children 會水平且垂直置中

Child 1
Child 2
Child 3

大家有發現嗎？justify-content 是管水平方向對齊的，align-items 是管垂直方向對齊的。但當 flex-direction: column 時，justify-content 與 align-items 管的方向顛倒了。

align-self 下在 child 身上，可以指定單一 child 的對齊方式

  • class="align-self-start"
  • class="align-self-end"
  • class="align-self-center"
  • class="align-self-baseline"
  • class="align-self-stretch"

flex-fill 是 Bootstrap 4.1 新的 css class，下在 child 身上，就是 flex:1，等分占滿的意思。

flex-grow-*，flex-shrink-* (* 只能是 0 或 1) 也是 Bootstrap 4.1 新的 css class，下在 child 身上，對應 native css 的 flex-grow，flex-shrink。

官方文件有提到，justify-content，align-items 與 margin-(top)(bottom)(left)(right): auto 組合會有很多不同的排列效果。

flex-wrap 的部分有 flex-nowrap，flex-wrap，flex-wrap-reverse。下在 container 身上，管理 children 是否換行。

children 可以下 order-* (* 可以是 1 ~ 12)，指定 children 的排列順序。

align-content 操縱的是 children 的對齊線，跟 align-items 不同的是 align-items 以 children 為單位去做對齊，而 align-content 操縱的是行線。

  • class="align-content-start"
  • class="align-content-end"
  • class="align-content-center"
  • class="align-content-around"
  • class="align-content-stretch"

以上就是 Bootstrap 4.1 flex utility 所有內容。簡短結論一下吧，flexbox 是好東西，建議對前端有興趣的讀者使用。有很多排列組合，尤其是對齊方面，不要糾結他們，或是死背什麼，一切還是以設計和真實的需求為主～

]]> Bootstrap 4 主要更新：Grid System、CSS https://blog.yuyansoftware.com.tw/2017/08/bootstrap-4-beta/ Thu, 17 Aug 2017 08:58:00 +0000 http://test234.yuyansoftware.com.tw/2017/08/17/bootstrap-4-beta-released/ 圖片來源 Laravel官方部落格

https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
Bootstrap 4 beta 在日前發佈了，以下是 v4 的主要更新。如果是同為開發者的朋友，可以想想為什麼 Bootstrap 4 要採納這些更動，有什麼技術是值得我們進一步去研讀的。

Moved from Less to Sass

前端的朋友應該知道，bootstrap 3.x 版是用 less, css相關檔案也都是 .less 檔. Bootstrap v4 開始用 Sass (正確來說應該是 Scss), css相關檔案變成是 .scss 檔。

Flexbox and an improved grid system

官方文件提到

“We've moved nearly everything to flexbox.”

Bootstrap v4 幾乎所有排版都是用 css flexbox 的方式。另外，新增一個 grid system 的範圍: xl. 寫法上也要注意，3.x 版是

.col-xs-  .col-sm-  .col-md-  .col-lg-

v4 是

.col  .col-sm-  .col-md-  .col-lg-  .col-xl-

注意 xs 不用再寫了，多了 xl。3.x 版是 3 個 breakpoint，v4 是 4 個 breakpoint。

Dropped wells, thumbnails, and panels for cards.

拿掉 3.x 版的 wells, thumbnails. 新增 class=”card”, 以符合市面上極為大量的卡牌系統網頁。

Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot.

作者有給原因 https://github.com/twbs/bootstrap/issues/21740
v4 reset browser 的工作現在會放在一支 _reboot.scss 裡。

Brand new customization options

3.x 版做 customize 通常是再加 css 檔案。v4 開始官網建議直接去改 Sass 變數，然後重新 compile.

Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing.

可以簡單看一下 v4 grid 裡的 padding, font size, 全改為 rem 了。

總結

以上是 Bootstrap 4 的主要更新，如果是同為開發者的朋友，可以想想為什麼 Bootstrap 4 要採納這些更動，有什麼技術是值得進一步去研讀的。

]]>