首页 Bootstrap5组件手册

侧边栏


<div class="offcanvas offcanvas-start" id="cebianlan" style="width:200px;">
基础类：
.offcanvas

组合类：
.show                        显示侧边栏（加载网页时显示）

组合类：（单选）
.offcanvas-start             左侧弹出
.offcanvas-end               右侧弹出
.offcanvas-top               上边弹出
.offcanvas-bottom            底部弹出

自定义属性：
data-bs-scroll="true"        弹出时，<body>是否可滚动，true可以
data-bs-backdrop="true"      弹出时，是否有画布，true有
注：默认，不可滚动，有画布

==============================================
<div class="offcanvas-header">
.offcanvas-header               侧边栏头部

==============================================
<button class="btn-close" data-bs-dismiss="offcanvas" ></button>
.btn-close                      关闭按钮
data-bs-dismiss="offcanvas"     关闭按钮，关联侧边栏

==============================================
<div class="offcanvas-body">
.offcanvas-body                 侧边栏主体

==============================================
弹出侧边栏<button>
data-bs-toggle="offcanvas"      关联侧边栏
data-bs-target="#cebianlan"     关联侧边栏
注：可以用<a>

示例


<div class="offcanvas offcanvas-start" id="cebianlan" style="width:200px;">   <!--width:200px;控制侧边栏宽度-->
  <div class="offcanvas-header">
    <h5>侧边栏标题</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas" ></button>
  </div>
  <div class="offcanvas-body">
    这里可以添加其它标签
  </div>
</div>

<!--弹出侧边栏-->
<button class="btn btn-primary " data-bs-toggle="offcanvas" data-bs-target="#cebianlan">侧边栏</button>