11.23 学习记录
Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 侧边栏侧边栏类似于模态框,在移动端设备中比较常用。
创建滑动导航
我们可以通过 JavaScript 来设置是否在 .offcanvas
类后面添加 .show
类,从而控制侧边栏的显示与隐藏:
.offcanvas
隐藏内容 (默认).offcanvas.show
显示内容
可以使用 a 链接的 href
属性或者 button 元素使用 data-bs-target
属性来设置侧边栏。这两种情况都需要使用 data-bs-toggle="offcanvas"
。
创建滑动导航实例如下:
实例
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"> 使用链接的 href 属性 </a> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> 按钮中使用 data-bs-target </button> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">侧边栏</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <div> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div> <div class="dropdown mt-3"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"