# W5

:::info
第五週設計稿：
https://xd.adobe.com/view/ea9c3e28-6d25-42cb-b6a5-1571c1707f05-bfcf/
切版直播班-W5-dashboard-ver2
11 Screens, Last modified on Aug 02, 2023 02:02 GMT
圖片
Bootstrap 文件：
https://bootstrap5.hexschool.com/
:::

---

[TOC]

---

## Bootstrap 介紹
Bootstrap 是一個 CSS 框架，其強大之處是有許多可以直接套用的 class 讓我們完成網頁。

優點：

- Bootstrap 有很多 class 是原本就命名好來讓開發者使用的，開發者比較不用一直煩惱 class 命名。
- Bootstrap 提供了很多組合好的網頁元件，如果熟悉 Bootstrap 元件，開發也會比較迅速。
- Bootstrap 元件提供了基本的互動效果（modal 彈跳視窗、按鈕 hover 效果...…）。
- Bootstrap 也有格線系統，對網頁佈局非常便利。

## Bootstrap 基本設定

### Bootstrap 的 Reset

CSS Reset 也分為很多種類型，之前請同學們手寫 CSS 時的 CSS Reset 叫做「meyerweb」，屬於將網頁預設樣式幾乎全部清除掉的類型。

而 Bootstrap 也有自己的 CSS Reset 設定，它和 meyerweb 不同的是，Bootstrap 的 CSS Reset 並非全部清除，而是保留了一些基本樣式。

:::warning
（小提醒：同學有使用 Bootstrap 就不需要再加入 meyerweb 的 CSS Reset 程式碼囉）
:::

---

### 文字大小設定

Bootstrap 有兩種類型的 class 可以控制文字的大小。

#### 第一種：使用 .fs- 來控制文字大小

:::info
[文字 (Text) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/utilities/text/#font-size "文字 (Text) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/utilities/text/#font-size)")
:::

<!-- Bootstrap 提供了 6 種不同的字型大小。 -->
<p class="fs-1">.fs-1 文字</p>
<p class="fs-2">.fs-2 文字</p>
<p class="fs-3">.fs-3 文字</p>
<p class="fs-4">.fs-4 文字</p>
<p class="fs-5">.fs-5 文字</p>
<p class="fs-6">.fs-6 文字</p>

- .fs-1 ~ .fs-6 的預設行高會是 line-height: 1.5; 。

:::info
https://bootstrap5.hexschool.com/docs/5.1/utilities/text/
:::

---

#### **第二種：運用在標題文字樣式的 class：**

:::info
[文字排版 (Typography) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/content/typography/#headings "文字排版 (Typography) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/content/typography/#headings)")
:::

<p class="h1">h1 標題文字樣式</p>
<p class="h2">h2 標題文字樣式</p>
<p class="h3">h3 標題文字樣式</p>
<p class="h4">h4 標題文字樣式</p>
<p class="h5">h5 標題文字樣式</p>
<p class="h6">h6 標題文字樣式</p>

:::warning
標題的 class .h1 ~ .h6 的字重會有 font-weight: 500; 的設定，會比一般文字粗一點。 .h1 ~ .h6 預設行高則為 line-height: 1.2; 。

同學要注意會有這些不同的部分

:::

助教自己在切版時，控制文字大小的話會比較常使用 .fs- 的寫法。

如果是 Bootstrap 沒有提供的文字大小的話，自己可以再另外寫樣式。（第六週會提到怎麼客製化文字大小的樣式~）

:::warning
小提醒： **文字的標題、或者文字內容的重要程度，不一定會和文字大小有關， 還是要看網頁整體的內容來判斷某些文字是否為標題。**

範例：

<!-- 我只是普通的 p 段落文字，但文字很大，所以套用 .fs-1 -->
<p class="fs-1">一段文字一段文字一段文字一段文字一段文字</p>

<!-- 我是標題，但文字可能沒那麼大，所以套用了比較小的 .fs-5 -->
<h2 class="fs-5">我是 h2 標題！</h2>
<h3 class="fs-5">我是 h3 標題！</h3>

:::

---

### 文字顏色設定

:::info
[顏色 (Colors) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/utilities/colors/ "顏色 (Colors) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/utilities/colors/)")
:::

第四週的攻略曾經提過，顏色的命名不建議直接使用顏色本身的樣式做為名稱，而是用抽象的命名。Bootstrap 也依循著同樣的方式。

:::info
https://bootstrap5.hexschool.com/docs/5.1/utilities/colors/
:::

<p class="text-primary">.text-primary</p> <!-- 主要的（主色） -->
<p class="text-secondary">.text-secondary</p> <!-- 次要色 -->

<p class="text-success">.text-success</p> <!-- 成功的 -->
<p class="text-danger">.text-danger</p>  <!-- 危險的（例如「刪除按鈕」之類較危險的操作） -->
<p class="text-warning bg-dark">.text-warning</p> <!-- 警告的 --> 

<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>

<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

第五週設計稿的主要顏色，貼心的設計師使用的顏色是 success 的綠色。

所以同學在做第五週時，如果有遇到文字的顏色是主色的綠色的話， 可以先直接使用 .text-success 來讓文字變色。

第六週課程會再提到如何改變主色 primary 的顏色。

---

### 間距

:::info
[間隔 (Spacing) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/utilities/spacing/ "間隔 (Spacing) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/utilities/spacing/)")

:::

間隔的寫法類似之前提到的 .mt-1、.mb-2、.pt-1 ….這樣子用來推擠空間的 class。 但 Bootstrap 的 left 、 right 的寫法稍有不同。

範例：

// 之前的寫法
.ml-1 => ml 代表 margin-left
.mr-1 => mr 代表 margin-right

// Bootstrap5 的寫法
.ms-1 => 換成了 ms，ms 的 s 代表 start 的意思， CSS 功能是 margin-left
.me-1 => 換成了 me，me 的 e 代表 end 的意思， CSS 功能是 margin-right

而 Bootstrap 提供的間距為 6 種（第六週會提到怎麼新增、改變間距設定。）


:::info
https://bootstrap5.hexschool.com/docs/5.1/utilities/spacing/
:::

基本使用方式：

<p class="mb-0">一個段落</p>
<!-- p 標籤在 Bootstrap 會有預設的 margin-bottom，所以可以用 .mb-0 來移除 margin-bottom -->

### 圖片的響應式設定

之前有請同學在 img 標籤加入 max-width: 100% 和 height: auto; 來讓圖片變成響應式。

Bootstrap 也有提供 class 來讓圖片套用，變為響應式。 可以使用 `.img-fluid` 來讓圖片加入 max-width: 100% 和 height: auto;


---

### 字體

要替換字體的話可以先自己寫 SCSS ，在 body 標籤上設定字型來覆蓋樣式。

第六週會提到怎麼從變數修改字型唷。

接下來就讓我們來看第五週設計稿需要注意的部分吧~

---

## 設計稿需要注意的部分

首先，同學打開設計稿網格後，可以看見左方的側欄並沒有在格線內，所以側欄不需要放在 container 內唷！


這代表左方側欄不在格線系統的範圍內～

---

側欄可以用 min-width 來寫寬度 ，再利用 min-height: 100vh; 來佔滿畫面的高度：

.nav {
  /* 用 position: fixed; 可以固定住側欄 */
  position: fixed;
  min-width: 200px;
  min-height: 100vh;
}

由於側欄使用 position: fixed; 之後，右方有格線系統的主要內容會被壓在左側欄下方，所以需要再使用 margin-left: 200px; 推出空間。

.main {
  margin-left: 200px;
}

:::success
側欄的詳細排版可以參考看看範例：
[穎旻助教的第五週 Bootstrap5 首頁範例](https://codepen.io/AliceChiang/pen/QWvxRaK "穎旻助教的第五週 Bootstrap5 首頁範例(https://codepen.io/AliceChiang/pen/QWvxRaK)")

:::

---

### 如何看設計稿的互動效果

設計稿右方側欄，點擊下圖紅框的按鈕後可以切換到評論模式，在評論模式點擊畫面，一瞬間會顯示出有互動效果的元素的提醒。 同學點擊這些元素就可以看到互動效果。



---

### 版型使用的元件

Bootstrap 文件的元件頁面：

:::info
[手風琴 (Accordion) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/components/accordion/ "手風琴 (Accordion) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/components/accordion/)")

:::

接下來，助教會提到關於第五週設計的版型，可以使用哪些元件來製作

### 首頁

以下是首頁使用的元件，同學可以思考看看如何將 Bootstrap 的元件的結構改為設計稿的模樣。


不太熟悉的元件都可以從文件中查找撰寫的格式～

這頁紅框的部分，在網頁中被稱為文字編輯器，由於通常文字編輯器需要引入套件，屬於 JavaScript 的範疇，所以同學的作業只需要將設計稿的畫面切出來就好。


如果是會一點 JavaScript 的同學也可以嘗試依照範例來引入編輯器套件。

:::success
[穎旻助教的第五週 Bootstrap5 首頁範例](https://codepen.io/AliceChiang/pen/QWvxRaK "穎旻助教的第五週 Bootstrap5 首頁範例(https://codepen.io/AliceChiang/pen/QWvxRaK)")

:::

導覽列的補充：

- 導覽列按鈕左邊有綠色直線的樣式可以用[偽元素](https://w3c.hexschool.com/blog/5667df85 "偽元素 (https://w3c.hexschool.com/blog/5667df85)")來做。
- icon 在設計稿外層會有一個框在，那個才是正確的大小設定，用這層來觀察和其他元素的間距會比較準。


首頁卡片的補充：

- 下載的按鈕可以加入 download 屬性 download=”…” （不會真的下載東西XD~ 因為只有前端，沒有要做後端下載）。
- 卡片的頭像與右方內容的排版方式可以參考：

- [Flex · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/utilities/flex/#media-object "Flex · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com) (https://bootstrap5.hexschool.com/docs/5.1/utilities/flex/#media-object)")

### Admin 頁面

接下來是 Admin 的頁面


表格 table 可以嘗試加入 hover 效果，Bootstrap 有提供加入 hover 樣式的 class 。 可以參考 [表格 (Tables) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/content/tables/#hoverable-rows "表格 (Tables) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/content/tables/#hoverable-rows)")

<table class="table table-hover">
  ...
</table>

「\+ Add New Admin 」是按鈕，點擊後要開啟 New Admin 的 modal（如下圖）：



要注意的是，這是一個**可以滑動內容**的 modal 元件，元件可以參考文件： [互動視窗 (Modal) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#scrolling-long-content "互動視窗 (Modal) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/components/modal/#scrolling-long-content)")

「滾動長內容」的 Scrollable modal，在 modal 元件的 modal-dialog 這層加入 modal-dialog-scrollable 就可讓 modal 變成可滑動。

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

接著，點擊表格內的鉛筆圖案，需要開啟 Edit Admin 的 modal。


同學可以發現，New Admin 的 modal 和 Edit Admin 的 modal 結構非常接近。 這兩個 modal 的內層都有類似的 input 結構。所以有些同學會直接複製貼上。

如果是複製貼上，需要注意 input 的 id 不要撞名。如果撞名（出現兩個相同的 id）的話會導致對應 input 的 label 標籤失效。

接下來，點擊表格內的眼睛圖案，需要開啟個人資料的 modal。


個人資料的 modal 內，右下角的綠色箭頭會是一個可點擊的元素。 點擊之後須要展開一個區塊，區塊內有兩個按鈕（如下圖），這個部分可以使用折疊元件來做出效果。 [折疊 (Collapse) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/components/collapse/ "折疊 (Collapse) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com)(https://bootstrap5.hexschool.com/docs/5.1/components/collapse/)")


---

### Modal 內容的表單

modal 內容的表單需要注意：

- 表單和列表的語意不一樣，不要用 ul li 來排，要排版的話可以用 div 來排版
- Edit Admin 的 modal，灰色背景的 input 會是唯讀的，所以要加入屬性 readonly。


- readonly 的參考文件 [表單控制 (Form controls) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/forms/form-control/#readonly "表單控制 (Form controls) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com) (https://bootstrap5.hexschool.com/docs/5.1/forms/form-control/#readonly)")
- 按鈕 disabled 的參考文件 [按鈕 (Buttons) · Bootstrap 5 繁體中文文件 \- 六角學院 v5.1 (hexschool.com)](https://bootstrap5.hexschool.com/docs/5.1/components/buttons/#disabled-state "按鈕 (Buttons) · Bootstrap 5 繁體中文文件 - 六角學院 v5.1 (hexschool.com) (https://bootstrap5.hexschool.com/docs/5.1/components/buttons/#disabled-state)")
- 小提醒：select 標籤、option 標籤、button 標籤是不能用 readonly 屬性的唷

### 引入 Material Design Icon 的教學

<!-- 引入的連結 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<!-- 使用方式 -->
<span class="material-icons">
  question_answer
</span>

<span class="material-icons">
  star_outline
</span>

:::info
可以參考這個 CodePen 看呈現的效果： [icon 使用範例](https://codepen.io/izumi-dev/pen/wvQNVrb "icon 使用範例(https://codepen.io/izumi-dev/pen/wvQNVrb)")
:::

icon 網站： [Material Symbols and Icons \- Google Fonts](https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons "Material Symbols and Icons - Google Fonts(https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons)") 輸入 icon 名稱可以快速找到 icon。 示意圖：


點擊左邊的 icon 後，右方會跑出側欄。 複製右方的程式碼貼在自己的程式碼要用的地方就可以用囉~

**icon 名稱**

- **首頁**
- 左側欄

- assessment

- question_answer
- assignment
- video_library
- supervisor_account
- settings

- 上方區塊

- expand_more

- search
- notifications_active

- 主內容

- more_vert

- star_outline
- edit
- attach_file
- chevron_left
- chevron_right

- **Admin頁面**
- 上方區塊

- add

- 主內容

- arrow_downward

- visibility

- **Edit Admin Modal**

- clear

- check_circle

- **New Admin Modal**

- report_problem

---

## 總結

- 有使用 Bootstrap 就不需要再另外加入 CSS Reset
- 可以使用 .fs-1 ~ .fs-6 來改變文字大小
- Bootstrap 有提供不同顏色的樣式來讓開發者使用（之後課堂會學習如何改變網站色系）
- 觀看設計稿，練習判斷要使用哪些元件。

- 一開始可能會覺得元件的 class 名稱很多很難記。 忘記的時候就點開文件來看看結構吧，助教自己也滿常反覆看文件的~

- 表單是使用者經常會互動的元素，所以表單的觀念非常重要哩。

特別是表單元素會有不同的狀態，像是 input 的 readonly、按鈕的 disabled……。

那麼~ 本次文字直播就到這裡囉~ 祝各位同學都能順利地使用 Bootstrap 完成第五週主線o(°▽°)o！！！！！