Bootstrap 5 Offcanvas
Offcanvas（帆布）Offcanvas 类似于模态（默认隐藏并在激活时显示），不同之处在于它通常用作侧边栏导航菜单。
如何创建 Offcanvas 侧边栏
下例展示如何创建 offcanvas 侧边栏：
实例
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">标题</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>一些文本。一些文本。一些文本。</p>
<p>一些文本。一些文本。一些文本。</p>
<button class="btn btn-secondary" type="button">按钮</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
打开 Offcanvas 侧栏
</button>
亲自试一试
例子解释
.offcanvas 类创建 offcanvas 侧边栏。
.offcanvas-start 类定位 offcanvas，并将其宽度设置为 400px。有关更多的定位类，请参见下面的实例。
.offcanvas-title 类确保了适当的外边距和行高。
然后，将您的内容添加到 .offcanvas-body 类中。
如需打开 offcanvas 侧边栏，您必须使用 <button> 或 <a> 元素指向 .offcanvas 容器的 id（在我们的例子中为 #demo）。
如需使用 <a> 元素打开 offcanvas 侧边栏，您可以使用 href 属性而不是 data-bs-target 属性指向 #demo。
Offcanvas 定位
请使用 .offcanvas-start|end|top|bottom 将 offcanvas 定位到左侧、右侧、顶部或底部：
右侧实例
<div class="offcanvas offcanvas-end" id="demo">
亲自试一试
顶部实例
<div class="offcanvas offcanvas-top" id="demo">
亲自试一试
底部实例
<div class="offcanvas offcanvas-bottom" id="demo">
亲自试一试
BS5 Scrollspy
BS5 实用工具
JavaScript 测验
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。
页:
[1]