Bootstrap4 與他的好搭檔
88 likes11,713 views
有以下徵狀，就會發現 Bootstrap 好用!? - 覺得 float 超難搞定 - 希望不要花那麼多時間在美編上 - 不想花太多時間學習主要技術以外的內容 - RWD 真心難搞 - 過去的經驗... - 使用冷門框架找不到相依套件 - 自幹框架真心不如 Bootstrap 總而言之，歡迎入坑 Bootstrap 4
![[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗](https://cdn.slidesharecdn.com/ss_thumbnails/dctpe2010-site-planning-100901094538-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (13)
Similar to Bootstrap4 與他的好搭檔 (20)
More from Chih-cheng Wang (10)
![[Modern Web] CSS3 Grid Layout](https://cdn.slidesharecdn.com/ss_thumbnails/cssgridnewtemplate-170810060805-thumbnail.jpg?width=560&fit=bounds)
Bootstrap4 與他的好搭檔
- 1. 讲者：卡斯伯
- 4. 有以下徵狀狀，就會發現 Bootstrap 好?用!? 覺得 float 超難搞定 希望不要花那麼多時間在美編上 不想花太多時間學習主要技術以外的內容 RWD 真?心難搞 過去的經驗... 使?用冷?門框架找不到相依套件 ?自幹框架真?心不如 Bootstrap 4
- 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
- 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
- 24. 24
- 25. 25
- 26. 26 Bootstrap 就是 樂?高模型 的概念念
- 27. 27 ?大部份開發者看的眼花花章節 ? 分為五種尺?寸 (以瀏覽器寬度為基準，包含 xs, sm, md, lg, xl) ? 特?色是使?用 ?oat + padding 來來排版 (第四版可選?用 ?ex)? 早期都是使?用 ?oat + 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
- 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
- 40. 40 1. 直接修改主?色調 2. 修改 border-width 3. 更更改字體 (襯線字體 與 無襯線) 4. 使?用 ?ex 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. Clear?x - 清除浮動 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
- 53. 53
- 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