2021 iThome 鐵人賽

DAY 2

1

自我挑戰組

30 天轉生到 bootstrap 5 的意識界系列第 2 篇

第 2 集：認識 Bootstrap 5 世界

13th鐵人賽 bootstrap5 bootstrap

2021-09-17 16:22:57

6247 瀏覽

分享至

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

Bootstrap

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

官網說明文件

中文：六角學院翻譯

英文：官網

優勢

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

VSCode 環境設置

介紹兩種方法：CDN、本地載入

CDN 方法

CDN 是使用別人伺服器上的資源，透過網址（API）來將別人伺服器上的檔案引入到自己的專案中使用。

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

CDN 路徑複製

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

CDN 方法

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

本地載入方法

3 步驟載入環境

⚠️ 若想客製化修改 scss 的朋友們建議不要使用這個方法，之後 Sass 章節會介紹到Sass 原始檔案載入方法。

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

Step3：測試環境是否載入成功

選擇 Bootstrap Modal 元件範例，來檢查按鈕樣式、JS 事件是否正確呈現。

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

CodePen 環境設置

3 步驟環境設置

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

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

Step3：測試環境是否載入成功

選擇 Bootstrap Modal 元件範例，來檢查按鈕樣式、JS 事件是否正確呈現。

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

Modal 元件

魔力感知

獲得額外技能魔力感知

打開了看見 Bootstrap 世界中所有事物的能力

第 1 集：轉生到 Bootstrap 5 世界

第 3 集：CSS 魔力

系列文

30 天轉生到 bootstrap 5 的意識界共 30 篇

目錄

RSS系列文訂閱系列文

30 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

2 則留言

0

hyoeun86015

iT邦新手 4 級 ‧ 2021-11-09 13:54:21

Step2：設置 CND 路徑

老師好，文章中這段的 CDN 好像反了？

回應 1
檢舉

Kent iT邦新手 3 級 ‧ 2021-11-13 11:14:09 檢舉

嗨 hyoeun86015～
抱歉這麼晚回 ?
啊我不是老師拉～～（還是個前端菜鳥
想問你提到的是指「CodePen 設置的兩種進入方式」這邊的兩種方式反了嗎？

登入發表回應

0

arguskao

iT邦新手 4 級 ‧ 2022-04-23 16:28:08

本地端...

若想客製化修改 scss 的朋友們建議不要使用這個方法，之後 Sass 章節會介紹到Sass 原始檔案載入方法。

請問原因？

回應 1
檢舉

Kent iT邦新手 3 級 ‧ 2022-04-25 22:45:37 檢舉

這篇介紹的方式下載出來的樣式都是 css 檔，只能透過 css 權重來覆蓋，無法靈活使用 bootstrap 強大的 Utilities 通用類別、variables 變數。（後面章節有介紹到這兩種方法）

登入發表回應

我要留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙