Bootstrap5 侧边栏导航(Offcanvas)1

简介: Bootstrap5 的 Offcanvas 组件提供了一种在小屏幕设备上使用的侧边栏导航方案。通过添加 `.offcanvas` 类并结合 `data-bs-toggle="offcanvas"` 属性,可实现侧边栏的显示与隐藏。支持通过链接的 `href` 或按钮的 `data-bs-target` 属性进行控制。

Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 侧边栏侧边栏类似于模态框,在移动端设备中比较常用。

创建滑动导航
我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类,从而控制侧边栏的显示与隐藏:

.offcanvas 隐藏内容 (默认)
.offcanvas.show 显示内容
可以使用 a 链接的 href 属性或者 button 元素使用 data-bs-target 属性来设置侧边栏。这两种情况都需要使用 data-bs-toggle="offcanvas"。

创建滑动导航实例如下:

实例

使用链接的 href 属性



侧边栏





Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.



相关文章
|
前端开发
Bootstrap教程(25)--折叠面板、折叠面板导航
本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结
789 0
Bootstrap教程(25)--折叠面板、折叠面板导航
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
1241 3
|
9月前
|
人工智能 数据可视化 搜索推荐
国内无代码平台哪家好?2025最新对比+真实用户评价大公开
无代码平台让普通人也能快速搭建应用,无需编程基础。戴成功团队盘点2025主流平台:Lynx AI一句话生成全栈应用,轻舟平台适合企业官网,数海云创强在数据报表,魔方搭建设计灵活,速成应用模板丰富。结合需求、预算与技术能力,选择最适合的工具,事半功倍。
|
前端开发 JavaScript 索引
|
数据采集 编解码 数据处理
【核磁共振成像】单射成像和高速脉冲序列
【核磁共振成像】单射成像和高速脉冲序列
|
机器学习/深度学习 传感器 人工智能
《AI赋能星际探索:机器人如何开启宇宙新征程!》
人工智能(AI)正革新空间探索机器人技术,提升其在复杂宇宙环境中的操作能力。AI助力精准导航与路径规划,使机器人能自主分析环境、避开危险;实现复杂任务的自主决策,如设备维修和样本采集;高效处理海量数据,快速提取有价值信息;优化人机协作模式,增强宇航员与机器人之间的默契。这些进步大幅提高了空间探索的效率和安全性,为人类揭开宇宙奥秘提供了强有力的支持。
735 4
|
机器学习/深度学习 传感器 自动驾驶
未来之路:大模型技术在自动驾驶的应用与影响
本文深入分析了大模型技术在自动驾驶领域的应用和影响,万字长文,慢慢观看~ 文中首先概述了大模型技术的发展历程,自动驾驶模型的迭代路径,以及大模型在自动驾驶行业中的作用。 接着,详细介绍了大模型的基本定义、基础功能和关键技术,特别是Transformer注意力机制和预训练-微调范式。 文章还介绍了大模型在任务适配性、模型变革和应用前景方面的潜力。 在自动驾驶技术的部分,详细回顾了从CNN到RNN、GAN,再到BEV和Transformer结合的技术迭代路径,以及占用网络模型的应用。 最后,文章重点讨论了大模型如何在自动驾驶的感知、预测和决策层面提供赋能,突出了其在该领域的重要性和影响力。
3075 56
|
存储 安全 关系型数据库
FileZilla Server提权与常见问题
FileZilla Server提权与常见问题
1465 0
|
安全 虚拟化 Windows

热门文章

最新文章