[Bootstrap5從頭開始]Day 01-環境

2021.05.12 一直被門檻絆倒

Lisa Li
木棉草工作室
May 12, 2021

--

感謝 Bootstrap 持續更新,讓我們能有這麼方便的工具!
👉Bootstrap5官網

感謝 六角學院 將Bootstrap5翻譯成繁中!!!
👉六角學院 Bootstrap5繁體中文網站
之前也是靠著六角翻譯的BS4繁中版學習的,只能說是大恩師啦~
👉六角學院 Bootstrap4繁體中文網站

剛好最近也開始較頻繁接觸Bootstrap,藉由這次機會重新複習,順便算是做個紀錄啦!

正篇開始(。´∀`)ノ

一、環境安裝

1. 建立一個專案的名稱的資料夾,並在裡面新增 index.html,寫一個簡單的網頁內容,如下:

2. 添加 Bootstrap 所需要的 CSS 及 JS

方法一:使用 CDN 連結
Bootstrap5歡迎頁向下滾動可以看到CDN連結,點選Copy(箭頭處)可複製完整程式碼

  • CSS需將程式碼貼在 <head>...</head>,我習慣會貼在 <title>...</title> 上方
  • JS需將程式碼貼在 <body>...</body> 之間,因為攸關載入頁面的順序,所以必須保持在最尾端(即 </body>上一句)

方法二:下載本地端檔案,將檔案放到專案資料夾後,再連結到相對位置。

點選進入下載頁面

點選下載獲得
bootstrap-5.0.0-beta1-dist.zip
(檔名可能會因為之後更新而有區別)

--

--

木棉草工作室
木棉草工作室

Published in 木棉草工作室

在學習的路上出一點力成為未來的石頭。一些學習心得,一些作品分享,一起成長。

Lisa Li
Lisa Li

Written by Lisa Li

不小心觸碰到後端的前端工程師