赛捷软件论坛 - Powered by Discuz! Board

标题: Bootstrap 5 Offcanvas [打印本页]

作者: vicky.yu 时间: 2022-7-4 10:25 标题: Bootstrap 5 Offcanvas

Offcanvas（帆布）
Offcanvas 类似于模态（默认隐藏并在激活时显示），不同之处在于它通常用作侧边栏导航菜单。

如何创建 Offcanvas 侧边栏
下例展示如何创建 offcanvas 侧边栏：

实例

<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 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 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。

欢迎光临赛捷软件论坛 (http://sagesoft.cn/bbs/)