当前位置： 首页 > news >正文

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 侧边栏导航(Offcanvas) 语法知识点及案例（26）

news 2025/6/28 10:24:19

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": 触发 offcanvas
  • data-bs-target="#id" 或 href="#id": 指定要打开的 offcanvas
  • data-bs-scroll="true": 允许页面在 offcanvas 打开时滚动
  • data-bs-backdrop="false": 禁用背景遮罩

4. JavaScript 方法

  • show(): 显示 offcanvas
  • hide(): 隐藏 offcanvas
  • toggle(): 切换显示状态
  • 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><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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"><!-- 触发 offcanvas 的按钮 --><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><!-- 左侧 Offcanvas 侧边栏 --><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="#">选项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><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">user@example.com</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><!-- 右侧 Offcanvas 示例 --><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><!-- 顶部 Offcanvas 示例 --><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><!-- Bootstrap 5 JS 和 Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><!-- Bootstrap Icons --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"><!-- 自定义 JavaScript --><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>

三、代码解析

  1. 基本结构：

    • 使用 offcanvas 类创建侧边栏容器
    • 通过 offcanvas-start、offcanvas-end 或 offcanvas-top 控制位置
    • 包含 offcanvas-header 和 offcanvas-body 两部分

  2. 触发方式：

    • 按钮添加 data-bs-toggle="offcanvas" 和 data-bs-target="#id" 属性
    • 也可以通过 JavaScript 控制：new bootstrap.Offcanvas(element).show()

  3. 导航菜单：

    • 使用 Bootstrap 的 nav flex-column 创建垂直导航
    • 添加了图标和下拉菜单增强用户体验

  4. 响应式设计：

    • 默认在移动设备上效果最佳
    • 可以通过 CSS 调整宽度适应不同设备

  5. 交互功能：

    • 添加了事件监听器
    • 实现了导航链接的 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><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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"><!-- 触发 Offcanvas 的按钮 --><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><!-- Offcanvas 侧边栏导航 --><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"><div class="offcanvas-header"><!-- Offcanvas 标题 --><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">子菜单 1</a></li><li><a href="#" class="nav-link">子菜单 2</a></li><li><a href="#" class="nav-link">子菜单 3</a></li></ul></div></div><!-- 主内容区域 --><div class="container mt-4"><h1>欢迎使用 Bootstrap 5 Offcanvas</h1><p>这是一个示例，展示如何使用 Offcanvas 组件创建侧边栏导航。</p><p>点击左上角的菜单按钮，可以打开侧边栏导航。</p></div><!-- Bootstrap JS Bundle (包含 Popper) --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><!-- 可选的 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>
</body>
</html>

代码详解

  1. 引入 Bootstrap 5

    <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap JS Bundle (包含 Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    通过 CDN 引入 Bootstrap 5 的 CSS 和 JavaScript 文件，确保 Offcanvas 组件和其他 Bootstrap 功能正常工作。

  2. 导航栏

    <nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><!-- 触发 Offcanvas 的按钮 --><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。
    • 导航栏标题：显示品牌名称。
    • 导航项：可选的导航链接。

  3. Offcanvas 侧边栏导航

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"><div class="offcanvas-header"><!-- Offcanvas 标题 --><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">子菜单 1</a></li><li><a href="#" class="nav-link">子菜单 2</a></li><li><a href="#" class="nav-link">子菜单 3</a></li></ul></div>
</div>
    • Offcanvas 容器：使用 offcanvas 类和 offcanvas-start 类来定义左侧滑出的 Offcanvas。
    • Offcanvas 头部：包含标题和关闭按钮。
    • Offcanvas 主体：包含导航链接和子菜单。

  4. 主内容区域

    <div class="container mt-4"><h1>欢迎使用 Bootstrap 5 Offcanvas</h1><p>这是一个示例，展示如何使用 Offcanvas 组件创建侧边栏导航。</p><p>点击左上角的菜单按钮，可以打开侧边栏导航。</p>
</div>

    主内容区域包含一个标题和一些段落，用于展示 Offcanvas 的效果。

  5. 可选的 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 的打开和关闭事件，并在控制台输出相应的信息。你可以根据需要添加更多交互功能。

http://www.lryc.cn/news/575992.html

相关文章：

  • oracle基础审计管理
  • Django实战：自定义中间件实现全链路操作日志记录
  • IPv6配置
  • MySQL主从备份
  • 16.2 Docker多阶段构建实战：LanguageMentor镜像瘦身40%，支持500+并发1.2秒响应！
  • 2025年智能营销产品发展和应用趋势
  • uniapp消息推送
  • 向量关于基的坐标向量
  • 图像分割模型中的空间信息、上下文信息、空间路径、上下文路径到底是什么？有什么作用？
  • 【C++】atoi和std::stoi
  • redisTemplate简单实现幂等性校验
  • 微信小程序进度条progress支持渐变色
  • 【vue3】打包配置webpack压缩，哈希值设置
  • CVE-2015-5531源码分析与漏洞复现(Elasticsearch目录遍历漏洞)
  • 高斯混合模型GMMK均值（十三-1）——K均值是高斯混合模型的特例
  • macOS，切换 space 失效，向右切换space（move right a space) 失效
  • [论文阅读] 人工智能 | 真实场景下 RAG 系统的工程实践指南
  • JUC：7线程的五种状态与六种状态
  • AI歌手Yuri出道：GenAI，透露着新的AI产业机遇?
  • 增加寒武纪MLU270视频转码
  • 大数据赋能智能家居：打造你贴心的“数字管家”
  • STM32安全固件升级：使用自定义 bootloader 实现SD卡固件升级，包含固件加密
  • 【stm32】HAL库开发——CubeMX配置串口通讯（中断方式）
  • virtual box 配置ubuntu 22.04网络与SSH服务
  • A模块 系统与网络安全 第三门课 网络通信原理-2
  • 24CJ87-4：圆拱型采光排烟天窗
  • Pytorch基础函数速查
  • A Machine Learning Approach for Non-blind Image Deconvolution论文阅读
  • AI助力基因数据分析：用Python玩转生命密码的秘密
  • 高标准+安全可控：关键领域研发选择什么软件？