Bootstrap - 侧边栏演示

你好，有抱负的网页开发者们！今天，我们将踏上一段令人兴奋的旅程，探索Bootstrap侧边栏的世界。作为你友好的计算机科学老师，我很高兴能引导你了解这个主题。所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始吧！

Bootstrap - Sidebars Demo

侧边栏是什么？

在我们开始编码之前，先来了解一下侧边栏到底是什么。想象你在读一本书，页面旁边有一列狭窄的额外信息或快速链接。这在网页设计中基本上就是侧边栏的概念！

侧边栏是一个通常放置在网页左侧或右侧的垂直列。它通常包含导航链接、额外信息或其他补充主要内容区域的内容。侧边栏有助于组织信息，并通过提供对重要元素的快速访问来改善用户体验。

使用Bootstrap创建基本侧边栏

既然我们知道了侧边栏是什么，那就让我们使用Bootstrap来创建一个。我们将从一个简单的示例开始，并逐步构建。

步骤1：设置HTML结构

首先，我们需要设置我们的HTML结构。以下是一个基本模板：

<!DOCTYPE html>
<html lang="zh-CN">
<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