###### tags: `21 天 Bootstrap 5 新手實戰營`
# Bootstrap5_w1筆記(環境建立、RWD)

## 基本概念

* 直播課程影片支援 [環境建立-上](https://www.youtube.com/watch?v=B9EGGQr-r80) / [環境建立-下](https://www.youtube.com/watch?v=DKYdBQqREzs)
* 如果你常常感到學了前面忘了後面，那是因為"輸出太少"!
輸出很重要!輸出很重要!輸出很重要! XD
* 官網英文版：https://getbootstrap.com/
* 六角學院翻譯之中文版本：https://bootstrap.hexschool.com/
* Loki老師筆記支援：https://summer10920.github.io/categories/%E8%81%B7%E8%A8%93%E6%95%99%E6%9D%90/Bootstrap/

**基本介紹**
Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架，讓你能在框架的基礎上進行開發，他做好了一整套可重覆使用的元件樣式，可直接套用class使用，十分方便。

## 載入 Bootstrap 方式

1. CDN
2. 本地下載

### 1. BootstrapCDN（遠端連線，別人的伺服器）
CDN 是 Content Delivery Networks 的縮寫，譯為「內容傳遞網路」，簡單來說，就是利用 CDN 技術把內容放在伺服器上，開放給任何人快速存取。當然，你需要連上網路，才能使用 CDN 的內容。

*　優點：速度快、省流量。（老師基本上是使用這個）
*　缺點：有掛掉的可能。

CSS(放在header)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

JS(放在結尾body前)

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

### 2. 本地下載編譯檔
點選官網中所提共download檔案。
* Compiled CSS and JS =>編譯打包的檔案
* Source files =>原始檔

使用CSS(Bootstrap5.min.css)、JS(bootstrap5.bundle.min,js)語法檔案(已包含 mormalize.css語法)

### 3. 確認是否載入成功(css/js)

## 了解css Reset與重置
* css reset:全部樣式清空
* Normalize.css(bootsrtap使用) 保有些許預設樣式
[normalize官網](https://necolas.github.io/normalize.css/)
* body與*的微小差異
body是選取範圍，* 是選取每個tag。

## RWD
[手機板優先?桌機板優先?](https://www.youtube.com/watch?v=g6xbo55ubC0)
[伸縮自如的 RWD 排版術(上)](https://www.youtube.com/watch?v=t13Fvg0_xHk)
[伸縮自如的 RWD 排版術(下)](https://www.youtube.com/watch?v=Du_N0Vyh-Q0)

**桌機板優先:從大寫到小(max-width)**
改變container大小，內容物的百分比。

max-width:768px，支援768px以下解析度

**手機板優先:從小寫到大(min-width)，bootstrap使用**
起手式container%，內容物繼承可不用寫大小。
父層container寫width:100%(手機視窗解析度多大就跟著多大)，子 層無須再次寫

min-width:768px，支援768px以上解析度

**請特別注意RWD務必不能做有X軸之網頁，版型制作為y軸由上而下**
**不會出現X軸方式，務必寫max-width，父層=子層加總100%(最大1200px)**

**補充說明：**
* 後臺樣板製作多使用bootstrap
* id不用在css樣式，而作為錨點，後端工程師作模版

**判斷為RWD網站語法**

<meta name="viewport" content="width=device-width, initial-scale=1">

**全域務必加**

*.*：：before,*：：after{
    box-sizing:border-box;
}

製作客戶專案時，務必於會議及接洽客戶須注意載具解析度。
* pc:1200px
* ipad:768px
* ipad以下:767px
* iphone6 Plus:414px(視專案族群)
* iphone6:375px(視專案族群)
* iphone5 se:320px;