3-1 安裝 BootStrap5 來製作 RWD 自適應網站

一、關於RWD

1. RWD（自適應設計）是目前網站系統的最基本要求，可以讓各種不同裝置都有最佳的操作體驗
2. RWD可以自己用CSS設計，亦可使用目前的各種CSS框架，例如使用者最多的 BootStrap 框架。

二、關於 BootStrap

1. BootStrap 框架可以迅速簡單的將網站設計成自適應網站，且有一致的風格，以及各種常用元件，遑論背後還有成千上萬的各種網路資源供使用，算是初學者入門的好選擇。
2. BootStrap 官網：https://getbootstrap.com/
3. BootStrap 中文網站：https://bootstrap5.hexschool.com/
4. BootStrap 都是用 class 來套用樣式
5. BootStrap 4 以後的網格系統以 flexbox 為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
6. 對 IE9（以下）不再支援，至少要用IE10才行。

三、用 npm 安裝 BootStrap 5

1. 打開VSCode，開啟「C:\UniServerZ\www\」資料夾，並設為信任資料夾
   
2. 按 Ctrl+` 開啟終端機（亦可開啟終端機，例如 power shell，切換到網頁目錄下再執行指令）
3. 先初始化一個專案（初始化會問一堆問題，基本上都可以直接按Enter跳過）：

   npm init

   只要有裝 node.js，就會自帶npm套件管理工具，一般我們利用它來安裝各種前端套件

4. 初始化專案後會產生 package.json 檔，此檔會紀錄我們這個專案會用到哪些前端套件，以及各個套件之間的相依性等資訊。
5. 接著就可以安裝 BootStrap 套件

   npm install bootstrap

   bootstrap@next 表示要裝最新的版本（有可能不是正式版），不加 @next 則會安裝最新的正式版本

6. 裝好後，會多一個 node_modules 目錄，裡面就有我們要使用的前端套件。
7. 若欲查詢安裝的版本，可用：

   npm fund