Bootstrap5 建立網站檔案基本結構
1、Bootstrap 下載完並解壓縮後會有 css 、js 兩個先在D磁碟新增名為 bootstrap 的資料夾，然後將 css 、js 兩個資料夾放進去。
2、Bootstrap Icons 下載完並解壓縮後進入 font 資料夾，然後把 bootstrap-icons.css 和 fonts 資料夾複製到 bootstrap 資料夾內
3、 在 bootstrap 資料夾內新增一個 images 空資料夾(用來存放網頁中用到的圖片)和一個 index.html 空白的網頁檔(作為首頁)
整個架構應該類似這樣：
4、接下來開啟 HBuilderX 與檔案總管（瀏覽至 bootstrap 資料夾）
５、滑鼠左鍵按住 bootstrap 資料夾不放拖曳至 HBuilderX 左側視窗放開
６、打開 HBuilderX 左側視窗的 bootstrap 資料夾（按左邊的小三角）
７、按 index.html 開啟網頁內容以便編輯，按標籤卡右側的關閉按鈕關閉 bootstrap 資料夾的標籤卡
8、複製底下的 HTML 內容貼到 index.html，然後按鍵盤的【Ctrl+S】存檔
9、開啟 HBuilderX 功能表的【運行】【運行到瀏覽器】【Chrome】
10、如果沒有意外，結果應該像下圖這樣：
2、Bootstrap Icons 下載完並解壓縮後進入 font 資料夾，然後把 bootstrap-icons.css 和 fonts 資料夾複製到 bootstrap 資料夾內
3、 在 bootstrap 資料夾內新增一個 images 空資料夾(用來存放網頁中用到的圖片)和一個 index.html 空白的網頁檔(作為首頁)
整個架構應該類似這樣：
4、接下來開啟 HBuilderX 與檔案總管（瀏覽至 bootstrap 資料夾）
５、滑鼠左鍵按住 bootstrap 資料夾不放拖曳至 HBuilderX 左側視窗放開
６、打開 HBuilderX 左側視窗的 bootstrap 資料夾（按左邊的小三角）
７、按 index.html 開啟網頁內容以便編輯，按標籤卡右側的關閉按鈕關閉 bootstrap 資料夾的標籤卡
8、複製底下的 HTML 內容貼到 index.html，然後按鍵盤的【Ctrl+S】存檔
<!doctype html>
<!-- 網頁使用的語言 -->
<html lang="zh-Hant-TW">
<head>
<!-- 指定網頁內容是用什麼編碼，現在大多數的網頁編碼都是 UTF-8 -->
<meta charset="utf-8">
<!-- 主要用於加強程式碼對IE的相容性，強制IE使用當前本地最新版標準模式渲染或者用chrome核心渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 螢幕上瀏覽器的可視區域 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!-- 告訴搜尋引擎，這個頁面或網站有是在什麼樣類型的網站或是內容 -->
<meta name="Keywords" content="網頁關鍵字" />
<!-- 提供準確的網頁內容摘要，為每個網頁撰寫獨一無二的說明 -->
<meta name="Description" content="網站描述" />
<!-- 網頁標題 -->
<title>Hello, world!</title>
<!-- website icon（網站圖示） -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 連結外部 Bootstrap CSS 檔案 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 連結外部 Bootstrap icon CSS 檔案 -->
<link rel="stylesheet" href="font/bootstrap-icons.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 嵌入所有的 Bootstrap JavaScript 插件。包含工具提示 (Tooltips) 和彈出提示框 (Popovers) -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- 如果你要使用工具提示或是彈出提示框 -->
<!-- <script src="js/popper.min.js"></script> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<!-- 使用 JQUERY -->
<!--
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
//..................
})
</script>
-->
</body>
</html>9、開啟 HBuilderX 功能表的【運行】【運行到瀏覽器】【Chrome】
10、如果沒有意外，結果應該像下圖這樣：
留言
張貼留言
歡迎留言