Bootstrap 5学习教程，从入门到精通，Bootstrap 5 侧边栏导航(Offcanvas) 语法知识点及案例（26）
Bootstrap 5 侧边栏导航(Offcanvas) 语法知识点及案例
一、Offcanvas 语法知识点
1. 基本结构
Offcanvas 由以下几个主要部分组成：
- 触发按钮（通常带有
data-bs-toggle="offcanvas"属性） - Offcanvas 容器（带有
.offcanvas类） - 关闭按钮（通常放在 offcanvas 内部）
2. 核心类
.offcanvas: 主容器.offcanvas-start/.offcanvas-end/.offcanvas-top/.offcanvas-bottom: 控制 offcanvas 出现的位置.offcanvas-header: 头部区域.offcanvas-title: 标题样式.offcanvas-body: 主要内容区域
3. 数据属性
data-bs-toggle="offcanvas": 触发 offcanvasdata-bs-target="#id"或href="#id": 指定要打开的 offcanvasdata-bs-scroll="true": 允许页面在 offcanvas 打开时滚动data-bs-backdrop="false": 禁用背景遮罩
4. JavaScript 方法
show(): 显示 offcanvashide(): 隐藏 offcanvastoggle(): 切换显示状态getInstance(): 获取实例dispose(): 销毁实例
5. 事件
show.bs.offcanvas: 显示前触发shown.bs.offcanvas: 显示后触发hide.bs.offcanvas: 隐藏前触发hidden.bs.offcanvas: 隐藏后触发
二、完整案例代码
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Offcanvas 侧边栏导航title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义 offcanvas 宽度 */
.offcanvas.offcanvas-start {
width: 280px; /* 设置侧边栏宽度 */
}
/* 导航链接悬停效果 */
.nav-link:hover {
background-color: rgba(0, 0, 0, 0.05);
}
/* 活动导航项样式 */
.nav-link.active {
background-color: #0d6efd;
color: white !important;
}
style>
head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<button class="btn btn-light me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
<span class="navbar-toggler-icon">span>
button>
<a class="navbar-brand" href="#">我的网站a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon">span>
button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav me-auto">
<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>
<div class="container mt-4">
<h2>Offcanvas 侧边栏导航示例h2>
<p>点击左上角按钮打开侧边栏导航。p>
<div class="d-flex gap-2 mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
打开侧边栏 (左侧)
button>
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar-right">
打开侧边栏 (右侧)
button>
<button class="btn btn-warning" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar-top">
打开侧边栏 (顶部)
button>
div>
div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarLabel">网站导航h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">button>
div>
<div class="offcanvas-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi bi-house-door me-2">i> 首页
a>
li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-person me-2">i> 个人中心
a>
li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-gear me-2">i> 设置
a>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" role="button" data-bs-toggle="dropdown">
<i class="bi bi-collection me-2">i> 更多选项
a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项1a>li>
<li><a class="dropdown-item" href="#">选项2a>li>
<li><hr class="dropdown-divider">li>
<li><a class="dropdown-item" href="#">其他a>li>
ul>
li>
ul>
<hr>
<div class="mt-3">
<h6>用户信息h6>
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/40" class="rounded-circle me-2" alt="用户头像">
<div>
<div class="fw-bold">用户名div>
<small class="text-muted">[email protected]small>
div>
div>
div>
<hr>
<form class="mt-3">
<div class="mb-3">
<label for="search" class="form-label">搜索label>
<input type="text" class="form-control" id="search" placeholder="输入关键词...">
div>
<button class="btn btn-outline-primary w-100" type="submit">搜索button>
form>
div>
div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="sidebar-right" aria-labelledby="sidebarRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarRightLabel">右侧边栏h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">button>
div>
<div class="offcanvas-body">
<p>这是一个从右侧滑出的侧边栏示例。p>
<p>你可以在这里放置通知、设置面板或其他内容。p>
<div class="alert alert-info">
<i class="bi bi-info-circle me-2">i> 这是一个提示信息。
div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeSwitch">
<label class="form-check-label" for="darkModeSwitch">暗黑模式label>
div>
div>
div>
<div class="offcanvas offcanvas-top" tabindex="-1" id="sidebar-top" aria-labelledby="sidebarTopLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarTopLabel">顶部边栏h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">button>
div>
<div class="offcanvas-body">
<p>这是一个从顶部滑出的侧边栏示例。p>
<p>适合放置通知栏或搜索框等内容。p>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="搜索..." aria-label="Search">
<button class="btn btn-outline-success" type="submit">搜索button>
form>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script>
// 监听 offcanvas 事件
document.addEventListener('DOMContentLoaded', function() {
// 获取 offcanvas 元素
const sidebar = document.getElementById('sidebar');
// 创建 offcanvas 实例
const bsOffcanvas = new bootstrap.Offcanvas(sidebar);
// 事件监听示例
sidebar.addEventListener('show.bs.offcanvas', function () {
console.log('侧边栏即将显示');
});
sidebar.addEventListener('shown.bs.offcanvas', function () {
console.log('侧边栏已完全显示');
});
sidebar.addEventListener('hide.bs.offcanvas', function () {
console.log('侧边栏即将隐藏');
});
sidebar.addEventListener('hidden.bs.offcanvas', function () {
console.log('侧边栏已完全隐藏');
});
// 可以通过 JavaScript 控制 offcanvas
// 例如：5秒后自动打开侧边栏
// setTimeout(() => bsOffcanvas.show(), 5000);
// 导航链接点击效果
const navLinks = document.querySelectorAll('.nav-link:not(.dropdown-toggle)');
navLinks.forEach(link => {
link.addEventListener('click', function() {
// 移除所有 active 类
navLinks.forEach(l => l.classList.remove('active'));
// 为当前点击的链接添加 active 类
this.classList.add('active');
});
});
});
script>
body>
html>
三、代码解析
-
基本结构：
- 使用
offcanvas类创建侧边栏容器 - 通过
offcanvas-start、offcanvas-end或offcanvas-top控制位置 - 包含
offcanvas-header和offcanvas-body两部分
- 使用
-
触发方式：
- 按钮添加
data-bs-toggle="offcanvas"和data-bs-target="#id"属性 - 也可以通过 JavaScript 控制：
new bootstrap.Offcanvas(element).show()
- 按钮添加
-
导航菜单：
- 使用 Bootstrap 的
nav flex-column创建垂直导航 - 添加了图标和下拉菜单增强用户体验
- 使用 Bootstrap 的
-
响应式设计：
- 默认在移动设备上效果最佳
- 可以通过 CSS 调整宽度适应不同设备
-
交互功能：
- 添加了事件监听器
- 实现了导航链接的 active 状态切换
- 包含了多种位置的 offcanvas 示例
四、案例代码
以下是一个完整的示例，展示了如何创建一个左侧滑出的 Offcanvas 侧边栏导航，包含详细的注释。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Offcanvas 侧边栏导航示例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义样式，可根据需要调整 */
body {
min-height: 100vh;
margin: 0;
padding: 0;
}
.navbar {
z-index: 1030; /* 确保导航栏在最上层 */
}
.offcanvas {
width: 250px; /* 设置 Offcanvas 宽度 */
}
.nav-link {
color: #333;
}
.nav-link:hover {
background-color: #f8f9fa;
}
style>
head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
☰ 菜单
button>
<a class="navbar-brand" href="#">品牌a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<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>
ul>
div>
div>
nav>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">导航菜单h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="关闭">button>
div>
<div class="offcanvas-body">
<ul class="list-unstyled">
<li><a href="#" class="nav-link">首页a>li>
<li><a href="#" class="nav-link">关于我们a>li>
<li><a href="#" class="nav-link">服务a>li>
<li><a href="#" class="nav-link">博客a>li>
<li><a href="#" class="nav-link">联系a>li>
ul>
<hr>
<h6>子菜单h6>
<ul class="list-unstyled">
<li><a href="#" class="nav-link">子菜单 1a>li>
<li><a href="#" class="nav-link">子菜单 2a>li>
<li><a href="#" class="nav-link">子菜单 3a>li>
ul>
div>
div>
<div class="container mt-4">
<h1>欢迎使用 Bootstrap 5 Offcanvash1>
<p>这是一个示例，展示如何使用 Offcanvas 组件创建侧边栏导航。p>
<p>点击左上角的菜单按钮，可以打开侧边栏导航。p>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
<script>
// 示例：监听 Offcanvas 打开事件
var myOffcanvas = document.getElementById('offcanvasExample')
myOffcanvas.addEventListener('show.bs.offcanvas', function () {
console.log('Offcanvas 已打开')
})
// 监听 Offcanvas 关闭事件
myOffcanvas.addEventListener('hide.bs.offcanvas', function () {
console.log('Offcanvas 已关闭')
})
script>
body>
html>
代码详解
-
引入 Bootstrap 5
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>通过 CDN 引入 Bootstrap 5 的 CSS 和 JavaScript 文件，确保 Offcanvas 组件和其他 Bootstrap 功能正常工作。
-
导航栏
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> ☰ 菜单 button> <a class="navbar-brand" href="#">品牌a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <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> ul> div> div> nav>- 按钮：使用
data-bs-toggle="offcanvas"和data-bs-target="#offcanvasExample"属性来触发 Offcanvas。 - 导航栏标题：显示品牌名称。
- 导航项：可选的导航链接。
- 按钮：使用
-
Offcanvas 侧边栏导航
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">导航菜单h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="关闭">button> div> <div class="offcanvas-body"> <ul class="list-unstyled"> <li><a href="#" class="nav-link">首页a>li> <li><a href="#" class="nav-link">关于我们a>li> <li><a href="#" class="nav-link">服务a>li> <li><a href="#" class="nav-link">博客a>li> <li><a href="#" class="nav-link">联系a>li> ul> <hr> <h6>子菜单h6> <ul class="list-unstyled"> <li><a href="#" class="nav-link">子菜单 1a>li> <li><a href="#" class="nav-link">子菜单 2a>li> <li><a href="#" class="nav-link">子菜单 3a>li> ul> div> div>- Offcanvas 容器：使用
offcanvas类和offcanvas-start类来定义左侧滑出的 Offcanvas。 - Offcanvas 头部：包含标题和关闭按钮。
- Offcanvas 主体：包含导航链接和子菜单。
- Offcanvas 容器：使用
-
主内容区域
<div class="container mt-4"> <h1>欢迎使用 Bootstrap 5 Offcanvash1> <p>这是一个示例，展示如何使用 Offcanvas 组件创建侧边栏导航。p> <p>点击左上角的菜单按钮，可以打开侧边栏导航。p> div>主内容区域包含一个标题和一些段落，用于展示 Offcanvas 的效果。
-
可选的 JavaScript 代码
<script> // 示例：监听 Offcanvas 打开事件 var myOffcanvas = document.getElementById('offcanvasExample') myOffcanvas.addEventListener('show.bs.offcanvas', function () { console.log('Offcanvas 已打开') }) // 监听 Offcanvas 关闭事件 myOffcanvas.addEventListener('hide.bs.offcanvas', function () { console.log('Offcanvas 已关闭') }) </script>这段 JavaScript 代码用于监听 Offcanvas 的打开和关闭事件，并在控制台输出相应的信息。你可以根据需要添加更多交互功能。