O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
講者:卡斯伯
設計師轉⾏行行⼯工程師,現在兼著學習網路路⾏行行銷
專長:CSS,	Angular,	Gulp,	Hexo,	
Facebook	pixel…	
六⾓角學院講師、鴻海海⼯工程師	
FB:fb.me/chihcheng.wang.3
2
有以下徵狀狀,就會發現 Bootstrap 好⽤用!?
覺得 float 超難搞定
希望不要花那麼多時間在美編上
不想花太多時間學習主要技術以外的內容
RWD 真⼼心難搞
過去的經驗...
使⽤用冷⾨門框架找不到相依套件
⾃自幹框架真⼼心不如 ...
5
不需要重頭
開始寫
降低學習
曲線
開源框架
BUG 少
快速⾃自定義延伸

插件多
6
2,	3,	4,	5
7
Class	Name
8
快速了了解 Bootstrap
Gulp 及 Sass 的結合
⾃自定義樣式與延伸運⽤用
第三版與第四版差異異
註:第四版⽬目前還屬於 Beta 階段,歡迎不怕炸的入坑
9
使⽤用 CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/
bootstrap.min.css
透過 Bower + Gulp + Sass
11
12
內容樣式:
Typography
Image
Table
Layout:
Grid
Media
元件:
Button
Form
Card
Navbar
Modal
雜項:
Clearfix
Colors
Spacing
Vertical A...
13
容器型:
Grid
Media object
Card
Modal
Button Group
Navbar
元件型:
Breadcrumb
Button
Tag
Tooltips
Pagination
Nav (舊版 tabs)
14
元件型模組⼤大致包含以下規則
• 模組 (button, form-control, pagination)
• 配⾊色 (primary, danger, warning, info … )
• 樣式 (size, theme)
• 狀狀態 ...
{ 模組 } + { 模組 }-{ 配⾊色 } + { 模組 }-{ 樣式 } + { 狀狀態 }
ex: class="btn	btn-primary	btn-sm	disabled"
16
17
模組:
btn
配⾊色:
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式:
btn-sm
btn-lg
btn-bloc...
模組:
btn
配⾊色:
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式:
btn-sm
btn-lg
btn-block
狀...
模組:
btn
配⾊色:
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式:
btn-sm
btn-lg
btn-block
狀...
20
模組:
btn
配⾊色:
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式:
btn-sm
btn-lg
btn-bloc...
21
模組:
btn
配⾊色:
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式:
btn-sm
btn-lg
btn-bloc...
22
模組:
btn
配⾊色:
btn-primary
btn-secondary
btn-success
…
btn-outline-primary
btn-outline-success
樣式:
btn-sm
btn-lg
btn-bloc...
23
主結構:
card
次結構:
card-img-top
card-header
card-block
card-title
card-text
樣式:
card-inverse
card-primary
card-outline-
sec...
24
25
26
Bootstrap 就是 樂⾼高模型 的概念念
27
⼤大部份開發者看的眼花花章節
• 分為五種尺⼨寸 (以瀏覽器寬度為基準,包含 xs, sm, md, lg, xl)
• 特⾊色是使⽤用 float + padding 來來排版 (第四版可選⽤用 flex)

早期都是使⽤用 float + ...
28
• 所有column 外層⼀一定是 class="row"
• class="row" 裡⾯面⼀一定是 class="col-xx-xx"
.row
29
模組:
col
瀏覽器寬度:
xs
sm
md
lg
顯⽰示欄欄位:
1
2
…
12
{ 模組 }-{ 寬度 }-{ 欄欄位 }
ex: class="col-sm-6"
30
秘訣
• device width 分為五種尺⼨寸 xs, sm ,md, lg, xl

秘訣:不會⽤用就都⽤用sm
• 欄欄位的總和為 12,如果超過就換⾏行行
• col 的外層是 …, row 的內層是 …
使⽤用 CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/
bootstrap.min.css
透過 Bower + Gulp + Sass
32
專業勸敗,怎能...
33
這次的主⾓角
⾃自動化⼯工具
輕鬆客製化
樣式
前端套件

管理理⼯工具
https://github.com/Wcc723/gulp-web-designers
34
35
1. npm	install	
2. bower	install	
3. 打開⼀一些註解	
4. gulp
36
1. Sass	載入	bower_components	內的	bootstrap	
2. 讀取	all.scss	及	variables	的設定	
3. Sass	編譯	
4. 額外的	PostCSS	(autoprefixer)	
5....
37
Sass
Bootstrap v4 Custom
PostCSS all.css
layout
Web Server
index.html
localhost:4000
Task 

Sass
Task 

layout
Task 

W...
38
1. 安裝	Bootstrap	v4(alpha	5)		
2. 路路徑	'./bower_components/'
39
1. 透過	includePaths	

直接將	Bootstrap	4	當作元件庫載入	
2. 修改樣式	
3. 新增元件
40
1. 直接修改主⾊色調
2. 修改 border-width
3. 更更改字體 (襯線字體 與 無襯線)
4. 使⽤用 flex
5. ⾃自訂元件
41
以 Angular js 為例例
1. 使⽤用 Bootstrap 3 的版本
2. 套⽤用 angular-bootstrap
3. 依據 Bootstrap v3 與 v4 的差異異微調
43
44
45
46
47
48
px rem
49
14px 16px
1. Borders - 邊框樣式 new
2. Clearfix - 清除浮動
3. Close icon - x 符號
4. Colors - ⾊色彩
5. Display property - display
6. Image replac...
51
52
Panel
Well
Thumbnails
53
公司專案
六⾓角學院
第⼀一版
第⼆二版
⾼高雄防災通
比對⼯工具 001
55
56
57
58
59
61
- 課程不限時間任你看
- 每週額外線上問答問到飽
- 作業評量量確保學習正確性
- 課程免費更更新
http://www.hexschool.com/
62
雲⾼高 VPS 虛擬主機
- 很低的 ping 值
- 便便宜的價格 1core/1G, 300/mo
- 還有快做好的 管控台 >O<
- 年年底前,再八折 (私訊我,打對折!!)
https://vps.dct-cloud.com/
63
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Próximos SlideShares
Carregando em…5
×
Próximos SlideShares
Css3 Grid Layout
Avançar
Transfira para ler offline e ver em ecrã inteiro.

87

Compartilhar

Baixar para ler offline

Bootstrap4 與他的好搭檔

Baixar para ler offline

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

總而言之,歡迎入坑 Bootstrap 4

Bootstrap4 與他的好搭檔

  1. 1. 講者:卡斯伯
  2. 2. 設計師轉⾏行行⼯工程師,現在兼著學習網路路⾏行行銷 專長:CSS, Angular, Gulp, Hexo, Facebook pixel… 六⾓角學院講師、鴻海海⼯工程師 FB:fb.me/chihcheng.wang.3 2
  3. 3. 有以下徵狀狀,就會發現 Bootstrap 好⽤用!? 覺得 float 超難搞定 希望不要花那麼多時間在美編上 不想花太多時間學習主要技術以外的內容 RWD 真⼼心難搞 過去的經驗... 使⽤用冷⾨門框架找不到相依套件 ⾃自幹框架真⼼心不如 Bootstrap 4
  4. 4. 5 不需要重頭 開始寫 降低學習 曲線 開源框架 BUG 少 快速⾃自定義延伸
 插件多
  5. 5. 6
  6. 6. 2, 3, 4, 5 7
  7. 7. Class Name 8
  8. 8. 快速了了解 Bootstrap Gulp 及 Sass 的結合 ⾃自定義樣式與延伸運⽤用 第三版與第四版差異異 註:第四版⽬目前還屬於 Beta 階段,歡迎不怕炸的入坑 9
  9. 9. 使⽤用 CDN:
 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/ bootstrap.min.css 透過 Bower + Gulp + Sass 11
  10. 10. 12 內容樣式: Typography Image Table Layout: Grid Media 元件: Button Form Card Navbar Modal 雜項: Clearfix Colors Spacing Vertical Align
  11. 11. 13 容器型: Grid Media object Card Modal Button Group Navbar 元件型: Breadcrumb Button Tag Tooltips Pagination Nav (舊版 tabs)
  12. 12. 14
  13. 13. 元件型模組⼤大致包含以下規則 • 模組 (button, form-control, pagination) • 配⾊色 (primary, danger, warning, info … ) • 樣式 (size, theme) • 狀狀態 (active, disabled) 15
  14. 14. { 模組 } + { 模組 }-{ 配⾊色 } + { 模組 }-{ 樣式 } + { 狀狀態 } ex: class="btn btn-primary btn-sm disabled" 16
  15. 15. 17 模組: btn 配⾊色: btn-primary btn-secondary btn-success … btn-outline-primary btn-outline-success 樣式: btn-sm btn-lg btn-block 狀狀態: active disabled
  16. 16. 模組: btn 配⾊色: btn-primary btn-secondary btn-success … btn-outline-primary btn-outline-success 樣式: btn-sm btn-lg btn-block 狀狀態: active disabled 18
  17. 17. 模組: btn 配⾊色: btn-primary btn-secondary btn-success … btn-outline-primary btn-outline-success 樣式: btn-sm btn-lg btn-block 狀狀態: active disabled 19
  18. 18. 20 模組: btn 配⾊色: btn-primary btn-secondary btn-success … btn-outline-primary btn-outline-success 樣式: btn-sm btn-lg btn-block 狀狀態: active disabled
  19. 19. 21 模組: btn 配⾊色: btn-primary btn-secondary btn-success … btn-outline-primary btn-outline-success 樣式: btn-sm btn-lg btn-block 狀狀態: active disabled
  20. 20. 22 模組: btn 配⾊色: btn-primary btn-secondary btn-success … btn-outline-primary btn-outline-success 樣式: btn-sm btn-lg btn-block 狀狀態: active disabled
  21. 21. 23 主結構: card 次結構: card-img-top card-header card-block card-title card-text 樣式: card-inverse card-primary card-outline- secondary
  22. 22. 24
  23. 23. 25
  24. 24. 26 Bootstrap 就是 樂⾼高模型 的概念念
  25. 25. 27 ⼤大部份開發者看的眼花花章節 • 分為五種尺⼨寸 (以瀏覽器寬度為基準,包含 xs, sm, md, lg, xl) • 特⾊色是使⽤用 float + padding 來來排版 (第四版可選⽤用 flex)
 早期都是使⽤用 float + margin • column 外層⼀一定是 class="row" • class="row" 裡⾯面⼀一定是 class="col-xx-xx"
  26. 26. 28 • 所有column 外層⼀一定是 class="row" • class="row" 裡⾯面⼀一定是 class="col-xx-xx" .row
  27. 27. 29 模組: col 瀏覽器寬度: xs sm md lg 顯⽰示欄欄位: 1 2 … 12 { 模組 }-{ 寬度 }-{ 欄欄位 } ex: class="col-sm-6"
  28. 28. 30 秘訣 • device width 分為五種尺⼨寸 xs, sm ,md, lg, xl
 秘訣:不會⽤用就都⽤用sm • 欄欄位的總和為 12,如果超過就換⾏行行 • col 的外層是 …, row 的內層是 …
  29. 29. 使⽤用 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
  30. 30. 33 這次的主⾓角 ⾃自動化⼯工具 輕鬆客製化 樣式 前端套件
 管理理⼯工具
  31. 31. https://github.com/Wcc723/gulp-web-designers 34
  32. 32. 35 1. npm install 2. bower install 3. 打開⼀一些註解 4. gulp
  33. 33. 36 1. Sass 載入 bower_components 內的 bootstrap 2. 讀取 all.scss 及 variables 的設定 3. Sass 編譯 4. 額外的 PostCSS (autoprefixer) 5. 啟動其他服務 (web server, ejs…)
  34. 34. 37 Sass Bootstrap v4 Custom PostCSS all.css layout Web Server index.html localhost:4000 Task 
 Sass Task 
 layout Task 
 Webserver autoPrefixer
  35. 35. 38 1. 安裝 Bootstrap v4(alpha 5) 2. 路路徑 './bower_components/'
  36. 36. 39 1. 透過 includePaths 
 直接將 Bootstrap 4 當作元件庫載入 2. 修改樣式 3. 新增元件
  37. 37. 40 1. 直接修改主⾊色調 2. 修改 border-width 3. 更更改字體 (襯線字體 與 無襯線) 4. 使⽤用 flex 5. ⾃自訂元件
  38. 38. 41 以 Angular js 為例例 1. 使⽤用 Bootstrap 3 的版本 2. 套⽤用 angular-bootstrap 3. 依據 Bootstrap v3 與 v4 的差異異微調
  39. 39. 43
  40. 40. 44
  41. 41. 45
  42. 42. 46
  43. 43. 47
  44. 44. 48 px rem
  45. 45. 49 14px 16px
  46. 46. 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
  47. 47. 51
  48. 48. 52 Panel Well Thumbnails
  49. 49. 53
  50. 50. 公司專案 六⾓角學院 第⼀一版 第⼆二版 ⾼高雄防災通 比對⼯工具 001 55
  51. 51. 56
  52. 52. 57
  53. 53. 58
  54. 54. 59
  55. 55. 61 - 課程不限時間任你看 - 每週額外線上問答問到飽 - 作業評量量確保學習正確性 - 課程免費更更新 http://www.hexschool.com/
  56. 56. 62 雲⾼高 VPS 虛擬主機 - 很低的 ping 值 - 便便宜的價格 1core/1G, 300/mo - 還有快做好的 管控台 >O< - 年年底前,再八折 (私訊我,打對折!!) https://vps.dct-cloud.com/
  57. 57. 63
  • YuChyng

    May. 18, 2021
  • wureka

    Nov. 13, 2020
  • idiotbear1

    Apr. 14, 2020
  • ArdenWang

    Nov. 21, 2019
  • ssuser325cbc

    Jan. 3, 2019
  • AskieLin

    Nov. 28, 2018
  • iinwen

    Sep. 9, 2018
  • ssuserd02551

    Sep. 3, 2018
  • wenshyansu

    Jan. 5, 2018
  • wchihome

    Sep. 9, 2017
  • freelearn

    Aug. 26, 2017
  • ssusercc38d8

    Aug. 12, 2017
  • yaominls

    Aug. 11, 2017
  • mr8600

    Aug. 10, 2017
  • yvonnejerry24

    May. 31, 2017
  • tinahsu35

    May. 30, 2017
  • ssuserfa3a2d

    Mar. 29, 2017
  • chendoit

    Mar. 26, 2017
  • TitusYang

    Mar. 13, 2017
  • chy926

    Mar. 6, 2017

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

Vistos

Vistos totais

11.535

No Slideshare

0

De incorporações

0

Número de incorporações

32

Ações

Baixados

229

Compartilhados

0

Comentários

0

Curtir

87

×