{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %}
###### tags: `CSS` `框架`

# CSS 框架

## CSS 框架是什麼？

CSS 框架是一系列已預先撰寫好的 CSS 樣式庫，需要使用時可直接使用，不需自行撰寫。

常用於加速網頁開發和設計，如此可減少開發人員的工作量，提升工作效率。

## 常用的 CSS 框架


https://2022.stateofcss.com/en-US/css-frameworks/#css_frameworks_experience_ranking

這張圖來自於 State of CSS 2022，從圖中可看到`Bootstrap`、`Tailwind CSS`和`Materialize CSS`分別為2022年的第一、第二和第三常用的 CSS 框架，以下將會介紹`Bootstrap`。

## Bootstrap

### 簡介

> Bootstrap是一組用於網站和網路應用程式開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。

Source: [Wikipedia - Bootstrap](https://zh.wikipedia.org/zh-tw/Bootstrap)

Bootstrap官網：[https://getbootstrap.com](https://getbootstrap.com)

### 使用說明

Bootstrap Docs：[https://getbootstrap.com/docs/5.3/getting-started](https://getbootstrap.com/docs/5.3/getting-started)

#### 1. 前往[Bootstrap官網](https://getbootstrap.com)


#### 2. 選取 Docs


#### 3. 選取 Getting started -> Download


---

Bootstrap可以使用CDN來載入，此處以此方法作為示範。

#### 4. 複製，貼上


#### 5. 回到說明文件，看範例，找自己要的效果