3-1
安裝 BootStrap5 來製作 RWD 自適應網站
一、關於RWD
- RWD（自適應設計）是目前網站系統的最基本要求，可以讓各種不同裝置都有最佳的操作體驗
- RWD可以自己用CSS設計，亦可使用目前的各種CSS框架，例如使用者最多的 BootStrap 框架。
二、關於 BootStrap
- BootStrap 框架可以迅速簡單的將網站設計成自適應網站，且有一致的風格，以及各種常用元件，遑論背後還有成千上萬的各種網路資源供使用，算是初學者入門的好選擇。
- BootStrap 官網：https://getbootstrap.com/
- BootStrap 中文網站：https://bootstrap5.hexschool.com/
- BootStrap 都是用
class 來套用樣式
- BootStrap 4 以後的網格系統以
flexbox 為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
- 對 IE9（以下）不再支援，至少要用IE10才行。
三、用 npm 安裝 BootStrap 5
- 打開VSCode，開啟「
C:\UniServerZ\www\」資料夾，並設為信任資料夾
- 按 Ctrl+` 開啟終端機（亦可開啟終端機，例如 power shell，切換到網頁目錄下再執行指令）
- 先初始化一個專案（初始化會問一堆問題，基本上都可以直接按Enter跳過）：
npm init
只要有裝 node.js，就會自帶npm套件管理工具，一般我們利用它來安裝各種前端套件
- 初始化專案後會產生
package.json 檔，此檔會紀錄我們這個專案會用到哪些前端套件，以及各個套件之間的相依性等資訊。
- 接著就可以安裝 BootStrap 套件
npm install bootstrap
bootstrap@next 表示要裝最新的版本（有可能不是正式版），不加 @next 則會安裝最新的正式版本
- 裝好後，會多一個
node_modules 目錄，裡面就有我們要使用的前端套件。
- 若欲查詢安裝的版本，可用：
npm fund
3. 從前端界面入手
