iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

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

第 2 集:認識 Bootstrap 5 世界

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

Bootstrap

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

官網說明文件

中文:六角學院翻譯

英文:官網

優勢

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

VSCode 環境設置

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

CDN 方法

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

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

CDN 路徑複製

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

CDN 方法

  • Step1:CSS 路徑

    • <head> 標籤中貼上路徑 <link>...
  • Step2:JS 路徑

    • </body> 結尾標籤貼上路徑 <script>...</script>

本地載入方法

3 步驟載入環境

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

  • Step1:下載原始碼

  • Step2:引入 css、js 檔案

    • <head> 標籤中添加 css 路徑 <link>
    • </body> 結尾標籤添加 js 路徑 <script>
      引入 css、js 檔案

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

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

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

Modal 元件

CodePen 環境設置

3 步驟環境設置

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

  • Step1:取得 CDN 路徑

    • cdnjs:最大宗 CDN 原始碼之一,好處是可以在上面找尋各式各樣的 CDN 資源,還可以選擇版本以及種類
      • 優點:選擇版本
      • 缺點:可能沒有最新的版本

    cdnjs

    • CodePen:直接在 Settings 中搜尋
      • 優點:快速方便
      • 缺點:無法選擇版本

    codepensearch

    • Bootstrap 官網:在官網搜尋 CDN 就可以找到對應文件位置
      • 優點:依照官方文件最放心(適合新手)
      • 缺點:無法選擇版本

    Bootstrap CDN

  • Step2:設置 CND 路徑

    • CodePen 設置的兩種進入方式:

      1. 點擊 Settings 按鈕,在點擊需要設置 CDN 路徑的區塊 HTML、CSS、JS
        Settings

      2. 點擊 HTML、CSS、JS 區塊對應的齒輪按鈕,直接進到對應區塊的 Settings
        齒輪按鈕

    • CSS CDN 設置步驟:Settings → CSS → 下方貼上 CDN 路徑
      CSS CDN

    • JS CDN 設置步驟:Settings → JS → 下方貼上 CDN 路徑
      JS CDN

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

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

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

Modal 元件


魔力感知

獲得額外技能魔力感知

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


上一篇
第 1 集:轉生到 Bootstrap 5 世界
下一篇
第 3 集:CSS 魔力
系列文
30 天轉生到 bootstrap 5 的意識界30

尚未有邦友留言

立即登入留言