Bootstrap - 側邊欄範例

你好，有抱負的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入Bootstrap側邊欄的世界。作為你們友好的鄰居計算機科學老師，我很興奮能指導你們這個主題。所以，拿起你們最喜歡的飲料，舒適地坐好，我們來一起深入研究！

Bootstrap - Sidebars Demo

什麼是側邊欄？

在我們開始編程之前，讓我們先了解什麼是側邊欄。想像你正在讀一本書，頁邊有一個窄窄的列，上面有額外的信息或快速鏈接。這基本上就是網頁設計中的側邊欄！

側邊欄是一個垂直列，通常放置在網頁的左邊或右邊。它通常包含導航鏈接、額外信息或其他補充主內容區域的內容。側邊欄有助於組織信息，並通過提供對重要元素的快速訪問來改善用戶體驗。

使用Bootstrap創建基本側邊欄

既然我們知道了側邊欄是什麼，那就讓我們使用Bootstrap來創建一個吧。我們將從一個簡單的例子開始，然後逐步完善它。

步驟1：設置HTML結構

首先，我們需要設置我們的HTML結構。這裡有一個基本模板：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 側邊欄範例</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 側邊欄 -->
<div class="col-md-3 sidebar">
<!-- 側邊欄內容將放在這裡 -->
</div>
<!-- 主內容 -->
<div class="col-md-9 main-content">
<!-- 主內容將放在這裡 -->
</div>
</div>
</div>

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

在這個模板中，我們創建了一個容器，其中有兩個列：一個用於側邊欄（3個單位寬），一個用於主內容（9個單位寬）。Bootstrap使用12列的網格系統，所以這些數字加起來總共是12。

步驟2：在側邊欄中添加內容

讓我們在側邊欄中添加一些內容：

<!-- 側邊欄 -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">側邊欄菜單</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" 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>
<li class="nav-item">
<a class="nav-link" href="#">聯繫我們</a>
</li>
</ul>
</div>

在這裡，我們在側邊欄中添加了一個標題和一個導航鏈接列表。bg-light類給它添加了一個淺色的背景。

步驟3：在主內容區添加內容

讓我們在主區域添加一些內容：

<!-- 主內容 -->
<div class="col-md-9 main-content">
<h1 class="mt-3">歡迎來到我們的網站</h1>
<p>這是主內容區域。這裡將會顯示你頁面的主要信息。</p>
</div>

增強側邊欄

現在我們已經有一個基本的側邊欄，讓我們為它添加一些額外的功能。

添加搜索框

<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">側邊欄菜單</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
<!-- ... 側邊欄其餘內容 ... -->
</div>

這樣在側邊欄頂部添加了一個搜索框，使用戶能夠快速找到內容。

添加下拉菜單

讓我們在側邊欄中添加一個下拉菜單：

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
產品
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">產品 1</a></li>
<li><a class="dropdown-item" href="#">產品 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">特別優惠</a></li>
</ul>
</li>

將這段代碼添加到你的側邊欄的<ul class="nav flex-column">中。這會創建一個針對"產品"的下拉菜單。

使側邊欄響應式

側邊欄的挑戰之一是讓它在移動設備上正常工作。讓我們使我們的側邊欄響應式：

<div class="container-fluid">
<div class="row">
<!-- 側邊欄 -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
切換側邊欄
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... 側邊欄內容 ... -->
</div>
</div>
<!-- 主內容 -->
<div class="col-md-9 main-content">
<!-- ... 主內容 ... -->
</div>
</div>
</div>

我們添加了一個切換按鈕，只在小型屏幕上顯示（d-md-none），並將我們的側邊欄內容包裹在一個可折叠的div中。在大屏幕上，側邊欄總是可見的（d-md-block）。

為側邊欄添加樣式

最後，讓我們添加一些自定義的CSS來讓我們的側邊欄看起來更好：

<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>

將這段代碼添加到你的HTML的<head>中。這段CSS使側邊欄全高，添加了一個微妙的陰影，並為導航鏈接添加樣式。

結論

恭喜你！你剛剛創建了一個完全功能齊全、響應式的Bootstrap側邊欄。記住，熟練來自練習，所以不要害怕嘗試不同的佈局和樣式。

這裡是一個總結我們使用的主要Bootstrap類的表格：

類別	用途
container-fluid	創建一個全寬容器
row	創建一個水平列
col-md-3	在中型屏幕及以上創建一個3個單位寬的列
bg-light	添加一個淺色背景
nav	指示一個導航組件
nav-item	樣式化一個導航項
nav-link	樣式化一個導航鏈接
dropdown	創建一個下拉菜單
btn	樣式化一個按鈕
form-control	樣式化表單輸入

繼續編程，持續學習，最重要的是，享受樂趣！記住，每個大師都曾是初學者。你在網頁開發的旅程才剛剛開始，我很興奮看到它將帶你走向何方！

Credits: Image by storyset