第 2 集：認識 Bootstrap 5 世界

13th鐵人賽 bootstrap5 bootstrap

Kent

2021-09-17 16:22:57

7159 瀏覽

分享至

此篇會分享 Bootstrap 5 環境設置，示範 VSCode、CodePen 兩種不同環境的設置方法。

Bootstrap

Bootstrap 原名 Twitter Blueprint，是目前最受歡迎的前端框架之一。Bootstrap 中包含HTML、CSS、JavaScript、icon。

官網說明文件

中文：六角學院翻譯

英文：官網

優勢

component 元件化，將 css 模組化使開發者能更專注於 HTML 撰寫 (~~不用自己寫 css 檔也可以寫網頁，還不快來給我一份?~~
豐富多樣的 RWD 響應式設計 (~~什麼！這年代還有網頁還不支援手機版?~~
不需要了解 JavaScript，也可以讓網站具有互動性（~~啥？作者不會 Js！~~
完善的教學文件（~~寶藏就藏在 Bootsrtap 原始碼中~~

VSCode 環境設置

在設置 VSCode 環境時，有兩種常見的方法：CDN 和本地載入。

首先，我們來介紹 CDN 方法，這種方法適合快速、簡單地設置環境。接著，我們會討論本地載入方法，這種方法適合需要更多客製化的情況。

CDN 方法

CDN 是使用遠端伺服器上的資源，透過網址（API）將這些資源引入到自己的專案中。這種方法方便快速，不需要將資源下載到本地。

官網程式碼範例使用步驟：點選程式碼範例連結 → Starter template → Copy → 貼上到自己的 html 檔案

CDN 路徑複製

參考下方圖片紅框位置，對應官網範例中的程式碼，來複製CSS、JS檔案路徑。

CDN 方法

Step1：CSS 路徑
- <head> 標籤中貼上路徑 <link>...
Step2：JS 路徑
- </body> 結尾標籤前貼上路徑 <script>...</script>

本地載入方法

⚠️ 由於下載的原始碼和 CDN 路徑下的內容都是編譯後的，客製化只能透過 CSS 權重來覆蓋，無法靈活使用 Bootstrap 強大的 Utilities 通用類別和 variables 變數。若想客製化修改 scss 建議不要使用這個方法，而是參考後面Bootstrap 客製化 Sass 環境介紹的載入方法介紹的載入方法，使用 import 路徑的方式來編譯。

Step1：下載原始碼
- 官網下載CSS、JavaScript 檔案連結
- 解壓縮檔案後，複製 css、js 這兩個資料夾到專案中
Step2：引入 css、js 檔案
- <head> 標籤中添加 css 路徑 <link>
- </body> 結尾標籤前添加 js 路徑 <script>

測試環境是否載入成功

複製 Bootstrap 文件範例程式碼，來測試環境是否載入成功。

因為 Bootstrap 含有 JS 資源路徑，為了確認環境是否正確載入，應選擇含有 JavaScript 功能的範例程式碼進行測試。例如：Modal 元件範例，檢查按鈕樣式和 JavaScript 事件是否正常運作。

使用步驟：點下 copy → 到程式碼 body 區塊貼上 → 檢查樣式是否和 Bootstrap 相同

Modal 元件

CodePen 環境設置

若還不懂 CodePen（線上編輯器），推薦 Ray 大大的超詳細介紹文：十分鐘快速入門上手 CodePen（有中文翻譯）

CodePen 提供了一個線上編輯器，適合快速測試和分享前端代碼。以下是三步驟設置 Bootstrap 環境的方法：

Step1：取得 CDN 路徑
- cdnjs：最大宗 CDN 原始碼之一，好處是可以在上面找尋各式各樣的 CDN 資源，還可以選擇版本以及種類
  - 優點：選擇版本
  - 缺點：可能沒有最新的版本
- CodePen：直接在 Settings 中搜尋
  - 優點：快速方便
  - 缺點：無法選擇版本
- Bootstrap 官網：在官網搜尋 CDN 就可以找到對應文件位置
  - 優點：依照官方文件最放心（適合新手）
  - 缺點：無法選擇版本
Step2：設置 CND 路徑（將取得的 CDN 路徑加入到 CodePen 的設定中）
- CodePen 設置的兩種進入方式：
  1. 點擊 Settings 按鈕
  2. 選擇需要設置 CDN 路徑的區塊 HTML、CSS、JS 對的齒輪按鈕，直接進到對應區塊的 Settings
- CSS CDN 設置步驟：Settings → CSS → 下方貼上 CDN 路徑
- JS CDN 設置步驟：Settings → JS → 下方貼上 CDN 路徑