你知道嗎？全球有超過一半的流量來自行動裝置！因此，如何讓網站在不同螢幕尺寸下都能順暢瀏覽至關重要。今天，小編將教你使用Bootstrap，這個強大的前端框架，來快速打造響應式網頁設計（Responsive Web Design, RWD）。一起來看看Bootstrap是什麼、為什麼要學它，以及如何用它製作一個簡單的網站吧！

Bootstrap簡介

Bootstrap是由Twitter開發的前端框架，旨在簡化響應式網頁設計的開發過程。它提供了CSS和JavaScript工具，讓你輕鬆打造跨平台、高品質的RWD網站。

1.節省時間

Bootstrap已包含許多常用的HTML、CSS和JavaScript元素，省去你自行編寫的時間。

2.響應式設計

Bootstrap自動調整網頁在不同螢幕尺寸下的呈現方式，讓使用者在任何裝置上都能瀏覽你的網站。

3.跨平台相容性

Bootstrap兼容各主要瀏覽器（如Chrome、Firefox和Safari），以及iOS、Android等行動作業系統。

1.準備工作

首先，你需要安裝Node.js（可到https://nodejs.org/en/download/(https://nodejs.org/en/download/)下載）。接著，在終端機中輸入`npm install -g bootstrap`，即可獲得Bootstrap。

2.製作HTML與CSS檔案

建立一個名為`index.html`的HTML文件，並加入Bootstrap所需的CSS和JavaScript連結：
```html
u003c!DOCTYPE htmlu003e
u003chtml lang="en"u003e
u003cheadu003e
u003cmeta charset="UTF-8"u003e
u003cmeta name="viewport" content="width=device-width, initial-scale=1.0"u003e
u003ctitleu003e我的第一個Bootstrap網站u003c/titleu003e
u003c!-- Bootstrap CSS --u003e
u003clink href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"u003e
u003c/headu003e
u003cbodyu003e
u003c!-- 你的網頁內容在此 --u003e
u003c!-- Bootstrap JavaScript --u003e
u003cscript src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"u003eu003c/scriptu003e
u003cscript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"u003eu003c/scriptu003e
u003c/bodyu003e
u003c/htmlu003e
```

1.網格系統（Grid System）

Bootstrap的網格系統讓你輕鬆管理網頁元素在不同螢幕尺寸下的呈現方式。主要由容器（container）、行（row）和列（col-）組成。
```html
u003cdiv class="container"u003e
u003cdiv class="row"u003e
u003cdiv class="col-sm-4"u003e.col-sm-4u003c/divu003e
u003cdiv class="col-sm-4"u003e.col-sm-4u003c/divu003e
u003cdiv class="col-sm-4"u003e.col-sm-4u003c/divu003e
u003c/divu003e
u003c/divu003e
```
2.按鈕與表單元件

Bootstrap提供了多種樣式的按鈕和表單元素，如輸入框、下拉選單等。
```html
u003cbutton type="button" class="btn btn-primary"u003ePrimary Buttonu003c/buttonu003e
u003cinput type="text" class="form-control" placeholder="Enter your name"u003e
u003cselect class="custom-select custom-select-sm custom-select-lg"u003e
u003coption selectedu003eOpen this select menuu003c/optionu003e
u003coption value="1"u003eOneu003c/optionu003e
u003coption value="2"u003eTwou003c/optionu003e
u003coption value="3"u003eThreeu003c/optionu003e
u003c/selectu003e
```

1.封面圖製作工具推薦

Canva（www.canva.com(https://www.canva.com)）是一款線上設計工具，提供大量模板和素材，非常適合初學者。

2.封面圖尺寸與格式

根據不同平台，封面圖的尺寸和格式有所差異。以下為常見平台的尺寸：

Facebook：1,200 x 675像素，JPEG或PNG格式
Twitter：1,920 x 1,060像素，JPEG、PNG或GIF格式
Instagram：1,080 x 1,080像素，JPEG或PNG格式

1.愛貝斯網路評價

愛貝斯網路是台灣的電商平台，主要銷售樂器和音樂周邊。根據《2021年愛貝斯網路評價》，愛貝斯網路提供良好的購物體驗，商品種類齊全且價格合理。

2.Macbook HTML編輯

使用Macbook編輯HTML非常方便，只需在終端機中輸入`brew install homebrew/cask-fontview/mactex`即可獲得所需字型。