Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap4 與他的好搭檔

10,689 views

Published on

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

總而言之,歡迎入坑 Bootstrap 4

Published in: Engineering
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×