[Bootstrap5從頭開始]Day 01-環境
感謝 Bootstrap 持續更新,讓我們能有這麼方便的工具!
👉Bootstrap5官網
感謝 六角學院 將Bootstrap5翻譯成繁中!!!
👉六角學院 Bootstrap5繁體中文網站
之前也是靠著六角翻譯的BS4繁中版學習的,只能說是大恩師啦~
👉六角學院 Bootstrap4繁體中文網站
剛好最近也開始較頻繁接觸Bootstrap,藉由這次機會重新複習,順便算是做個紀錄啦!
正篇開始(。´∀`)ノ
一、環境安裝
1. 建立一個專案的名稱的資料夾,並在裡面新增 index.html,寫一個簡單的網頁內容,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁</title>
</head>
<body>
</body>
</html>
2. 添加 Bootstrap 所需要的 CSS 及 JS
方法一:使用 CDN 連結
Bootstrap5歡迎頁向下滾動可以看到CDN連結,點選Copy(箭頭處)可複製完整程式碼
- CSS需將程式碼貼在
<head>...</head>
,我習慣會貼在<title>...</title>
上方 - JS需將程式碼貼在
<body>...</body>
之間,因為攸關載入頁面的順序,所以必須保持在最尾端(即 </body>上一句)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<title>首頁</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
方法二:下載本地端檔案,將檔案放到專案資料夾後,再連結到相對位置。
點選進入下載頁面
點選下載獲得
bootstrap-5.0.0-beta1-dist.zip
(檔名可能會因為之後更新而有區別)