---
tags: Bootstrap5網頁切版整合術
---

# 2. Bootstrap 文件介紹
## 知識點:box-sizing
<!--ok-->
* 由於padding和border會改變元素運算後的寬度，避免麻煩的計算，
bs預設會載入box-sizing:border-box;
定義的寬度=實際呈現的寬度

* 盒模型不含margin

* 範例 box2設定box-sizing:border-box;
不受padding和border影響 box尺寸為200px

## 知識點: css variables
bs5使用很多css變數

### (1) 全域變數:
* 定義在最根部，所有元件都可以套用。用兩個--加上自定義名稱，再用var這個方法來呼叫

:root{
- -primary:#69f0ae;

}

.bg-primary{
background-color:var(--primary);
}


### (2) 區域變數:
以範例來說只有.local下層的primary會套用橘色

## 知識點: 單位rem、em
bs最常使用到的單位
### (1) em:
* 採用**繼承**的形式，外層的大小會影響到尺寸

範例"em2"外層是2em=32px，包在內層"em2"會加乘變成64px

### (2) rem:
* 只會受到html或:root影響，body標籤不會影響

範例"rem2"受到html標籤影響變成40px


範例"em2" 受到body{fz20px} 影響，所以文字變成40px，"em2"則不變

* 可以在開發者工具/computed搜尋font-size就可以知道運算結果1em=16px(預設) 2em=32px 二倍文字大小


## 知識點: 系統預設字體
### (1) windows:
使用微軟正黑體時，需用英文名稱

### (2) mac ios:
字體有新舊版差異，英文字體san fransisco/中文字體蘋方PingFang為新版，Helvetica Nenu/Heiti TC黑體繁為舊版，也可直接套用-apple-system

### (3) android:
notos sans(google開源字體)使用也非常廣範，有網頁版可使用

### (4) bs字體
* 使用系統預設並指定已知的ui字體，若搜尋不到時就用sans-serif黑體
* 以英文字體為主，**微軟正黑需手動加**

## cssreset做了什麼
1. 套用bs預設字體、字體大小、行間距等，
* bs使用css變數方式來套用，
例如 字體font-family，點擊變數var(--bs-font-sans-serif)就可以看到有哪些設定

* bs也有預設樣式，套用css可清除預設樣式
在bs文件/getting started/Introduction有css link (已含reboot不需另外再貼上語法) [reboot css github](https://github.com/twbs/bootstrap/blob/v5.1.0/dist/css/bootstrap-reboot.css)

2. 套用box-sizing:border-box;

3. 套用list等其他標準normalize樣式
預設皆有list的點，項目前面的點可用class="list-unstyled" 來清除

4. 包含bootstrap所釋出的變數色彩
:root裡的所有顏色都可以套用，套用方式如範例var(--bs-primary)

## 六角Bootstrap 練習手冊
* 在vscode 使用套件Live Server才能正常運行
* ctrl+p貼上檔名搜尋並開啟

## 文字運用
* `<del>、<s>、`和`<ins>、<u>`看起來很像，`<del>`、`<ins>` 現在較常用，`<s>`、`<u>`較少用已逐漸取代。
* `<abbr> `縮小，停留一下會出現title屬性裡的完整文字，若要讓縮小文字在小一些可加入class="initialism"

<h2>縮寫</h2>

<div class="demo">
  <p><abbr title="attribute">attr</abbr></p>
  <p><abbr title="HyperText Markup Language" class="initialism">加入 initialism</abbr></p> 
</div>

* 對齊
bs5 text-left→改成text-start
text-right改成text-end

* 列表
使用class="list-unstyled" 來清除項目符號

## 圖片運用
* 圖片本身的盒模型是display-inline-block，可將.text-center加在圖片外層做置中
* 圖片響應式` .img-fluid`

## 表格運用
* 巢狀表格不會繼承邊框樣式。需分開設定
* 表格標題`<caption>` 預設在表格最下方，若要放在表格最上方，要在外層加上`.caption-top`
* 響應式表格內容超出範圍可加上`.table-responsive` 或是再加上斷點`.table-responsive{-sm|-md|-lg|-xl|-xxl}`