O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Bootstrap4 與他的好搭檔

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 63 Anúncio

Bootstrap4 與他的好搭檔

Baixar para ler offline

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

總而言之,歡迎入坑 Bootstrap 4

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

總而言之,歡迎入坑 Bootstrap 4

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a Bootstrap4 與他的好搭檔 (20)

Anúncio

Mais recentes (20)

Anúncio

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

×