Mais conteúdo relacionado Semelhante a Bootstrap 4 超詳盡解析 (20) Mais de Chih-cheng Wang (11) 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 以
擁抱更更⼤大的社群能量量。
6. 6
rem
px 到 rem
px 是絕對的數值單位,網⾴頁開發需要更更有彈性的數值單位,來來符合不同
裝置、瀏覽器的運⽤用,⽽而 rem 能透過 media query 輕易易的切換不同裝置
下的整體尺⼨寸。
px
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 作為⽬目標對應
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
62. 62
1. class="col-xx" 外層是 class="row"
2. class="row" 裡⾯面是 class="col-xx"
3. ⾴頁⾯面內容請放在 class="col-xx" 的內層
很重要,別弄弄錯了了喔
(主要原因為空間補回及 flex)
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-*
75. C S S 3 彈 性 排 版 屬 性
FLEX
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
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";
可⾃自⾏行行調整