有以下徵狀，就會發現 Bootstrap 好用!? - 覺得 float 超難搞定 - 希望不要花那麼多時間在美編上 - 不想花太多時間學習主要技術以外的內容 - RWD 真心難搞 - 過去的經驗... - 使用冷門框架找不到相依套件 - 自幹框架真心不如 Bootstrap 總而言之，歡迎入坑 Bootstrap 4

1. 講者：卡斯伯

2. 設計師轉⾏行行⼯工程師，現在兼著學習網路路⾏行行銷
專長：CSS, Angular, Gulp, Hexo,
Facebook pixel…
六⾓角學院講師、鴻海海⼯工程師
FB：fb.me/chihcheng.wang.3
2

4. 有以下徵狀狀，就會發現 Bootstrap 好⽤用!?
覺得 float 超難搞定
希望不要花那麼多時間在美編上
不想花太多時間學習主要技術以外的內容
RWD 真⼼心難搞
過去的經驗...
使⽤用冷⾨門框架找不到相依套件
⾃自幹框架真⼼心不如 Bootstrap
4

5. 5
不需要重頭
開始寫
降低學習
曲線
開源框架
BUG 少
快速⾃自定義延伸
插件多

6. 6

7. 2, 3, 4, 5
7

8. Class Name
8

9. 快速了了解 Bootstrap
Gulp 及 Sass 的結合
⾃自定義樣式與延伸運⽤用
第三版與第四版差異異
註：第四版⽬目前還屬於 Beta 階段，歡迎不怕炸的入坑
9

11. 使⽤用 CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/
bootstrap.min.css
透過 Bower + Gulp + Sass
11

12. 12
內容樣式：
Typography
Image
Table
Layout：
Grid
Media
元件：
Button
Form
Card
Navbar
Modal
雜項：
Clearfix
Colors
Spacing
Vertical Align

13. 13
容器型：
Grid
Media object
Card
Modal
Button Group
Navbar
元件型：
Breadcrumb
Button
Tag
Tooltips
Pagination
Nav (舊版 tabs)

14. 14

15. 元件型模組⼤大致包含以下規則
• 模組 (button, form-control, pagination)
• 配⾊色 (primary, danger, warning, info … )
• 樣式 (size, theme)
• 狀狀態 (active, disabled)
15

16. { 模組 } + { 模組 }-{ 配⾊色 } + { 模組 }-{ 樣式 } + { 狀狀態 }
ex: class="btn btn-primary btn-sm disabled"
16

17. 17
模組：
btn
配⾊色：
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式：
btn-sm
btn-lg
btn-block
狀狀態：
active
disabled

18. 模組：
btn
配⾊色：
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式：
btn-sm
btn-lg
btn-block
狀狀態：
active
disabled
18

19. 模組：
btn
配⾊色：
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式：
btn-sm
btn-lg
btn-block
狀狀態：
active
disabled
19

20. 20
模組：
btn
配⾊色：
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式：
btn-sm
btn-lg
btn-block
狀狀態：
active
disabled

21. 21
模組：
btn
配⾊色：
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式：
btn-sm
btn-lg
btn-block
狀狀態：
active
disabled

22. 22
模組：
btn
配⾊色：
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式：
btn-sm
btn-lg
btn-block
狀狀態：
active
disabled

23. 23
主結構：
card
次結構：
card-img-top
card-header
card-block
card-title
card-text
樣式：
card-inverse
card-primary
card-outline-
secondary

24. 24

25. 25

26. 26
Bootstrap 就是 樂⾼高模型 的概念念

27. 27
⼤大部份開發者看的眼花花章節
• 分為五種尺⼨寸 (以瀏覽器寬度為基準，包含 xs, sm, md, lg, xl)
• 特⾊色是使⽤用 float + padding 來來排版 (第四版可選⽤用 flex)
早期都是使⽤用 float + margin
• column 外層⼀一定是 class="row"
• class="row" 裡⾯面⼀一定是 class="col-xx-xx"

28. 28
• 所有column 外層⼀一定是 class="row"
• class="row" 裡⾯面⼀一定是 class="col-xx-xx"
.row

29. 29
模組：
col
瀏覽器寬度：
xs
sm
md
lg
顯⽰示欄欄位：
1
2
…
12
{ 模組 }-{ 寬度 }-{ 欄欄位 }
ex: class="col-sm-6"

30. 30
秘訣
• device width 分為五種尺⼨寸 xs, sm ,md, lg, xl
秘訣：不會⽤用就都⽤用sm
• 欄欄位的總和為 12，如果超過就換⾏行行
• col 的外層是 …， row 的內層是 …

32. 使⽤用 CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/
bootstrap.min.css
透過 Bower + Gulp + Sass
32
專業勸敗，怎能⽤用簡單的⽅方法搞定!!
https://github.com/Wcc723/gulp-web-designers

33. 33
這次的主⾓角
⾃自動化⼯工具
輕鬆客製化
樣式
前端套件
管理理⼯工具

34. https://github.com/Wcc723/gulp-web-designers
34

35. 35
1. npm install
2. bower install
3. 打開⼀一些註解
4. gulp

36. 36
1. Sass 載入 bower_components 內的 bootstrap
2. 讀取 all.scss 及 variables 的設定
3. Sass 編譯
4. 額外的 PostCSS (autoprefixer)
5. 啟動其他服務 (web server, ejs…)

37. 37
Sass
Bootstrap v4 Custom
PostCSS all.css
layout
Web Server
index.html
localhost:4000
Task
Sass
Task
layout
Task
Webserver
autoPrefixer

38. 38
1. 安裝 Bootstrap v4(alpha 5)
2. 路路徑 './bower_components/'

39. 39
1. 透過 includePaths
直接將 Bootstrap 4 當作元件庫載入
2. 修改樣式
3. 新增元件

40. 40
1. 直接修改主⾊色調
2. 修改 border-width
3. 更更改字體 (襯線字體 與 無襯線)
4. 使⽤用 flex
5. ⾃自訂元件

41. 41
以 Angular js 為例例
1. 使⽤用 Bootstrap 3 的版本
2. 套⽤用 angular-bootstrap
3. 依據 Bootstrap v3 與 v4 的差異異微調

43. 43

44. 44

45. 45

46. 46

47. 47

48. 48
px rem

49. 49
14px 16px

50. 1. Borders - 邊框樣式 new
2. Clearfix - 清除浮動
3. Close icon - x 符號
4. Colors - ⾊色彩
5. Display property - display
6. Image replacement - 隱藏⽂文字
7. Invisible content - 隱藏內容
(保留留空間)
8. Responsive helpers - RWD 輔助*
9. Screenreaders - 隱藏⽂文字
(閱讀器輔助)
10.Sizing and positioning - 尺⼨寸定位
new
11. Spacing - 間隔 new
12.Typography - ⽂文字輔助*
13.Vertical align - 垂直對⿑齊 new
50

51. 51

52. 52
Panel
Well
Thumbnails

53. 53

55. 公司專案
六⾓角學院
第⼀一版
第⼆二版
⾼高雄防災通
比對⼯工具 001
55

56. 56

57. 57

58. 58

59. 59

61. 61
- 課程不限時間任你看
- 每週額外線上問答問到飽
- 作業評量量確保學習正確性
- 課程免費更更新
http://www.hexschool.com/

62. 62
雲⾼高 VPS 虛擬主機
- 很低的 ping 值
- 便便宜的價格 1core/1G, 300/mo
- 還有快做好的 管控台 >O<
- 年年底前，再八折 (私訊我，打對折!!)
https://vps.dct-cloud.com/

63. 63