本簡報整理了 BS4 許多重要觀念及心法 包含 Grid system, Flex, 文字細節等，看更多：https://goo.gl/7JuNST

1. Bootstrap
4 與 3 的差異異
D I F F E R E N C E S B E T W E E N B O O T S T R A P 3 A N D 4

2. 2
從 Less 轉移到 Sass
當初 Sass 受限於編譯速度，所以 Bootstrap 不願使⽤用 Sass 來來開發，⽽而
Libsass 讓 Sass 不再受限於 Ruby 環境，所以開發團隊也轉換到 Sass 以
擁抱更更⼤大的社群能量量。

3. 3
IE 掰
第四版放棄對 IE8、IE9 及 iOS6 的⽀支援，換來來的是更更好、更更有彈性的排
版語法。

4. 4
全⾯面改⽤用 flex
排版放棄使⽤用已久的 float，取⽽而代之的是 flexbox，這⼀一個新屬性讓排
版不在⼀一個⽔水平⾯面的左右⽅方開始，無論是⿑齊左右、等距分配、元素置中、
垂直排版都不再是問題。
缺乏彈性的 float

5. 5
中斷點
中斷點新增了了⼀一個階段並且重新命名了了，這使得在更更⼩小的裝置有增加了了
些許選擇 (更更⼩小裝置還是有跑版的危機啊～)。
BS 3 / BS4 -- / xs xs / sm sm / md md / lg lg / xl
Bootstrap 3 < 768px >= 768px >= 992px >= 1200
Bootstrap 4 <= 575px
576px
~
767px
768px
~
991px
992px
~
1199px
>= 1200

6. 6
rem
px 到 rem
px 是絕對的數值單位，網⾴頁開發需要更更有彈性的數值單位，來來符合不同
裝置、瀏覽器的運⽤用，⽽而 rem 能透過 media query 輕易易的切換不同裝置
下的整體尺⼨寸。
px

7. 7
預設字體⼤大⼩小
16px 不僅是瀏覽器預設的⽂文字⼤大⼩小，較⼤大的字體也能夠在⾏行行動版上有更更
佳的閱讀性。
16px14px

8. 8
⼤大⽅方的⾊色彩
預設的⾊色彩改為更更為鮮豔⼤大⽅方，並且新增常使⽤用的次要、⿊黑⽩白等⾊色彩。

9. 9
充滿⽣生命⼒力力的按鈕
按鈕不僅⾊色彩較為鮮豔，且增加了了 outline 版本的按鈕 (超愛)，且在第四
版靈活的架構下，調整邊框粗細也相當容易易。

10. 10
靈活的變化
元件在設計上更更巧妙的運⽤用 CSS 的特性，如 navbar 使⽤用了了透明的⾊色
彩，使的底⾊色能夠⾃自由的套⽤用，讓變化性不受限於框架本⾝身。

11. 11
移除與新增元件
許多元件在樣式設計上有許多共通之處，第四版將這些元件移除後統整
成更更易易於使⽤用，且彈性更更⾼高的卡片元件。

12. 12
重新設計的⽂文件
新的⽂文件重新美化，且可以使⽤用搜尋來來快速切換不同的元件說明。還有
許多細節尚未列列出，從六⾓角學院翻譯的繁體中⽂文⽂文件，了了解還有什什麼新
奇吧！

13. 13
http://bootstrap.hexschool.com/
Bootstrap 4

14. 14
文件說明

15. 15
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

16. 16
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

17. 17
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

18. 18
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

19. 19
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

20. 20
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

21. 21
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

22. 22
Getting started
Layout
Content
Components
Utilities
Extend
Migration
快速開始
排版
內容
元件
通⽤用類別
擴增
更更版紀錄

23. 23
補充說明
HTML Class

24. 24
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
"Class" ⼀一般稱為 類別，
在網⾴頁中主要是套⽤用樣式的

25. 25
• ⼀一個 class 內可以⽤用空⽩白隔開多個 class 名稱
• ⼀一個標籤只能有⼀一個 class 屬性
<nav class="navbar" class="navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>

26. 26
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
...
</div>
</nav>
• 必須載入 JavaScript 插件才能運作
• data-toggle="xxx" 通常表⽰示切換的功能
• data-target="xxx" 表⽰示要切換的⽬目標
然後會有另⼀一個 id 作為⽬目標對應

27. 27
補充說明
系統預設字體

28. 28
由於每個作業系統均有合適他最佳閱讀的系統字體，所以 Bootstrap 4
放棄使⽤用 Helvetica Neue, Helvetica, 和 Arial 作為預設的字體。

29. 29
系統 系統預設 英⽂字體 中⽂字體
Winwdows Segoe UI
Microsoft JhengHei /
微軟正⿊體
Mac OS -apple-system
San Francisco /
Helvetica Neue
蘋⽅(PingFang) /
Heiti TC
iOS -apple-system
San Francisco /
Helvetica Neue
蘋⽅(PingFang) /
Heiti TC
Android Roboto Droidsansfallback

30. 30
font-family:
/* 1 */ -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Ubuntu", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;
1. 使⽤用系統預設的字體
2. 指定已知的系統 UI 字體
3. 備援的字體

31. 31
補充說明
CSS Box-sizing

32. 32
由於 padding 及 border 會改變元素運算後的寬度，
避免⿇麻煩的計算，Bootstrap 預設載入 box-sizing: border-box
定義的寬度 = 實際呈現的寬度

33. 33
div {
}
width: 300px;
height: 300px;
padding: 50px;
border: 10px solid green;
margin: 50px;
width: 300px;
height: 300px;
margin: 50px;
border: 10px solid green;
padding: 50px;
+ + =300px 50*2px 10*2px 420px

34. div {
}
border: 10px solid green;
34
width: 300px;
height: 300px;
padding: 50px;
border: 10px solid green;
margin: 50px;
width: 300px;
height: 300px;
margin: 50px;
padding: 50px;
box-sizing: border-box;
= + +300px X 50*2px 10*2px

35. 35
補充說明
Bootstrap Container

36. 36
Bootstrap 的 container Class 主要是⽤用來來定義最外層的容器
在使⽤用上分為兩兩⼤大類：
分別為應對滿版寬度及階段固定寬度兩兩種

37. 37
575px768px992px1200px
width: auto
container-fluid

38. 38
如果網⾴頁內容不需要嚴謹的定義最⼤大寬度
可以使⽤用 container-fluid
對於網⾴頁內容寬度的階段美感都很要求
且需要最⼤大寬度的限制可使⽤用 container

39. 39
575px768px992px1200px
低於 575px
width: auto
container

40. 40
575px768px992px1200px
container
⼤大於 576px
width: 540px

41. 41
575px768px992px1200px
container
⼤大於 768px
width: 720px

42. 42
⼤大於 1200px
width: 1140px
container
540px720px960px1140px

43. ⼤大於 992px
width: 960px
43
575px768px992px1200px
container

44. 44
10px (Gutter on outside)

45. width: 960px
45
超出的 padding超出的 padding

46. 46
補充說明
網格系統

47. 47
http://okapi.books.com.tw/article/3718 裝幀設計/王志弘（攝影/無相⽣）

48. 48
https://ziasomjee.wordpress.com/2012/10/22/final-book-design/
https://ziasomjee.wordpress.com/2012/10/22/final-book-design/

49. 49
但是網⾴頁並不像是平⾯面設計是靜⽌止不動的，會因為使⽤用者的裝置⼤大⼩小、
瀏覽器甚⾄至是操作⽅方式，都會改變內容或者排版。
所以說，在網⾴頁設計上的格線尺⼨寸該如何分割？

50. 50
會以 960px 為基準，也是因為早期
電腦螢幕通常為1024px，960px 的
設計是最為剛好。
⽽而 12 欄欄則是較多數字的公倍數。
1024px

51. 51

52. 52

53. 53
940px (Total Width)
60px (Column Width)
20px (Gutter Width)
10px (Gutter on outside)

54. 54
Bootstrap 4 也是由這個基礎概念念作
為發展。

55. 55
章節重點：Bootstrap 總欄欄數為 12

56. 56
補充說明
Bootstrap 的網格系統

57. 57
940px (Total Width)
60px (Column Width)
20px (Gutter Width)
10px (Gutter on outside)
Gutter 呢？

58. 58
.col-* {
padding-right: 15px;
padding-left: 15px;
}

59. 59

60. 60
超出的 padding超出的 padding

61. 61
.col-* {
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}

62. 62
1. class="col-xx" 外層是 class="row"
2. class="row" 裡⾯面是 class="col-xx"
3. ⾴頁⾯面內容請放在 class="col-xx" 的內層
很重要，別弄弄錯了了喔
(主要原因為空間補回及 flex)

63. 63
補充說明
Bootstrap 的中斷點

64. 64
Bootstrap 是設計來來⾏行行動優先的框架，
透過許多 media queries 來來設立中斷點
並製作具彈性的排版

65. 65
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Bootstrap 的 media queries
當寬度超過該數值以上時會套⽤用樣式

66. 66
Bootstrap 預設斷點
xs
575px
sm
768px
md
992px
lg
1200px
xl

67. 67
Bootstrap 預設斷點
BS 3 / BS4 -- / xs xs / sm sm / md md / lg lg / xl
Bootstrap 4 <= 575px
576px
~
767px
768px
~
991px
992px
~
1199px
>= 1200
column col-* col-sm-* col-md-* col-lg-* col-xl-*

68. 68
記得是使⽤用 xs(省略略)、sm、md、lg、xl
來來調整不同視圖下的欄欄寬度

69. 69
補充說明
Bootstrap 的 Flex 小說明

70. 70
Bootstrap 4 和前⼀一版最⼤大的差別在於 Flex

71. 71
col-4 col-4 col-4

72. 72
col col col

73. 73
colcol

74. 74
補充說明
Flex 完整介紹

75. C S S 3 彈 性 排 版 屬 性
FLEX

76. 76
傳統的 float 排版就如同⽔水⼀一樣可以左右的流動，但這概念念無
法應對現在多元的排版⽅方式，如：置中、垂直、等距等等。
Flex 不只解決這樣問題，並且具有更更優於 float 的彈性。

77. 77
F L E X 需 要 了了 解 的
• 軸線的觀念念
• 相關屬性
• 對⿑齊⽅方法
• Bootstrap 使⽤用到的⽅方法

78. 78
F L E X 需 要 了了 解 的
• 軸線的觀念念
• 相關屬性
• 對⿑齊⽅方法
• Bootstrap 使⽤用到的⽅方法
外層屬性
內層屬性

79. 79
F L E X 需 要 了了 解 的
• 軸線的觀念念
• 相關屬性
• 對⿑齊⽅方法
• Bootstrap 使⽤用到的⽅方法

80. 80
F L E X 需 要 了了 解 的
• 軸線的觀念念
• 相關屬性
• 對⿑齊⽅方法
• Bootstrap 使⽤用到的⽅方法

81. 81
相 關 屬 性
外層屬性
內層
屬性
• display：必備屬性
• flex-flow
• flex-direction：決定 flex 軸線
• flex-wrap：決定換⾏行行的屬性
• justify-content：主要軸線的對⿑齊
• align-items：交錯軸線的對⿑齊
• flex
• flex-grow：伸展比
• flex-shrink：收縮比
• flex-basis：絕對值
• order：排序
• align-self：單⼀一個物件的交錯軸對⿑齊

82. 82
相 關 屬 性
外層屬性
內層
屬性
• display：必備屬性
• flex-flow
• flex-direction：決定 flex 軸線
• flex-wrap：決定換⾏行行的屬性
• justify-content：主要軸線的對⿑齊
• align-items：交錯軸線的對⿑齊
• flex
• flex-grow：伸展比
• flex-shrink：收縮比
• flex-basis：絕對值
• order：排序
• align-self：單⼀一個物件的交錯軸對⿑齊

83. 83
對 ⿑齊 ⽅方 法
主軸
flex-direction: row (default)
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

84. 84
對 ⿑齊 ⽅方 法
主軸
flex-direction: row (default)
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

85. 85
對 ⿑齊 ⽅方 法
主軸
flex-direction: row (default)
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

86. 86
對 ⿑齊 ⽅方 法
主軸
flex-direction: row (default)
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

87. 87
對 ⿑齊 ⽅方 法
justify-content 是依據主軸的軸線
決定物件之間的間隔⽅方法。
主 軸 對 ⿑齊 ( 外 層 )
主軸

88. 88
對 ⿑齊 ⽅方 法
align-items 是垂直於主軸的對⿑齊
⽅方法。
交 錯 軸 對 ⿑齊 ( 外 層 )
主軸
交錯軸

89. 89
對 ⿑齊 ⽅方 法
align-self 是內元件本⾝身垂直於主
軸的對⿑齊⽅方法。
交 錯 軸 對 ⿑齊 ( 內 層 )
主軸
交錯軸

90. 90
對 ⿑齊 ⽅方 法
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: between
justify-content: space-around

91. 91
對 ⿑齊 ⽅方 法
align-items: flex-start
align-items: flex-end
align-items: center
123 456 789
align-items: baseline
align-items: stretch

92. 92
對 ⿑齊 ⽅方 法
align-self: flex-start
align-self: flex-end
align-self: center
456
align-self: baseline
align-self: stretch

93. B O O T S T R A P 元 件 概 念念
COMPONENT

94. 94
元件，是 Bootstrap 為何受歡迎的主要原因，
他提供⼤大量量現成的組件讓開發者可以輕鬆組合變化

95. 95
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼
⽂文件閱讀

96. 96
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

97. 97
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

98. 98
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

99. 99
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

100. 100
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

101. 101
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

102. 102
⽂文件閱讀
- 基本元件範例例
- 元件樣式變化
- 元件的變化
- grid 或 Utilities 等混合使⽤用
- 網⾴頁親和性
- 元件與 JavaScript
- 編譯說明⽂文件
- 錢字號開頭的程式碼

103. 103
補充說明
Bootstrap 與 Sass 介紹

104. 104
Sass 是 CSS 預處理理⼯工具
可以讓 Bootstrap 更更有模組化的架構

105. 105
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)

106. 106
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)
bootstrap.css

107. 107
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
body {
font: 100% Helvetica, sans-serif;
color: #333;
}

108. 108
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

109. 109
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

110. 110
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}

111. 111
- 是 CSS 前置語⾔言
- 讓 CSS 更更容易易被管理理
- 變數
- @include
- @import
- 讓 CSS 更更像程式語⾔言
- 具有運算能⼒力力
- 有函式庫可以運⽤用
(Bootstrap)
@import "functions";
@import "variables";
@import "bootstrap";
可⾃自⾏行行調整

112. 112
同學，對於 Sass 後⾯面章節會有完整介紹
這邊只要先知道有 Sass 即可

113. 為什什麼 Bootstrap
有這樣⼤大的魅⼒力力
D I F F E R E N C E S B E T W E E N B O O T S T R A P 3 A N D 4

114. 114
卡斯伯 (王志誠)

115. 115
保證持續更新
保證不額外收費
開始學習 Bootstrap!!
更更多的詳細介紹：https://goo.gl/7JuNST