header and footer（待續）

2026-05-26 12:33:48 +08:00
parent ee5a54ea2c
commit 6cb46fe772
8 changed files with 278 additions and 23 deletions
--- a/websites/my-website/headerandfooter.html
+++ b/websites/my-website/headerandfooter.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>My page</title>
+    <!-- Bootstrap core CSS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
+	
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <style>
+		html, body
+		{
+			width:100%;
+			height:100%;
+		}
+    </style>
+  </head>
+  <body>
+    <header class="page-header bg-light py-3">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-12 text-center">
+            <h1 class="mt-3">Page Header</h1>
+            <p class="mb-0">This header is editable in the editor.</p>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Page Content -->
+    <main class="container py-5">
+      <div class="row">
+        <div class="col-lg-12 text-center">
+          <h2>Bootstrap 5 start page</h2>
+          <p class="lead">Start by dragging components to page or double click to edit text</p>
+        </div>
+      </div>
+    </main>
+
+    <footer class="page-footer bg-light py-3">
+      <div class="container text-center">
+        <small>Editable footer content</small>
+      </div>
+    </footer>
+  </body>
+</html>