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.

Bootstrap 4 超詳盡解析

12,913 views

Published on

本簡報整理了 BS4 許多重要觀念及心法
包含 Grid system, Flex, 文字細節等,看更多:https://goo.gl/7JuNST

Published in: Engineering
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Girls for sex are waiting for you https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Meetings for sex in your area are there: https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com and Watch latest Blogs On Latest and New Technology @ https://www.ThesisScientist.com/blog
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Bootstrap 4 超詳盡解析

  1. 1. Bootstrap 
 4 與 3 的差異異 D I F F E R E N C E S B E T W E E N B O O T S T R A P 3 A N D 4
  2. 2. 2 從 Less 轉移到 Sass 當初 Sass 受限於編譯速度,所以 Bootstrap 不願使⽤用 Sass 來來開發,⽽而 Libsass 讓 Sass 不再受限於 Ruby 環境,所以開發團隊也轉換到 Sass 以 擁抱更更⼤大的社群能量量。
  3. 3. 3 IE 掰 第四版放棄對 IE8、IE9 及 iOS6 的⽀支援,換來來的是更更好、更更有彈性的排 版語法。
  4. 4. 4 全⾯面改⽤用 flex 排版放棄使⽤用已久的 float,取⽽而代之的是 flexbox,這⼀一個新屬性讓排 版不在⼀一個⽔水平⾯面的左右⽅方開始,無論是⿑齊左右、等距分配、元素置中、 垂直排版都不再是問題。 缺乏彈性的 float
  5. 5. 5 中斷點 中斷點新增了了⼀一個階段並且重新命名了了,這使得在更更⼩小的裝置有增加了了 些許選擇 (更更⼩小裝置還是有跑版的危機啊~)。 BS 3 / BS4 -- / xs xs / sm sm / md md / lg lg / xl Bootstrap 3 < 768px >= 768px >= 992px >= 1200 Bootstrap 4 <= 575px 576px 
 ~
 767px 768px 
 ~
 991px 992px 
 ~
 1199px >= 1200
  6. 6. 6 rem px 到 rem px 是絕對的數值單位,網⾴頁開發需要更更有彈性的數值單位,來來符合不同 裝置、瀏覽器的運⽤用,⽽而 rem 能透過 media query 輕易易的切換不同裝置 下的整體尺⼨寸。 px
  7. 7. 7 預設字體⼤大⼩小 16px 不僅是瀏覽器預設的⽂文字⼤大⼩小,較⼤大的字體也能夠在⾏行行動版上有更更 佳的閱讀性。 16px14px
  8. 8. 8 ⼤大⽅方的⾊色彩 預設的⾊色彩改為更更為鮮豔⼤大⽅方,並且新增常使⽤用的次要、⿊黑⽩白等⾊色彩。
  9. 9. 9 充滿⽣生命⼒力力的按鈕 按鈕不僅⾊色彩較為鮮豔,且增加了了 outline 版本的按鈕 (超愛),且在第四 版靈活的架構下,調整邊框粗細也相當容易易。
  10. 10. 10 靈活的變化 元件在設計上更更巧妙的運⽤用 CSS 的特性,如 navbar 使⽤用了了透明的⾊色 彩,使的底⾊色能夠⾃自由的套⽤用,讓變化性不受限於框架本⾝身。
  11. 11. 11 移除與新增元件 許多元件在樣式設計上有許多共通之處,第四版將這些元件移除後統整 成更更易易於使⽤用,且彈性更更⾼高的卡片元件。
  12. 12. 12 重新設計的⽂文件 新的⽂文件重新美化,且可以使⽤用搜尋來來快速切換不同的元件說明。還有 許多細節尚未列列出,從六⾓角學院翻譯的繁體中⽂文⽂文件,了了解還有什什麼新 奇吧!
  13. 13. 13 http://bootstrap.hexschool.com/ Bootstrap 4
  14. 14. 14 文件說明
  15. 15. 15 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  16. 16. 16 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  17. 17. 17 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  18. 18. 18 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  19. 19. 19 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  20. 20. 20 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  21. 21. 21 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  22. 22. 22 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
  23. 23. 23 補充說明 HTML Class
  24. 24. 24 <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav> "Class" ⼀一般稱為 類別,
 在網⾴頁中主要是套⽤用樣式的
  25. 25. 25 • ⼀一個 class 內可以⽤用空⽩白隔開多個 class 名稱 • ⼀一個標籤只能有⼀一個 class 屬性 <nav class="navbar" class="navbar-light"> <a class="navbar-brand" href="#">Navbar</a> </nav>
  26. 26. 26 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> ... </div> </nav> • 必須載入 JavaScript 插件才能運作 • data-toggle="xxx" 通常表⽰示切換的功能 • data-target="xxx" 表⽰示要切換的⽬目標
 然後會有另⼀一個 id 作為⽬目標對應
  27. 27. 27 補充說明 系統預設字體
  28. 28. 28 由於每個作業系統均有合適他最佳閱讀的系統字體,所以 Bootstrap 4 放棄使⽤用 Helvetica Neue, Helvetica, 和 Arial 作為預設的字體。
  29. 29. 29 系統 系統預設 英⽂字體 中⽂字體 Winwdows Segoe UI Microsoft JhengHei / 微軟正⿊體 Mac OS -apple-system San Francisco / 
 Helvetica Neue 蘋⽅(PingFang) / Heiti TC iOS -apple-system San Francisco / 
 Helvetica Neue 蘋⽅(PingFang) / Heiti TC Android Roboto Droidsansfallback
  30. 30. 30 font-family: /* 1 */ -apple-system, BlinkMacSystemFont, /* 2 */ "Segoe UI", "Roboto", "Ubuntu", "Droid Sans", /* 3 */ "Helvetica Neue", sans-serif; 1. 使⽤用系統預設的字體 2. 指定已知的系統 UI 字體 3. 備援的字體
  31. 31. 31 補充說明 CSS Box-sizing
  32. 32. 32 由於 padding 及 border 會改變元素運算後的寬度,
 避免⿇麻煩的計算,Bootstrap 預設載入 box-sizing: border-box 定義的寬度 = 實際呈現的寬度
  33. 33. 33 div { } width: 300px; height: 300px; padding: 50px; border: 10px solid green; margin: 50px; width: 300px; height: 300px; margin: 50px; border: 10px solid green; padding: 50px; + + =300px 50*2px 10*2px 420px
  34. 34. div { } border: 10px solid green; 34 width: 300px; height: 300px; padding: 50px; border: 10px solid green; margin: 50px; width: 300px; height: 300px; margin: 50px; padding: 50px; box-sizing: border-box; = + +300px X 50*2px 10*2px
  35. 35. 35 補充說明 Bootstrap Container
  36. 36. 36 Bootstrap 的 container Class 主要是⽤用來來定義最外層的容器
 在使⽤用上分為兩兩⼤大類: 分別為應對滿版寬度及階段固定寬度兩兩種
  37. 37. 37 575px768px992px1200px width: auto container-fluid
  38. 38. 38 如果網⾴頁內容不需要嚴謹的定義最⼤大寬度
 可以使⽤用 container-fluid 對於網⾴頁內容寬度的階段美感都很要求
 且需要最⼤大寬度的限制可使⽤用 container
  39. 39. 39 575px768px992px1200px 低於 575px width: auto container
  40. 40. 40 575px768px992px1200px container ⼤大於 576px width: 540px
  41. 41. 41 575px768px992px1200px container ⼤大於 768px width: 720px
  42. 42. 42 ⼤大於 1200px width: 1140px container 540px720px960px1140px
  43. 43. ⼤大於 992px width: 960px 43 575px768px992px1200px container
  44. 44. 44 10px (Gutter on outside)
  45. 45. width: 960px 45 超出的 padding超出的 padding
  46. 46. 46 補充說明 網格系統
  47. 47. 47 http://okapi.books.com.tw/article/3718 裝幀設計/王志弘(攝影/無相⽣)
  48. 48. 48 https://ziasomjee.wordpress.com/2012/10/22/final-book-design/ https://ziasomjee.wordpress.com/2012/10/22/final-book-design/
  49. 49. 49 但是網⾴頁並不像是平⾯面設計是靜⽌止不動的,會因為使⽤用者的裝置⼤大⼩小、 瀏覽器甚⾄至是操作⽅方式,都會改變內容或者排版。 所以說,在網⾴頁設計上的格線尺⼨寸該如何分割?
  50. 50. 50 會以 960px 為基準,也是因為早期 電腦螢幕通常為1024px,960px 的 設計是最為剛好。 ⽽而 12 欄欄則是較多數字的公倍數。 1024px
  51. 51. 51
  52. 52. 52
  53. 53. 53 940px (Total Width) 60px (Column Width) 20px (Gutter Width) 10px (Gutter on outside)
  54. 54. 54 Bootstrap 4 也是由這個基礎概念念作 為發展。
  55. 55. 55 章節重點:Bootstrap 總欄欄數為 12
  56. 56. 56 補充說明 Bootstrap 的網格系統
  57. 57. 57 940px (Total Width) 60px (Column Width) 20px (Gutter Width) 10px (Gutter on outside) Gutter 呢?
  58. 58. 58 .col-* { padding-right: 15px; padding-left: 15px; }
  59. 59. 59
  60. 60. 60 超出的 padding超出的 padding
  61. 61. 61 .col-* { padding-right: 15px; padding-left: 15px; } .row { margin-right: -15px; margin-left: -15px; }
  62. 62. 62 1. class="col-xx" 外層是 class="row"
 2. class="row" 裡⾯面是 class="col-xx" 3. ⾴頁⾯面內容請放在 class="col-xx" 的內層 很重要,別弄弄錯了了喔 (主要原因為空間補回及 flex)
  63. 63. 63 補充說明 Bootstrap 的中斷點
  64. 64. 64 Bootstrap 是設計來來⾏行行動優先的框架,
 透過許多 media queries 來來設立中斷點
 並製作具彈性的排版
  65. 65. 65 // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } Bootstrap 的 media queries 當寬度超過該數值以上時會套⽤用樣式
  66. 66. 66 Bootstrap 預設斷點 xs 575px sm 768px md 992px lg 1200px xl
  67. 67. 67 Bootstrap 預設斷點 BS 3 / BS4 -- / xs xs / sm sm / md md / lg lg / xl Bootstrap 4 <= 575px 576px 
 ~
 767px 768px 
 ~
 991px 992px 
 ~
 1199px >= 1200 column col-* col-sm-* col-md-* col-lg-* col-xl-*
  68. 68. 68 記得是使⽤用 xs(省略略)、sm、md、lg、xl 
 來來調整不同視圖下的欄欄寬度
  69. 69. 69 補充說明 Bootstrap 的 Flex 小說明
  70. 70. 70 Bootstrap 4 和前⼀一版最⼤大的差別在於 Flex
  71. 71. 71 col-4 col-4 col-4
  72. 72. 72 col col col
  73. 73. 73 colcol
  74. 74. 74 補充說明 Flex 完整介紹
  75. 75. C S S 3 彈 性 排 版 屬 性 FLEX
  76. 76. 76 傳統的 float 排版就如同⽔水⼀一樣可以左右的流動,但這概念念無 法應對現在多元的排版⽅方式,如:置中、垂直、等距等等。 Flex 不只解決這樣問題,並且具有更更優於 float 的彈性。
  77. 77. 77 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
  78. 78. 78 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法 外層屬性 內層屬性
  79. 79. 79 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
  80. 80. 80 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
  81. 81. 81 相 關 屬 性 外層屬性 內層
 屬性 • display:必備屬性 • flex-flow • flex-direction:決定 flex 軸線 • flex-wrap:決定換⾏行行的屬性 • justify-content:主要軸線的對⿑齊 • align-items:交錯軸線的對⿑齊 • flex • flex-grow:伸展比 • flex-shrink:收縮比 • flex-basis:絕對值  • order:排序 • align-self:單⼀一個物件的交錯軸對⿑齊
  82. 82. 82 相 關 屬 性 外層屬性 內層
 屬性 • display:必備屬性 • flex-flow • flex-direction:決定 flex 軸線 • flex-wrap:決定換⾏行行的屬性 • justify-content:主要軸線的對⿑齊 • align-items:交錯軸線的對⿑齊 • flex • flex-grow:伸展比 • flex-shrink:收縮比 • flex-basis:絕對值  • order:排序 • align-self:單⼀一個物件的交錯軸對⿑齊
  83. 83. 83 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
  84. 84. 84 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
  85. 85. 85 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
  86. 86. 86 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
  87. 87. 87 對 ⿑齊 ⽅方 法 justify-content 是依據主軸的軸線 決定物件之間的間隔⽅方法。 主 軸 對 ⿑齊 ( 外 層 ) 主軸
  88. 88. 88 對 ⿑齊 ⽅方 法 align-items 是垂直於主軸的對⿑齊 ⽅方法。 交 錯 軸 對 ⿑齊 ( 外 層 ) 主軸 交錯軸
  89. 89. 89 對 ⿑齊 ⽅方 法 align-self 是內元件本⾝身垂直於主 軸的對⿑齊⽅方法。 交 錯 軸 對 ⿑齊 ( 內 層 ) 主軸 交錯軸
  90. 90. 90 對 ⿑齊 ⽅方 法 justify-content: flex-start justify-content: flex-end justify-content: center justify-content: between justify-content: space-around
  91. 91. 91 對 ⿑齊 ⽅方 法 align-items: flex-start align-items: flex-end align-items: center 123 456 789 align-items: baseline align-items: stretch
  92. 92. 92 對 ⿑齊 ⽅方 法 align-self: flex-start align-self: flex-end align-self: center 456 align-self: baseline align-self: stretch
  93. 93. B O O T S T R A P 元 件 概 念念 COMPONENT
  94. 94. 94 元件,是 Bootstrap 為何受歡迎的主要原因, 他提供⼤大量量現成的組件讓開發者可以輕鬆組合變化
  95. 95. 95 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼 ⽂文件閱讀
  96. 96. 96 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  97. 97. 97 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  98. 98. 98 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  99. 99. 99 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  100. 100. 100 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  101. 101. 101 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  102. 102. 102 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
  103. 103. 103 補充說明 Bootstrap 與 Sass 介紹
  104. 104. 104 Sass 是 CSS 預處理理⼯工具 可以讓 Bootstrap 更更有模組化的架構
  105. 105. 105 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap)
  106. 106. 106 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap) bootstrap.css
  107. 107. 107 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap) $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; }
  108. 108. 108 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap) @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
  109. 109. 109 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap) // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
  110. 110. 110 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap) article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }
  111. 111. 111 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用
 (Bootstrap) @import "functions"; @import "variables"; @import "bootstrap"; 可⾃自⾏行行調整
  112. 112. 112 同學,對於 Sass 後⾯面章節會有完整介紹 這邊只要先知道有 Sass 即可
  113. 113. 為什什麼 Bootstrap 
 有這樣⼤大的魅⼒力力 D I F F E R E N C E S B E T W E E N B O O T S T R A P 3 A N D 4
  114. 114. 114 卡斯伯 (王志誠)
  115. 115. 115 保證持續更新 保證不額外收費 開始學習 Bootstrap!! 更更多的詳細介紹:https://goo.gl/7JuNST

×