Bootstrap - 部落格示範

什麼是部落格？

你好，有志於網頁開發的各位！今天，我們將要使用 Bootstrap 進入部落格的精彩世界。但在我們開始編寫代碼之前，讓我們先來了解一下部落格到底是什麼。

Bootstrap - Blog Demo

部落格，簡稱為「網誌」，是一個定期更新的網站或網頁，通常由個人或小團隊運營，以非正式或對話的風格撰寫。這就像是一個線上日記，人們在裡面分享他們對各種主題的想法、經驗或專業知識。

我記得我第一次在 2000 年代初期開始寫部落格的時候。這是一種革命性的方式，可以與全球有著相似興趣的人們連接。現在，讓我們看看如何使用 Bootstrap 創建我們自己的部落格！

設置我們的 Bootstrap 部落格示範

步驟 1：基本的 HTML 構架

我們從為部落格創建基本的 HTML 構架開始。創建一個名為 index.html 的新文件，並添加以下代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的超棒部落格</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 我們的部落格內容將放在這裡 -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這樣就建立了我們的基本 HTML 構架，並包含了必要的 Bootstrap CSS 和 JavaScript 文件。把它想成是我們部落格的骨架——我們稍後會添加肉和肌肉（內容和樣式）！

步驟 2：創建導航欄

現在，讓我們在部落格中添加一個導航欄。將以下代碼插入 <body> 標籤之後：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">我的超棒部落格</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">關於</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">聯繫</a>
</li>
</ul>
</div>
</div>
</nav>

這段代碼創建了一個響應式的導航欄，有連結到首頁、關於和聯繫頁面的鏈接。navbar-expand-lg 類別保證導航欄在較大屏幕上展開，而在較小屏幕上則會收縮為漢堡菜單。這就像為你的部落格裝上一個 GPS——幫助讀者導航你的內容！

步驟 3：添加主內容區域

接下來，讓我們為部落格文章創建主內容區域。在導航欄後面添加以下代碼：

<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- 部落格文章將放在這裡 -->
</div>
<div class="col-md-4">
<!-- 資訊欄內容將放在這裡 -->
</div>
</div>
</div>

這樣創建了一個容器，兩個列：一個用於我們的部落格文章（8 列寬）和一個用於資訊欄（4 列寬）。這就像把你的臥室分為學習區和放鬆區——每個區域都有特定的用途！

步驟 4：創建部落格文章

現在，讓我們添加一篇樣本部落格文章。將以下代碼插入我們為部落格文章留下的評論位置：

<article class="blog-post">
<h2 class="blog-post-title">樣本部落格文章</h2>
<p class="blog-post-meta">2023 年 1 月 1 日由 <a href="#">Mark</a> 撰寫</p>

<p>這是一段額外的段落佔位內容。它是為了填滿可用的空間並展示更長的文本片段如何影響周圍內容而寫的。我們會經常重複它以保持演示的流暢，所以請留心這段完全相同的文字。</p>

<h3>子標題</h3>
<p>這是一段額外的段落佔位內容。它是為了填滿可用的空間並展示更長的文本片段如何影響周圍內容而寫的。我們會經常重複它以保持演示的流暢，所以請留心這段完全相同的文字。</p>

<a href="#" class="btn btn-primary">閱讀更多</a>
</article>

這創建了一個簡單的部落格文章，包括標題、元信息、段落和「閱讀更多」按鈕。這就像給你的讀者寫一封信，分享你的想法和觀點！

步驟 5：添加資訊欄內容

最後，讓我們在資訊欄中添加一些內容。將以下代碼插入我們為資訊欄內容留下的評論位置：

<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">關於</h4>
<p class="mb-0">歡迎來到我的超棒部落格！在這裡，我分享我對技術、編程和開發者生活的想法。</p>
</div>

<div class="p-4">
<h4 class="font-italic">歸檔</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">2023 年 3 月</a></li>
<li><a href="#">2023 年 2 月</a></li>
<li><a href="#">2023 年 1 月</a></li>
</ol>
</div>

<div class="p-4">
<h4 class="font-italic">其他地方</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>

這樣添加了一個「關於」部分、過去帖子的歸檔和社交媒體個人資料的鏈接。這就像為你的部落格添加一個個人化的觸感，給讀者一個關於你是誰和你還寫了些什麼的瞥見！

結論

以上就是 Bootstrap 部落格的基本結構！當然，這只是個開始。你可以定制顏色、添加更多帖子和內容、包含圖像等等。關鍵是從簡單開始，然後逐步建立。

記住，創建部落格不僅僅是關於代碼——它是關於與世界分享你的聲音。所以，不要害怕嘗試、犯錯誤，最重要的是，享受其中的樂趣！

歡迎編碼，願你的部落格充滿啟發和教導他人的精彩內容！

方法	描述
Bootstrap CDN	用於包含 Bootstrap CSS 和 JS 文件
容器	創建一個居中的內容容器
行	創建一個水平列的組
列	為不同屏幕尺寸定義列寬
導航欄	創建一個響應式導航頭
文章	HTML5 的語義元素，用於獨立、自包含的內容
按鈕	創建一個可點擊的按鈕

Credits: Image by storyset