BS5 Offcanvas 侧边栏交互
学习使用 Bootstrap 5 的 Offcanvas 组件创建可滑出的侧边栏，用于导航、表单或附加内容。 · 难度：入门 · +15XP
Offcanvas 简介
Offcanvas 是 Bootstrap 5 引入的一个侧边栏组件，它可以从屏幕的左侧、右侧、顶部或底部滑出，显示隐藏的内容。常用于移动端导航、筛选面板或详情展示。
基本属性
| 属性 | 说明 |
|---|---|
data-bs-toggle='offcanvas' | 触发 Offcanvas 显示 |
data-bs-target='#id' | 指定目标 Offcanvas 元素 |
.offcanvas-start | 从左侧滑出（默认） |
.offcanvas-end | 从右侧滑出 |
.offcanvas-top | 从顶部滑出 |
.offcanvas-bottom | 从底部滑出 |
代码示例
<button class='btn btn-primary' data-bs-toggle='offcanvas' data-bs-target='#demoOffcanvas'>打开侧边栏</button>
<div class='offcanvas offcanvas-start' id='demoOffcanvas'>
<div class='offcanvas-header'>
<h5 class='offcanvas-title'>侧边栏标题</h5>
<button type='button' class='btn-close' data-bs-dismiss='offcanvas'></button>
</div>
<div class='offcanvas-body'>
<p>这里放置你的内容。</p>
</div>
</div>
练习提示
尝试修改 offcanvas-start 为 offcanvas-end，观察侧边栏从右侧滑出。也可以添加背景遮罩选项 data-bs-backdrop='static' 防止点击外部关闭。