CSS階層式樣式表排版

※CSS只是為HTML結構美化網頁畫面，不能單獨存在

<aside> 🍡

命名規則：烤肉串式命名 kebab case

例如：main-container carousel-container

</aside>

CSS嵌入

內嵌若在html結構的<header>裡使用<style>標籤

外部連結 <head> <link rel=”stylesheet” href=”style.css”> </head>

選擇器

標籤選擇器

例如： body{ font-size:xx-large;(必須有分號;做為結束語) }

類別選擇器

element

div{ }

class

.自訂class{ }

#自訂id{ }

擬態選擇器

※用法：類別選擇器或標籤選擇器後方:hover{ }

:link 初始效果

:visited 鼠標按下過

:hover 鼠標盤旋時 ※例如：(滑鼠盤旋時字體變大) li:hover{ font-size:larger }

:focus 鼠標獲得焦點時

:active 按著不放時

:disabled 元素被禁用時生效

:enable 元素啟用時生效

:checked 當<input>被選中時生效

:root 根元素

:not(選擇器) 選擇所有不符合指定選擇器的元素

:is(選擇器) 選擇符合其中任意一個條件的元素例如： h1:is(.title, .highlight) { color: red; }

:where(選擇器)對樣式優先級影響較低

關係選擇器

</div>

A+B 相鄰兄弟選擇器 (緊接在 A 後面的兄弟元素 B) 例如： .child1 + .child2 { background-color: yellow; } ＃只影響child2，child3不受影響
A~B 通用兄弟選擇器 (所有跟 A 是兄弟且位於 A 後面的元素 B) 例如： .child~div{ background-color: yellow; } ＃影響child2、child3，不影響grandchild
A>B 子選擇器 (選擇A的直接子元素，不包括孫元素) 例如： .parent>div{ background-color: yellow; } #影響child1、child2、child3，不影響grandchild
A B 後代選擇器 (選擇A的後代無論子或孫元素) 例如： .parent grandchild{ background-color: yellow; } #影響grandchild

常見單位

px：像素量，直觀，但不會自動調整，不具響應式功能

%：百分比，相對於父元素大小自動調整

vh：視窗高度，例如10vh代表視窗高度的10%

vw：視窗寬度

em：相對於當前元素的字體大小來計算，例如：font-size: 2em;(字體大小為父元素大小的兩倍)

rem：相對於根元素(html)來計算

視窗單位(Viewport Units) ※例如一個寬1000px，高500px的視窗 vmin 較小的那個的百分比，此時就是5px vmax 較大的那個的百分比，此時就是10px

樣式相關

尺寸

屬性

box-sizing 盒子尺寸 content-box 預設值，尺寸只包含height和width，不包括框限border或內距padding border-box 尺寸包含height和width、border、padding ※較容易計算尺寸，以免跑版

height 高

width 寬

max-width & height 最高尺寸，防止內容溢出或限制該元素最大尺寸

min-width & height 最小尺寸，防止內容溢出或限制該元素最大尺寸

clamp( ) 自動調整尺寸參數 ※例如：font-size: clamp(16px, 5vw, 32px); 字大小在16px和32px之間，並根據視口寬度自動調整

text & font 文字&文本

屬性

color 文字顏色

※color: inherit 繼承父元素設定的文字顏色，可以用來去除超連結藍色

text-align 文本水平對齊方式

取值 left 靠左對齊 right 靠右對齊 center 居中對齊 justify 兩端對齊（使文本填滿整個區塊） start & end 根據文本的書寫方向（左到右或右到左）自動調整對齊方式 inherit 繼承父元素設定

text-decoration 文字的裝飾效果

取值 none 無效果＃可以用來去除超連結的底線 underline 下劃線 line-through 刪除線 overline 上劃線

line-height 設定行高

letter-spacing 文字間距

font-family 文本的字體

＃font-family: ‘Arial’, sans-serif; 代表優先使用 Arial 字體，若無則使用 sans-serif

font-size 字體大小

#larger、smaller這種相對大小是相對於父元素或元素本身設定的大小

font-weight 字體粗細

取值 normal 正常字重 bold 加粗字重 bolder 比父元素字重輕 lighter 比父元素字重輕數值：100~900 ＃normal是400，bold是700

font-style 字體樣式

取值 normal 普通 italic 斜體 oblique 傾斜字體 inherit 繼承父元素設定

text-transform 大小寫轉換

取值 none 不做任何轉換 capitalize 每個單詞首字母大寫 uppercase 所有字母轉大寫 lowercase 所有字母轉小寫

background 背景

屬性

※可以簡寫同時設定 background: [background-image] [background-position] [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip]; 例如：background: url(’image.jpg’) center no-repeat;

background-image 背景圖片 ※用法：background-image: url(’image.jpg’);

background-position 背景圖片位置

※用法：background-position: x-position y-position;

取值 top bottom left right center

background-repeat 背景圖片重複

取值 repeat 重複顯示 no-repeat 不重複顯示 repeat-x 只在x軸上重複顯示 repeat-y 只在y軸上重複顯示

background-size 背景圖片尺寸

取值 auto cover 覆蓋整個元素 contain 完全顯示，保持比例，並使圖像適應元素的大小

background-attachment 背景圖片隨頁面滾動

取值 scroll 隨頁面滾動 fixed 固定位置 local 隨元素內容的滾動而滾動

background-clip 背景圖片裁剪區域 background-origin 背景圖片定位區域

取值 border-box 背景延伸到邊框區域 padding-box 背景延伸到內邊距區域 content-box 背景延伸到內容區域

color 顏色

屬性

顏色漸層

＃用法：background: linear-gradient 不是用background-color

＃指定漸層停靠點：(紅色停靠點佔75%的位置，藍色停靠點佔25%)

background: linear-gradient(to right, red 75%, blue 25%);

linear-gradient 漸層用法：background: linear-gradient(45deg, #顏色, #顏色); ※deg：漸層角度
radial-gradient 徑向漸層用法：radial-gradient(circle, red, yellow, green); ※circle圓型、ellipse橢圓形
conic-gradient 錐狀漸層用法：
透明度
- alpha值 顏色透明度用法：background-color: rgba(0, 0, 0, 0.5); ※0.5=透明度50%
opacity 元素透明度 ※0完全透明 1完全不透明

mix-blend-mode 混合模式=PS的遮罩

取值 normal 預設(正常) multiply 色彩增值(增加暗部，白色透明) screen 濾色 overlay 覆蓋(增加對比) darken 變暗 lighten 變亮 color-dodge 加亮顏色 color-burn 加深顏色 hard-light 實光 soft-light 柔光 difference 差異化 exclusion 負片 hue 色相 saturation 飽和度 color 顏色 luminosity 明度

filter 過濾器

取值 blur() 模糊 brightness() 亮度 contrast() 對比度 grayscale() 灰階 hue-rotate() 色調(輸入角度deg) invert() 反轉 opacity() 透明度 saturate() 飽和度 sepia() 骨董效果(褐色) drop-shadow() 陰影

border 邊框

屬性

簡寫：border: [寬度] [樣式] [顏色]; 例如：border: 2px solid black;

單邊邊框 border-top border-bottom border-left border-right
border-style 邊框樣式
- 取值 none 無邊框 solid 實線邊框 dashed 虛線邊框 dotted 點線邊框 double 雙線邊框 groove 凹槽(類似雕刻效果) ridge 脊狀(groove的反效果) inset 內嵌邊框 outset 外嵌邊框
border-width 邊框寬度 ※可以是thin、medium、thick

border-color 邊框顏色

border-radius 圓角 ※分別更改：border-radius:左上右上右下左下;

排版相關

position 定位

取值

static 預設

relative 相對定位：依據文檔流中的位置定位

absolute 絕對定位：相對於最近的定位祖先元素定位(父元素需要有relative定位) ※脫離文檔流

fixed 固定定位：固定在視窗 ※脫離文檔流

sticky 黏性定位：介於relative與fixed之間

測試

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>
body { 
font-family: Arial, sans-serif; 
margin: 0; padding: 0; height: 2000px; 
<!—讓頁面變長，方便測試—> 
} 
header { 
background-color: #333; 
color: white; 
padding: 20px; 
text-align: center; 
} 
.menu { 
background-color: #444;
padding: 10px 20px;
position: sticky;
<!—讓選單能隨著頁面滾動而固定—> 
top: 0; 
<!—使選單固定在視窗頂部—> 
z-index: 1000; 
<!—保證選單在最上層—> } 
.menu a { 
color: white; 
margin: 0 15px; 
text-decoration: none; 
} 
.menu a:hover { 
text-decoration: underline; 
} 
</style> 
<title>Sticky Menu Example</title>
</head> 
<body> 
<header> 
<h1>網站標題</h1> 
</header> 
<div class="menu"> 
<a href="#">首頁</a> 
<a href="#">關於我們</a> 
<a href="#">服務</a> 
<a href="#">聯絡我們</a> 
</div> 
<div> 
<h2>頁面內容</h2> 
<p>這是一些內容，頁面長度很大，讓你可以滾動測試選單是否會固定。</p> 
<!-- 模擬長頁面 --> 
</div> 
</body> 
</html>

※以上除static以外都可以top、right、left、bottom調整位置

元素邊界

margin 外距(相對於外部元素) ※會增加元素在文檔流中的實際大小 ※縮寫：margin: 上右下左; 或margin: 上下左右 margin-top 上外距 margin-bottom 下外距 margin-left 左外距 margin-right 右外距
padding 內距(相對於內部元素) ※會增加元素在文檔流中的實際大小，因此用box-sizing: border-box可以避免跑版 padding-top 上內距 padding-bottom 下內距 padding-left 左內距 padding-right 右內距

元素邊距

屬性

※需用在脫離文檔流(如absolute、fixed)的定位元素上，相對於父元素的位置

top 上邊距

bottom 下邊距

left 左邊距

right 右邊距

overflow 溢出

取值

※控制內容溢出容器的表現方式

visible 內容會超出容器邊界並顯示出來 ※不會顯示滾動條

hidden 超過容器邊界的內容隱藏 ※不會顯示滾動條

scroll 即使內容未超出容器，也會顯示滾動條；當內容超出容器時，則可以滾動查看

auto 只有當內容超出容器時，會顯示滾動條，並且滾動條會根據需要顯示（垂直或水平方向）

※overflow-x & overflow-y單獨控制水平和垂直方向

display顯示控制

flex 彈性盒子

display: flex 啟用flex布局

※較適用於一維布局

父元素屬性

flex-direction 控制子元素排列方向

取值 row 預設(水平排列) row-reverse 反向水平排列 column 上至下垂直排列 column-reverse 下至上垂直排列

flex-wrap 控制子元素是否換行

取值 nowrap 不換行 wrap 子項會自動換行 wrap-reverse 反向自動換行

子元素屬性

flex 彈性分配 ※可以簡寫 flex: 0等於flex: 0 0 auto 相當於flex-grow: 0 + flex-shrink: 0 + flex-basis: auto flex: 1等於flex: 1 1 0% flex-grow 元素在容器內可伸展的比例(可以是任何數值)
- 取值 flex-grow: 0 元素不會擴展(即使有剩餘空間) flex-grow: 1 元素會擴展填滿剩餘空間 flex-grow: N 元素會比flex-grow值較低的元素擴展更多
flex-shrink 元素在容器空間不足時可收縮的比例
- 取值 flex-shrink: 0 元素不會收縮 flex-shrink: 1 元素會在空間不足時收縮，並按照比例縮小 flex-shrink: N 會比flex-shrink值較低的元素收縮更多
flex-basis 元素的預設尺寸
- 取值 ※輸入尺寸數值的話以主軸為準例如父元素flex-direction是row就是以width為準 flex-basis: auto 預設值

order 排列順序，數值越小越靠前

grid 網格布局

※二維布局

父元素屬性

display: grid 啟用grid布局

grid-template-columns 分配垂直網格布局

grid-template-rows 分配水平網格布局

grid-template-areas 為子元素命名

子元素屬性

grid-column 定義子元素在哪些網格橫跨

grid-row

例如：grid-row: 2 在第二列開始

grid-column: span 2 橫跨兩列

布局通用屬性

父屬性

justify-content ※主軸(axis)

取值 flex-start 靠上 flex-end 靠下 center 居中 space-between 容器與第一項&最後一項間沒有間隔 space-around 每個項目周圍的空間相等，容器邊緣與項目之間的間隔會是項目間隔的一半 space-evenly 容器與每個項目之間間隔相等

align-items 用於單行排版 ※交叉軸(cross-axis)

取值 stretch 拉伸(自動填滿高度) flex-start 靠上 flex-end 靠下 center 居中 baseline 文字基線對齊

align-content 用於多行排版

取值 space-between 容器與第一項&最後一項間沒有間隔 space-around 每個項目周圍的空間相等，容器邊緣與項目之間的間隔會是項目間隔的一半 space-evenly 容器與每個項目之間間隔相等
gap 控制項目間的間隔例如：gap: 20px 10px; /* 水平方向間距為20px，垂直方向間距為10px */ 單獨設定： column-gap row-gap

動畫相關

transition 過渡效果

基本語法

#首先需要有狀態變化，例如:hover{ width:200%; }

transition: <property> <duration> <timing-function> <delay>;

property：指定要過渡的屬性，例如width、color等或all表示所有可過渡屬性

duration：過渡時間，例如1s、500ms等

timing-function：過渡進行方式

取值 ease 緩和開始&結束 linear 勻速過渡 ease-in 從慢到快 ease-out 從快到慢 ease-in-out 開始和結束時較慢，中間較快 cubic-bezier(n, n, n, n) 自訂速度函數

delay：過渡開始前的延遲時間

#可以分別設定，例如：div{transition:{ width 1s ease, background-color 3s ease} 寬度和背景色過渡速度會不同

transform 變形

基本語法

transform: function(value);

function 變換函數
- translate 平移 translateX 水平位移 translateY 垂直位移
- scale 縮放例如：scale(1.5)放大1.5倍 scale(0.5)縮小0.5倍 scaleX 僅水平方向縮放 scaleY 僅垂直方向縮放
- rotate 旋轉例如：rotate(45deg) 旋轉45度
  - 單位 deg 角度 rad 弧度 turn 轉一圈
- skew 例如：skew(30deg, 15deg) 水平傾斜30度，垂直傾斜15度
matrix() 矩陣轉換

value 參數

互動相關

鼠標

cursor 指標樣式 ※僅列出常用取值 default 預設，通常是箭頭 pointer 手指形狀，用於可交互元素 text 文本光標，用於可編輯文本區域或文本輸入框中 move 四方箭頭，需要拖曳的物件 wait 圓圈或沙漏，頁面或應用正在加載或進行長時間處理時使用 progress 圓圈+箭頭(仍可以與其他元素互動) not-allowed 禁用，用於無效或不可用的元素 none 無光標

滾動

auto 預設(瞬間抵達)

smooth 平滑滾動

媒體查詢+grid網格布局做的RWD範例

代碼

 <!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title>
<style>
body{ padding: 5vw;
 margin:0;
 border:none;
text-align: center;
 }
.content{ 
/*啟用grid網格布局*/
display: grid;
 /*分配垂直網格，第一份為1/5，第二份為3/5，第三份為1/5*/
grid-template-columns: 1fr 3fr 1fr; 
/*分配間隔*/ 
gap:2.5vw; 
} 
aside,main{ 
box-sizing: border-box;
border: 1px black solid; 
height: 80vh; 
} 
main{ 
/*啟用grid網格布局*/ 
display: grid; 
/*分配垂直網格，平均成三份(1/3重複三次)*/ 
grid-template-columns: repeat(3,1fr); 
padding:1vw; gap:1vw; } 
.main-content{ 
border: 1px black solid; 
text-align: center; 
width: 100%; 
}
 /*媒體查詢(當視窗的虛擬像素低於768px時啟用*/ 
@media(max-width:768px){ 
.content{ 
/*分配垂直網格，第一份為1/4，第二份為2/4，第三份為1/4*/ 
grid-template-columns: 1fr 2fr 1fr; 
} 
main{ 
/*分配垂直網格，只有一份，多餘分會被擠到下面*/ 
grid-template-columns: 1fr; 
/*分配水平網格，第一份為1/6，第二份為2/6，第三份為3/6*/ 
grid-template-rows: 1fr 2fr 3fr; 
height: auto; 
gap:1em; 
padding: 1em; 
} 
}
</style> 
</head> 
<body>
 <div class="content">
 <aside>左側區塊</aside>
 <main>
 <div class="main-content">區塊一</div>
 <div class="main-content">區塊二</div>
 <div class="main-content">區塊三</div>
 </main> <aside>右側區塊</aside> </div>
 </body>
 </html>

配色網站參考

https://www.happyhues.co/palettes/15

BSICON網站

https://icons.getbootstrap.com

SASS預處理器

環境設定

首先安裝Node.js 設定環境變數→path變數

C:\\Program Files\\nodejs\\
	C:\\Users\\你的使用者名稱\\AppData\\Roaming\\npm

cmd輸入指令

基本語法

npm install -g sass

Sass 允許定義變數，避免重複編寫 CSS 內容

$primary-color: #3498db;
$font-stack: 'Arial', sans-serif;

body {
color: $primary-color;
font-family: $font-stack;
}

巢狀結構（Nesting）

nav {
	ul {
		list-style: none;
	}
	li {
		display: inline-block;
	}
	a {
		text-decoration: none;
		color: blue;
	}
}

混合（Mixins）

@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}

.container {
@include flex-center;
height: 100vh;
}

擴展（Extend）

.btn {
padding: 10px 20px;
border-radius: 5px;
}
.primary-btn {
@extend .btn;
background-color: blue;
color: white;
}

運算（Operators）

SASS支援數學運算

.container {
width: 100% - 20px;
padding: 10px * 2;
}

特殊運算

顏色運算函式功能應用結果 lighten($color, $amount) 顏色變亮 lighten(#3498db, 20%) #82c4f6 darken($color, $amount) 顏色變暗 darken(#3498db, 20%) #186190 saturate($color, $amount) 增加飽和度 saturate(#3498db, 20%) 更鮮豔的藍 desaturate($color, $amount) 減少飽和度 desaturate(#3498db, 20%) 更灰暗的藍 adjust-hue($color, $degrees) 旋轉色輪(改變色相) adjust-hue(#3498db, 45deg) 變成不同色系 rgba($color, $alpha) 設定透明度 rgba(#3498db, 0.5) rgba(52, 152, 219, 0.5) opacify($color, $amount) 增加不透明度 opacify(rgba(52, 152, 219,0.5), 0.2) rgba(52, 152, 219, 0.7) transparentize($color, $amount) 增加透明度 transparentize(rgba(52, 152, 219,0.5), 0.2) rgba(52, 152, 219, 0.3)
字串函式函式功能應用結果 quote($string) 加上引號 quote(hello) “hello” unquote($string) 去掉引號 unquote(”hello”) hello to-upper-case($string) 轉大寫 to-upper-case(hello) HELLO to-lower-case($string) 轉小寫 to-lower-case(HELLO) hello
清單函式 $list : 10px 20px 30px; 函式功能應用結果 length($list) 回傳列表長度 length(10px, 20px, 30px) 3 nth($list, $index) 取得第n個值 nth(10px 20px 30px, 2) 20px append($list, $value) 在列表末尾添加值 append(10px 20px , 30px) 10px 20px 30px join($list1, $list2) 合併兩個列表 join(10px 20px, 30px 40px) 10px 20px 30px 40px
地圖函式功能應用結果 map-get($map, $key) 取得 Map 內的值 map-get($colors, primary) blue map-keys($map) 取得所有 Key map-keys($colors) primary, secondary map-values($map) 取得所有值 map-values($colors) blue, red

條件與迴圈

@if條件

語法(類似於JavaScript) @if 條件 { // 執行這段 } @else if 其他條件 { // 執行這段 } @else { // 執行這段 }
應用：主題色切換 $theme: dark; body { @if $theme == dark { background: black; color: white; } @else if $theme == light { background: white; color: black; } @else { background: gray; color: yellow; } }

@for迴圈

基本語法 @for $變數 from 開始 through 結束 { // 使用 $變數來動態產生樣式 }
應用：自動產生class為.box-1到.box-5

@for $i from 1 through 5 {
  .box-#{$i} {
    width: 10px * $i;
  }
}

@while迴圈

應用：動態產生border: 1px到border: 5px $i: 1; @while $i <= 5 { .border-#{$i}px { border: #{$i}px solid black; } $i: $i + 1; }

@each遍歷

應用：遍歷顏色陣列 $colors: red, blue, green; @each $color in $colors { .text-#{$color} { color: $color; } }
應用：遍歷鍵值對（Map） $sizes: (small: 10px, medium: 15px, large: 20px); @each $size, $value in $sizes { .btn-#{$size} { font-size: $value; } }

模組化（Import & Use）

拆分SCSS檔案

/my-project ├── scss/ │ ├── _variables.scss # 變數 │ ├── _mixins.scss # Mixin │ ├── main.scss # 主 SCSS（會引入其他 SCSS） ├── css/ │ ├── main.css # 轉譯後的 CSS ├── index.html

引入

/*到main.scss引入*/
@use 'variables' as v;
@use 'mixins' as m;

body {
background: v.$primary-color;
}

轉譯

HTML不能直接執行SCSS 需要先轉譯成CSS

在你的命令提示字元CMD中輸入以下指令

sass --watch style.scss:style.css

會自動監聽並轉譯

Bootstrap

1. 佈局系統（Layout）

Bootstrap 主要透過 Grid 網格系統 來建立響應式排版。

1.1 容器（Container）

類別	功能
`.container`	固定寬度的內容區塊（依裝置大小變化）
`.container-fluid`	100% 寬度的內容區塊（滿版）

範例

<div class="container">這是固定寬度的內容</div>
<div class="container-fluid">這是滿版內容</div>

1.2 網格系統（Grid System）

Bootstrap 採用 12 欄 排版，可以調整欄位的大小，適應不同裝置。

響應式斷點

類別	適用範圍
`col-`	超小螢幕（手機）
`col-sm-`	小螢幕（≥576px）
`col-md-`	中螢幕（≥768px）
`col-lg-`	大螢幕（≥992px）
`col-xl-`	超大螢幕（≥1200px）

範例

<div class="row">
    <div class="col-md-4 bg-primary text-white">佔 4 欄</div>
    <div class="col-md-8 bg-success text-white">佔 8 欄</div>
</div>

2. 按鈕（Buttons）

Bootstrap 提供多種按鈕樣式。

2.1 基本按鈕

類別	說明
`.btn`	基本按鈕樣式
`.btn-primary`	藍色按鈕
`.btn-secondary`	灰色按鈕
`.btn-success`	綠色按鈕
`.btn-danger`	紅色按鈕
`.btn-warning`	黃色按鈕
`.btn-info`	淺藍按鈕
`.btn-dark`	黑色按鈕
`.btn-light`	白色按鈕

2.2 邊框按鈕

類別	說明
`.btn-outline-primary`	藍色邊框按鈕
`.btn-outline-secondary`	灰色邊框按鈕
`.btn-outline-success`	綠色邊框按鈕

2.3 按鈕大小

類別	說明
`.btn-lg`	大按鈕
`.btn-sm`	小按鈕
`.w-100`	100% 寬度按鈕

範例

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-outline-danger btn-lg">紅色邊框大按鈕</button>
<button class="btn btn-success w-100">綠色全寬按鈕</button>

3. 文字 & 顏色

Bootstrap 提供多種文字樣式，讓排版更靈活。

3.1 文字顏色

類別	說明
`.text-primary`	主要文字
`.text-secondary`	次要文字
`.text-success`	成功文字
`.text-danger`	危險文字
`.text-warning`	警告文字
`.text-info`	資訊文字
`.text-dark`	黑色文字
`.text-light`	白色文字

3.2 背景顏色

類別	說明
`.bg-primary`	主要背景
`.bg-secondary`	次要背景
`.bg-success`	成功背景
`.bg-danger`	危險背景
`.bg-warning`	警告背景
`.bg-info`	資訊背景

範例

<p class="text-danger">這是紅色文字</p>
<div class="bg-warning p-3">這是黃色背景</div>

4. 間距（Spacing）

Bootstrap 提供 m（margin）和 p（padding）來調整間距。

類別	說明
`m-0` ~ `m-5`	外距
`p-0` ~ `p-5`	內距
`mt-3`	上外距
`mb-3`	下外距
`ms-3`	左外距
`me-3`	右外距

範例

<div class="p-3 bg-light">這個有內距 3</div>
<div class="mt-5">這個有上外距 5</div>

5. 圖片

類別	說明
`.img-fluid`	讓圖片自適應
`.rounded`	圓角圖片
`.rounded-circle`	圓形圖片
`.mx-auto d-block`	置中圖片

範例

<img src="<https://source.unsplash.com/400x300>" class="img-fluid rounded">

6. 表單（Forms）

類別	說明
`.form-control`	文字輸入框
`.form-select`	下拉選單
`.form-check`	核取方塊
`.input-group`	組合輸入框

範例

<input type="text" class="form-control" placeholder="輸入文字">

7. 導覽列（Navbar）

類別	說明
`.navbar`	導覽列
`.navbar-expand-lg`	大螢幕展開
`.navbar-dark bg-dark`	深色導覽列
`.navbar-light bg-light`	淺色導覽列
`.nav-item`	導覽列項目
`.nav-link`	導覽列連結

範例

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">網站名稱</a>
</nav>