Downloaded 608 times
![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%;
}](https://image.slidesharecdn.com/bootstrapkeynotebeta1-171012062601/85/Bootstrap-4-110-320.jpg)
Uploaded byChih-cheng Wang
Bootstrap 4 超詳盡解析
Bootstrap 4 相较于 3 版做了多项显著改进，包括从 LESS 转变为 SASS、放弃对 IE8 和 IE9 的支持，以及全面改用 flexbox 布局以提高排版灵活性。此外，更新了断点定义、rem 单位、字体大小和颜色方案，增强了组件的可用性和美观性。文档还提供了新的系统字体、盒模型的使用、以及响应式网格系统的详细说明。
![[오픈소스컨설팅] Red Hat ReaR (relax and-recover) Quick Guide](https://cdn.slidesharecdn.com/ss_thumbnails/redhatrearrelax-and-recoverquickguidev1-170419093210-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Modern Web] CSS3 Grid Layout](https://cdn.slidesharecdn.com/ss_thumbnails/cssgridnewtemplate-170810060805-thumbnail.jpg?width=640&height=640&fit=bounds)
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
- 7.
- 8.
- 9. 9 充滿⽣生命⼒力力的按鈕 按鈕不僅⾊色彩較為鮮豔，且增加了了 outline 版本的按鈕(超愛)，且在第四 版靈活的架構下，調整邊框粗細也相當容易易。
- 10. 10 靈活的變化 元件在設計上更更巧妙的運⽤用 CSS 的特性，如navbar 使⽤用了了透明的⾊色 彩，使的底⾊色能夠⾃自由的套⽤用，讓變化性不受限於框架本⾝身。
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. 24 <nav class="navbar navbar-lightbg-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-lgnavbar-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.
- 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. 備援的字體
- 31.
- 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: 10pxsolid 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.
- 36. 36 Bootstrap 的 containerClass 主要是⽤用來來定義最外層的容器 在使⽤用上分為兩兩⼤大類： 分別為應對滿版寬度及階段固定寬度兩兩種
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. 44 10px (Gutter onoutside)
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. 50 會以 960px 為基準，也是因為早期 電腦螢幕通常為1024px，960px的 設計是最為剛好。 ⽽而 12 欄欄則是較多數字的公倍數。 1024px
- 51.
- 52.
- 53. 53 940px (Total Width) 60px(Column Width) 20px (Gutter Width) 10px (Gutter on outside)
- 54.
- 55.
- 56.
- 57. 57 940px (Total Width) 60px(Column Width) 20px (Gutter Width) 10px (Gutter on outside) Gutter 呢？
- 58.
- 59.
- 60.
- 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)
- 63.
- 64. 64 Bootstrap 是設計來來⾏行行動優先的框架， 透過許多 mediaqueries 來來設立中斷點 並製作具彈性的排版
- 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.
- 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.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. C S S3 彈 性 排 版 屬 性 FLEX
- 76. 76 傳統的 float 排版就如同⽔水⼀一樣可以左右的流動，但這概念念無 法應對現在多元的排版⽅方式，如：置中、垂直、等距等等。 Flex不只解決這樣問題，並且具有更更優於 float 的彈性。
- 77. 77 F L EX 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
- 78. 78 F L EX 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法 外層屬性 內層屬性
- 79. 79 F L EX 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • Bootstrap 使⽤用到的⽅方法
- 80. 80 F L EX 需 要 了了 解 的 • 軸線的觀念念 • 相關屬性 • 對⿑齊⽅方法 • 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 OT S T R A P 元 件 概 念念 COMPONENT
- 94.
- 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.
- 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.
- 113. 為什什麼 Bootstrap 有這樣⼤大的魅⼒力力 DI 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.
- 115.