---
# System prepended metadata

title: Bootstrap

---

#  Bootstrap
## 如何閱讀設計稿？
**檢視重點**
**字體、行高**
* 預設字體
```
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}
```
* 行高
設計稿的問題（元素高、字體、字行高）
常見設定方法：
    * 用倍數
    * 只會統一設定在以下地方
```
body {
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}
```
*色彩*

* 找出主色（明暗變化）、強調色（次要色、重要、執行關鍵）
    primary
    * primary-light
    * primary-dark

```
.text-primary {
    color:
}
```
*間距*

* 大間距
* 小間距
* 元素間距



---

常見圖示使用技巧

擇一使用

*Fontawesome*

樣式非常多

* 使用文件：https://fontawesome.com/
* CDN：https://cdnjs.com/libraries/font-awesome

[樣式](https://https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use) (https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use)
solid regular brands 免費
regular light duotone 付費
```
<i class="fas fa-camera"></i>
```
[Sizing](https://https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons) (https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons)

Material Icon

將文字片段轉成圖示
使用連字技巧（可被搜尋、辨識）
修改大小和顏色也可以直接設定 CSS

* 使用文件：https://google.github.io/material-design-icons/
* 圖示列表：https://material.io/resources/icons/?style=baseline

CDN
```
<link href="<https://fonts.googleapis.com/icon?family=Material+Icons>"
      rel="stylesheet">
```
```
<span class="material-icons">
    accessibility
</span>
```


---

**RWD**

**Viewport 設定**

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

```
 
**容器 container**

```
.container {
    max-width: 
    margign: 0 auto;
}
```

**圖片設定**

```
img {
    max-width: 100%;
    height: auto;
}
```
螢幕尺寸

* 桌機
* 平板
* 手機

斷點設定（常用）

* PC - 1200px
* iPad - *768px*
* iPad以下 - *767px*
* iPhone 6 Plus - *414px (視專案族群)*
* iPhone 6 - *375px (視專案族群)*
* iPhone 5、SE - *320px*


