# 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*