Bootstrap 4 超詳盡解析
•
104 gefällt mir•20,630 views
本簡報整理了 BS4 許多重要觀念及心法 包含 Grid system, Flex, 文字細節等，看更多：https://goo.gl/7JuNST
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Bootstrap 4 超詳盡解析
Ähnlich wie Bootstrap 4 超詳盡解析 (20)
Mehr von Chih-cheng Wang
Bootstrap 4 超詳盡解析
- 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 從 Less 轉移到 Sass 當初 Sass 受限於編譯速度，所以 Bootstrap 不願使⽤用 Sass 來來開發，⽽而 Libsass 讓 Sass 不再受限於 Ruby 環境，所以開發團隊也轉換到 Sass 以 擁抱更更⼤大的社群能量量。
- 3. 3 IE 掰 第四版放棄對 IE8、IE9 及 iOS6 的⽀支援，換來來的是更更好、更更有彈性的排 版語法。
- 4. 4 全⾯面改⽤用 flex 排版放棄使⽤用已久的 float，取⽽而代之的是 flexbox，這⼀一個新屬性讓排 版不在⼀一個⽔水平⾯面的左右⽅方開始，無論是⿑齊左右、等距分配、元素置中、 垂直排版都不再是問題。 缺乏彈性的 float
- 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 rem px 到 rem px 是絕對的數值單位，網⾴頁開發需要更更有彈性的數值單位，來來符合不同 裝置、瀏覽器的運⽤用，⽽而 rem 能透過 media query 輕易易的切換不同裝置 下的整體尺⼨寸。 px
- 9. 9 充滿⽣生命⼒力力的按鈕 按鈕不僅⾊色彩較為鮮豔，且增加了了 outline 版本的按鈕 (超愛)，且在第四 版靈活的架構下，調整邊框粗細也相當容易易。
- 10. 10 靈活的變化 元件在設計上更更巧妙的運⽤用 CSS 的特性，如 navbar 使⽤用了了透明的⾊色 彩，使的底⾊色能夠⾃自由的套⽤用，讓變化性不受限於框架本⾝身。
- 14. 14 文件說明
- 15. 15 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 16. 16 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 17. 17 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 18. 18 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 19. 19 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 20. 20 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 21. 21 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 22. 22 Getting started Layout Content Components Utilities Extend Migration 快速開始 排版 內容 元件 通⽤用類別 擴增 更更版紀錄
- 24. 24 <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav> "Class" ⼀一般稱為 類別， 在網⾴頁中主要是套⽤用樣式的
- 25. 25 • ⼀一個 class 內可以⽤用空⽩白隔開多個 class 名稱 • ⼀一個標籤只能有⼀一個 class 屬性 <nav class="navbar" class="navbar-light"> <a class="navbar-brand" href="#">Navbar</a> </nav>
- 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 補充說明 系統預設字體
- 28. 28 由於每個作業系統均有合適他最佳閱讀的系統字體，所以 Bootstrap 4 放棄使⽤用 Helvetica Neue, Helvetica, 和 Arial 作為預設的字體。
- 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 font-family: /* 1 */ -apple-system, BlinkMacSystemFont, /* 2 */ "Segoe UI", "Roboto", "Ubuntu", "Droid Sans", /* 3 */ "Helvetica Neue", sans-serif; 1. 使⽤用系統預設的字體 2. 指定已知的系統 UI 字體 3. 備援的字體
- 32. 32 由於 padding 及 border 會改變元素運算後的寬度， 避免⿇麻煩的計算，Bootstrap 預設載入 box-sizing: border-box 定義的寬度 = 實際呈現的寬度
- 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. 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
- 36. 36 Bootstrap 的 container Class 主要是⽤用來來定義最外層的容器 在使⽤用上分為兩兩⼤大類： 分別為應對滿版寬度及階段固定寬度兩兩種
- 44. 44 10px (Gutter on outside)
- 45. width: 960px 45 超出的 padding超出的 padding
- 46. 46 補充說明 網格系統
- 50. 50 會以 960px 為基準，也是因為早期 電腦螢幕通常為1024px，960px 的 設計是最為剛好。 ⽽而 12 欄欄則是較多數字的公倍數。 1024px
- 51. 51
- 52. 52
- 53. 53 940px (Total Width) 60px (Column Width) 20px (Gutter Width) 10px (Gutter on outside)
- 57. 57 940px (Total Width) 60px (Column Width) 20px (Gutter Width) 10px (Gutter on outside) Gutter 呢？
- 58. 58 .col-* { padding-right: 15px; padding-left: 15px; }
- 59. 59
- 61. 61 .col-* { padding-right: 15px; padding-left: 15px; } .row { margin-right: -15px; margin-left: -15px; }
- 62. 62 1. class="col-xx" 外層是 class="row" 2. class="row" 裡⾯面是 class="col-xx" 3. ⾴頁⾯面內容請放在 class="col-xx" 的內層 很重要，別弄弄錯了了喔 (主要原因為空間補回及 flex)
- 64. 64 Bootstrap 是設計來來⾏行行動優先的框架， 透過許多 media queries 來來設立中斷點 並製作具彈性的排版
- 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 當寬度超過該數值以上時會套⽤用樣式
- 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-*
- 69. 69 補充說明 Bootstrap 的 Flex 小說明
- 70. 70 Bootstrap 4 和前⼀一版最⼤大的差別在於 Flex
- 72. 72 col col col
- 73. 73 colcol
- 75. C S S 3 彈 性 排 版 屬 性 FLEX
- 76. 76 傳統的 float 排版就如同⽔水⼀一樣可以左右的流動，但這概念念無 法應對現在多元的排版⽅方式，如：置中、垂直、等距等等。 Flex 不只解決這樣問題，並且具有更更優於 float 的彈性。
- 77. 77 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
- 78. 78 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法 外層屬性 內層屬性
- 79. 79 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
- 80. 80 F L E X 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
- 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 相 關 屬 性 外層屬性 內層 屬性 • display：必備屬性 • flex-flow • flex-direction：決定 flex 軸線 • flex-wrap：決定換⾏行行的屬性 • justify-content：主要軸線的對⿑齊 • align-items：交錯軸線的對⿑齊 • flex • flex-grow：伸展比 • flex-shrink：收縮比 • flex-basis：絕對值 • order：排序 • align-self：單⼀一個物件的交錯軸對⿑齊
- 83. 83 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
- 84. 84 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
- 85. 85 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
- 86. 86 對 ⿑齊 ⽅方 法 主軸 flex-direction: row (default) flex-direction: row-reverse flex-direction: column flex-direction: column-reverse
- 87. 87 對 ⿑齊 ⽅方 法 justify-content 是依據主軸的軸線 決定物件之間的間隔⽅方法。 主 軸 對 ⿑齊 ( 外 層 ) 主軸
- 88. 88 對 ⿑齊 ⽅方 法 align-items 是垂直於主軸的對⿑齊 ⽅方法。 交 錯 軸 對 ⿑齊 ( 外 層 ) 主軸 交錯軸
- 89. 89 對 ⿑齊 ⽅方 法 align-self 是內元件本⾝身垂直於主 軸的對⿑齊⽅方法。 交 錯 軸 對 ⿑齊 ( 內 層 ) 主軸 交錯軸
- 90. 90 對 ⿑齊 ⽅方 法 justify-content: flex-start justify-content: flex-end justify-content: center justify-content: between justify-content: space-around
- 91. 91 對 ⿑齊 ⽅方 法 align-items: flex-start align-items: flex-end align-items: center 123 456 789 align-items: baseline align-items: stretch
- 92. 92 對 ⿑齊 ⽅方 法 align-self: flex-start align-self: flex-end align-self: center 456 align-self: baseline align-self: stretch
- 93. B O O T S T R A P 元 件 概 念念 COMPONENT
- 95. 95 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼 ⽂文件閱讀
- 96. 96 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 97. 97 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 98. 98 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 99. 99 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 100. 100 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 101. 101 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 102. 102 ⽂文件閱讀 - 基本元件範例例 - 元件樣式變化 - 元件的變化 - grid 或 Utilities 等混合使⽤用 - 網⾴頁親和性 - 元件與 JavaScript - 編譯說明⽂文件 - 錢字號開頭的程式碼
- 103. 103 補充說明 Bootstrap 與 Sass 介紹
- 104. 104 Sass 是 CSS 預處理理⼯工具 可以讓 Bootstrap 更更有模組化的架構
- 105. 105 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用 (Bootstrap)
- 106. 106 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用 (Bootstrap) bootstrap.css
- 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 - 是 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 - 是 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 - 是 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 - 是 CSS 前置語⾔言 - 讓 CSS 更更容易易被管理理 - 變數 - @include - @import - 讓 CSS 更更像程式語⾔言 - 具有運算能⼒力力 - 有函式庫可以運⽤用 (Bootstrap) @import "functions"; @import "variables"; @import "bootstrap"; 可⾃自⾏行行調整
- 112. 112 同學，對於 Sass 後⾯面章節會有完整介紹 這邊只要先知道有 Sass 即可
- 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 卡斯伯 (王志誠)