:::
3-1 安裝 BootStrap5 來製作 RWD 自適應網站
3-2 設計RWD顯示界面
一、建立預設頁面：
- 請先建立
index.html(完整路徑為：C:\UniServerZ\www\index.html)（Ctrl+N可以開新檔，Ctrl+S可以儲存檔案） - 輸入
!，然後選擇!按 Enter 可產生 HTML5 基本頁面 - 輸入
bs，選擇bs5-$，然後按 Enter 可產生 HTML5+BootStrap5 的基本頁面，如：<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS v5.2.1 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" /> </head> <body> <header> <!-- place navbar here --> </header> <main></main> <footer> <!-- place footer here --> </footer> <!-- Bootstrap JavaScript Libraries --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script> </body> </html>bootstrap.min.css：是主要的BootStrap樣式檔案，必須引入popper.min.js：是導覽列等部份元件會用到的js套件（有用到導覽列就必須引入）bootstrap.min.js：BootStrap部份元件會用到的js（有用到就必須引入）integrity屬性是資源完整性規範的一部分，它允許你為script提供一個hash，用來進行驗簽，檢驗加載的JavaScript 文件是否完整，減少XSS 風險。crossorigin="anonymous"：crossorigin 會讓瀏覽器啟用CORS訪問檢查，不填的話等同crossorigin="anonymous"，所以其實可以拿掉。
- 被
<>包起來的叫做網頁標籤，也就是HTML語法，建置網頁的最基本工具。 - 頁面架構用HTML語法建構、外觀用CSS調整（BootStrap就是CSS框架）、搭配等前端（如：JavaScript）及後端語言（如：PHP）可以完成整個系統。
- 其中
<meta>部份認識一下，還頗重要，這是用告知瀏覽器一些頁面的初始設定為何<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />charset="UTF-8"：告知瀏覽器，這頁採用UTF-8編碼，若設定錯誤，可能導致中文變亂碼width=device-width, initial-scale=1, shrink-to-fit=no：在 Firefox/Chrome/Safari/WebView 中都有同樣的排版，也不會在其他瀏覽器中發生問題（照貼即可）。
二、改用本地端檔案：
- 由於我們自己有裝BootStrap5，所以無須從網路引入，直接讀取我們安裝的檔案即可
<!doctype html> <html lang="en"> <head> <title>校園日誌</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS v5.3.1 --> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <header> <!-- place navbar here --> </header> <main> <h1>Hello-Bootstrap</h1> </main> <footer> <!-- place footer here --> </footer> <!-- Bootstrap JavaScript Libraries --> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> </body> </html>- 用 npm 安裝的套件一律裝在
node_modules下，且正式檔案一般都在dist目錄中 - 用
bootstrap.bundle.min.js可以取代popper.min.js+bootstrap.min.js - 看起來像這樣：
- 用 npm 安裝的套件一律裝在
