---
tags: Bootstrap5 實戰營
---

# Bootstrap5 實戰營-第一週筆記

## 簡介

`Bootstrap` 是用於網站開發的一個框架，裡面包括 `HTML` `CSS` `及JavaScript`，提供各種元件及 `Javascript` 擴充套件讓開發者可以隨意使用。

- 補上官網連結以供使用：
- [Bootstrap5 - 英文版官網](https://getbootstrap.com/)
- [Bootstrap5 - 六角學院翻譯的中文官網](https://bootstrap5.hexschool.com/)

## 使用方式

首先說明 `CDN` 方法：

- 開啟一個新的 `HTML` 文件
- 於 `head` 標籤中引入 `Bootstrap` 的 `CSS` 檔案
- 再於 `body` 標籤結尾處引入 `Bootstrap` 的 `JavaScript` 檔案

本地下載方法：

- 到 `Bootstrap5` 官網中找 `CDN` 網址
- [Bootstrap5 - CSS ](https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css)
- [Bootstrap5 - JavaScript](https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js)
- 將網址複製並貼到瀏覽器中開啟，然後把網頁另存到你的項目中
- 開啟一個新的 `HTML` 文件 並將剛才存在項目中的 `CDN` 引入

## 講解使用本地與 CDN 差別

瀏覽器在解析 HTML 檔案時 會從第一行代碼逐漸往下解析，當發現到有引入外部 CDN 的連結時，瀏覽器就會與外部 CDN 伺服器聯繫並取得資料傳回，而**CDN 的傳輸流量會吃 CDN 的伺服器**，與你的伺服器就**無關**。但是，如果**所有引用內容都處於本地端**，那瀏覽器就會與你的本地伺服器來回聯繫，並取得資料傳回，而**所有的流量就都是吃你伺服器的流量**。

至於到底該用本地下載好還是引入 CDN 就好，其實因人而異，如果擔心 CDN 網站掛掉，或擔心因為版本問題 CDN 被移除等等，可以就使用本地下載的方式來避免以上狀況。

- 那有人會問說：可是你不是說流量的費用會是吃自己的伺服器嗎？
- 答：~~無所謂~~，因為實際上每個專案中，最佔流量的其實是**圖片或影片**，而 `CSS` `JS` 可能有些時候甚至**佔不到一成**，所以流量費用算下來也是不大的，完全可以不用太在意。

## 檢查是否載入成功

1. 檢查 `CSS` 是否載入成功：
- 到 `Bootstrap5` 的`元件(components)`頁面找到`按鈕(buttons)`，將代碼複製並貼到你的 HTML 文件中，查看按鈕`是否有顏色`。
- [網址在此](https://getbootstrap.com/docs/5.0/components/buttons/#examples)
2. 檢查 `JS` 是否載入成功：
- 到 `Bootstrap5` 的`元件(components)`頁面找到`互動式窗(modal)`，將代碼複製並貼到你的 `HTML` 文件中，點擊按鈕檢查看是否能打開互動式窗，且互動式窗出現方式是`由上往下滑動`。
- [網址在此](https://getbootstrap.com/docs/5.0/components/modal/#live-demo)

## CSS Reset

在瀏覽器中所有網頁都會有一些默認樣式，比如 `body` 標籤的 `margin`，或是 `ul` `li` 標籤的 `padding` `list-style` 等，這是因為瀏覽器擔心有人不會寫網頁，所以默認添加上去的，這也是出現 `CSS Reset` 的原因，讓想自己建立網頁的人可以完全從零開始的重新撰寫樣式。

通常 `CSS Reset` 都會放在所有樣式的**最前面**。

`CSS Reset` 又有分兩種版本

- `CSS Reset` : 它會把所有標籤的 `margin` `padding` 歸零， `line-hight` 變成一倍。
- `normalize` : 這是 `Bootstrap` 使用的版本，引入 `Bootstrap` 時它內建就有 `normalize.css`。

## CSS Class 技巧(組合技)

Bootstrap 中的樣式設計是這樣的：他會有一個預設的樣式，然後一個修改顏色的樣式，以及一個修改大小的樣式。

以按鈕來說， `.btn` 就是按鈕的預設樣式， `.btn-primary` 是按鈕顏色為 primary 的樣式， `.btn-sm` 則是按鈕大小是小一點的樣式。

然後我們想要一個按鈕擁有按鈕樣式並寫顏色是藍色然後要它比一般按鈕小的時候，就可以將樣式設為 `.btn .btn-primary .btn-sm` ，這就是 Bootstrap 的樣式組合技，也是它的基本使用方式。

## 關於一些問答

Q: `Bootstrap` 有沒有做關於`無障礙`的特殊設計？
A: 有的，可以參考**網頁親和性**的部分 [附上網址](https://bootstrap5.hexschool.com/docs/5.0/getting-started/accessibility/)

Q: 業界使用 `Bootstrap` 的人多 還是都手刻版型？
A: 前端工程是大約是一半一半，後端則約有七八成都是使用 `Bootstrap` 。

Q: `wordpress` 會不會威脅到前端優勢？
A: `wordpress` 是一個架站軟體，它提供許多漂亮版型可以直接讓人使用，對於想馬上獲利的業者來說比較方便，但若想**客製化多**一點的，可能還是使用 `Bootstrap` 或手寫的居多。它的**客源**完全**不同方向**。

Q: `Bootstrap5` 鄙視用手寫派的原因？
A: 它希望招來的人都有一定水準，而手寫派因為規範不一，每個人水準都不盡相同，所以在接手或維護時會很麻煩。

Q: 手寫派鄙視 `Bootstrap` 的原因？
A: 寫出來的成果大同小異，一看就能知道是使用 Bootstrap 的版型刻的，比較統一，沒辦法驚豔用戶。

Q: 全站設定、重置的樣式，寫在 `*` 號下好，還是 `body` 標籤下好？
A: `*` 是指所有的 HTML 標籤， `body` 則是指包在 `body` 中的內容，建議是寫在 `body` 標籤中就好，這樣想改其他標籤的設定時比較方便。但如果你確定所有標籤吃到的樣式都是一樣的，其實用 `*` 也可以。

Q: `Pure CSS` 與 `Bootstrap` 哪個好？
A: 其實都好，看你喜歡哪個用哪個，也可以只拉部分元件的樣式出來用，比如喜歡 `Pure` 的 `table` 就只抓它的 `table` 樣式來用等等。

Q: 我想查看某元素被 `hover` 時的樣式要怎麼看到？
A: 在該元素點擊右鍵，選擇檢查，然後在 `Styles` 的右上角可以看的一個 `:hov` 點下去把 `:hover` 打勾 就可以看到該樣式內容了。

# RWD 筆記

## 前言

RWD (Responsive Web Design) 是指響應式網頁設計，主要通過在不同的網頁寬度時使用不同的樣式，可以通過 CSS3 的 media query 進行尺寸確認 並更改 CSS 。

## RWD 鐵則

1. 一定要有 viewport
2. 畫面嚴禁出現 x 軸滾動(水平滾動，左右滾動)

### viewport
viewport 是用來指定瀏覽器怎麼渲染和縮放網頁畫面的寬高。如果沒有設置，在手機版頁面會以等比例將整個網頁縮小到符合設備的寬度，然後畫面看起來就會擠在一起或內容變很小不好閱讀.....

所以在做響應式網站時切記要加上下面這行在 head 標籤裡面：

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

1. `width=device-width` : 瀏覽器頁面的寬度=當前設備(ex: 平板、手機)的寬度
2. `initial-scale=1.0` : 畫面初始縮放比例為 100%(即 不放大也不縮小)
3. `user-scalable` : 設定是否允許使用者改變縮放比例，`user-scalable=no` 就是不允許縮放

### x 軸處理方式

當寬度沒有自適應時，你可能設計了 container{ width:1200px; } 這時候在瀏覽器小於 1200px 的畫面時就會出現 x 軸，解決方式為：
**捨棄 width ，改寫為 max-width 並且加上 margin: 0 auto ; 讓 div 置中。**

- max-width 的特性是當畫面**小於 max-width 的寬度 它會將畫面自適應**到設備寬度或瀏覽器大小，大於的話**最大也只會跟 max-width 的寬度一樣大**。
- margin 設為 0 auto 則表示 margin 上下為 0 左右自動，設這樣的話就可以讓整個 container 水平置中了。

該 max-width 適用於最外框的 container div

另外校長獨家推薦，在引入 CSS Reset 以後，手動增加如下內容：

img{
  max-width: 100%;
  height: auto;
}

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

加上以上代碼後 img 標籤就可以如 container 一樣自適應寬度，當圖片寬度最大為 1980px 時，瀏覽器若小於 1980px 就會自動縮小圖片，加上 height auto 高度就會自動，能讓圖片不被壓縮變形。
沒有加的話圖片就會顯示原始大小 1980px 然後網頁就會~~出現 x 軸~~！ 畫面直接爆掉....
另外關於 box-sizing 那段則是不用計算 padding 用的(先講這樣，晚點再補充)

## 關於 %

以代碼舉例：

<div class="container">
  <div class="menu"></div>
  <div class="content"></div>
</div>

.container{
  width: 100px;
  margin: 0 auto;
  display: flex;
}
.menu{
  width: 30%;
  margin-right: 5%;
  background-color: blue;
  height: 100px;
}
.content{
  width: 65%;
  background-color: orange;
  height: 100px;
}

首先 menu 與 content 中使用的 % 是對應父元素的 container 的 100px 。
然後要記得遵循一個原則： **所有 % 數加起來不要超過 100%**(這個所有也包含 margin 的 5%)，不然畫面就會出現 x 軸...
至於為何一定要寫 % 數 而不是直接寫死寬度為 300px 之類的，原因是：
在畫面寬度改變時，可以讓 menu 與 content 也跟著自適應大小，比如當寬度從 1440px 變成 768px 時， container 因為有設置 max-width 所以會跟著變成 768px，然後假設 menu 與 content 分別寫 300px 、 650px，那畫面就爆了，因為加起來已超過 768px，再次的， ~~x 軸出現~~ （眼神死）。

## `@media` 用法

你可以直接在 style 標籤中寫入下面這行：

/* 意思是 所有在「螢幕尺寸 600px 以上（含 600px 本身）」的頁面 都會套用該花括號中的樣式內容。 */
@media (min-width: 600px) {...}

/* 意思是 所有在「螢幕尺寸 400px 以下（含 400px 本身）」的頁面 都會套用該花括號中的樣式內容。 */
@media (max-width: 400px) {...}

## 什麼是桌機版優先(Desktop first)、手機優先(Mobile first)？

桌面版優先是指**樣式書寫順序**為:
先寫**最大寬度上限**(EX: `max-width:1440px`)
當所有樣式寫完 最後再依序寫

@media (max-width:992px) {...}

@media (max-width:768px) {...}

手機優先是指**樣式書寫順序**為:
先寫**最小固定寬度**(通常都是: `width:100%` or `width:100vw`)
當所有樣式寫完 最後再依序寫

@media (min-width:768px) {...}

@media (min-width:992px) {...}

## class 權重

HTML 標籤(ex:`body{...}`)：權重 1 分

類名(class ex:`.title{...}`)：權重 10 分

id(ex:`#btn1{...}`)：權重 100 分

標籤中直接加上 style 屬性(ex:`<p style="{...}">我是 p 標籤</p>`)：權重 1000 分

樣式後面加上 !important(ex:`body{color:#000 !important}`)：權重 10000 分

權重分數高的可以覆蓋低的，然後在權重分數相同的情況下，樣式書寫順序較後面的就會覆蓋前面的。

簡單說就是：**先看權重 權重相等再看先後順序**

要注意的是：

1. 永遠不要用 id 書寫樣式，因為 id 權重分數高，設了樣式很難被覆蓋，且它在一個網頁中，同樣的 id 只能出現一次，所以通常是撰寫 js 或抓取錨點用的，樣式請就寫在 class 或 tag 就好。
2. 盡量不要寫 important ，權重太高會導致很難覆蓋與修改，後期維護心累。
3. 除了特殊原因外，盡量不要在標籤中直接加上 style 屬性。特殊原因諸如樣式無法寫在 style 或樣式是透過其他地方傳遞而來，需動態加入等。

## 斷點

斷點是響應式開發的基礎，使用斷點來控制在特定尺寸或設備上調整佈局。

以 Bootstrap 為例它的斷點有以下幾種：

/* 手機優先 */

@media (min-width: 576px) { ... }

@media (min-width: 768px) { ... }

@media (min-width: 992px) { ... }

@media (min-width: 1200px) { ... }

@media (min-width: 1400px) { ... }

/* 桌面版優先 */

@media (max-width: 1399.98px) { ... }

@media (max-width: 1199.98px) { ... }

@media (max-width: 991.98px) { ... }

@media (max-width: 767.98px) { ... }

@media (max-width: 575.98px) { ... }

## 關於一些問答

Q: 當你接手別人專案要覆蓋樣式時，怎麼做？

A:可以在引入樣式的後方加上你自己賺許的樣式檔案，通過後者覆蓋前者的方式達成效果。可參考下方內容：

<link rel="stylesheet" href="前人的樣式.css">
<link rel="stylesheet" href="你的樣式.css">

補充：
- 請善用右鍵的檢查元素，將要修改的部分用右鍵查詢其樣式，複製該樣式的設置名稱(ex:`.navbar > a`)，將其名稱複製下來貼到自己的 code 上做修改，即可覆蓋。
- **要注意先後順序與權重分數！** 先後順序是前人的樣式在上你的樣式在下，權重分數是有沒有比他設置的名稱權重分數高(ex: `.navbar > a` 11分 你可以用相同名稱覆蓋 或是你也可以再加其他權重上去，反正一定要是 `>=` 的權重分數才可覆蓋。)

Q: 請看以下代碼，當畫面寬度是 768px 的時候， margin-bottom 存在否？

li{
  width: 30%;
  margin-bottom:24px;
}

@media (max-width: 768px) {
  li{
    width:50%
  }
}

A: 在的，所有代碼皆被開啟，然後有相同的設定處後者會覆蓋前者，即寬度會從 30% 變成 50%，但同時擁有 margin-bottom

Q: 手機版畫面寬度是多少？

A: 最常見的：
1. 手機版約在 375px~414px (最小的是 iphone5、SE - 320px)
2. 平板的話 iPad 768px
3. PC 版 像 Bootstrap 是 1140xp 1200px

Q: @media 寫在最前面是不是就無效？

A: 對的，通常來說你一開始寫的如果是 PC 版樣式，後面就從螢幕解析度最大慢慢寫到最小；如果一開始寫的是手機版樣式，後面就從螢幕解析度中間寫到最大。可參考上方的"斷點"部分。

Q:設計網頁高度通常要設多少？

A: 看內容多少就多少，自然的由上往下設計排版內容，不用硬性規定最大要多少，但業界有個淺規則...可以去看客戶使用的設備是什麼規格，然後讓設計稿在他們的設備上能剛好符合 size。