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.



目录
打赏
0
4
4
0
211
分享
相关文章
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码,简洁大方、易于管理,是一段非常不错的后台菜单栏效果,欢迎对此段代码感兴趣的朋友前来下载。
138 54
Bootstrap5 侧边栏导航(Offcanvas)3
通过设置 `data-bs-scroll` 和 `data-bs-backdrop` 属性,可以控制侧边栏弹出时元素的滚动行为和背景画布的显示。示例中展示了不同配置下的滚动效果和背景画布的使用方法。
Bootstrap5 侧边栏导航(Offcanvas)2
侧边栏可通过`.offcanvas-start`、`.offcanvas-end`、`.offcanvas-top`和`.offcanvas-bottom`类分别设置在页面的左、右、顶、底位置。示例代码展示了如何使用这些类创建不同方向的侧边栏,包括按钮触发和内容区域的定义。
Bootstrap5 导航7
胶囊状动态选项卡通过设置 `data-bs-toggle="pill"` 实现,包含导航项和内容区两部分。导航项使用 `<ul class="nav nav-pills">` 定义,每个选项链接到对应的内容区,实现点击切换显示的效果。内容区由多个 `<div class="tab-pane">` 组成,根据导航项的选择显示相应内容。
Bootstrap5 导航6
动态选项卡允许用户通过点击链接切换不同内容。在每个链接上添加 `data-bs-toggle="tab"` 属性,并在对应内容的 `<div>` 标签中使用 `.tab-pane` 和 `.tab-content` 类。若需淡入效果,可在 `.tab-pane` 后添加 `.fade` 类。
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
94 0