bootstrap5中文网,Bootstrap5 与 Bootstrap 4,Bootstrap 5 foundation pdf,Bootstrap 5 modal,Bootstrap5框架,Bootstrap5搜索框自动补全
Bootstrap 5 Offcanvas 是一个用于创建响应式侧边栏的组件。它可以在移动设备上显示隐藏的菜单或面板，并提供平滑的过渡效果，增强了用户体验。

Offcanvas 组件包括一个触发器按钮和一个浮动面板。当用户点击触发器按钮时，浮动面板会出现在屏幕的一侧，可包含导航菜单、设置选项等内容。用户可以随时关闭浮动面板并继续浏览页面。

以下是一个使用 Bootstrap 5 Offcanvas 的简单示例：

html
<!-- 触发器按钮 -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">
打开菜单
</button>

<!-- 浮动面板 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="myOffcanvas" aria-labelledby="myOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="myOffcanvasLabel">菜单</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-unstyled">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>


该示例中，按钮上的 data-bs-toggle="offcanvas" 属性指示它将触发一个 Offcanvas 面板。按钮的 data-bs-target="#myOffcanvas" 属性指定要显示的面板的 ID。浮动面板本身包含一个标题和关闭按钮，以及一个菜单列表。

offcanvas-start 类指定面板应从屏幕左侧滑入。如果你想从右侧滑入，则可以使用 offcanvas-end 类。使用该组件时，需要在您的项目中添加 Bootstrap 5 CSS 和 JavaScript 文件。

总之，Bootstrap 5 Offcanvas 提供了一种简单而有效的方式来创建响应式侧边栏，并可大大提高用户体验。