WEB前端网页设计-Bootstrap5 侧边栏导航（Offcanvas）& JavaScript 事件

你可知这世上再难遇我

已于 2023-06-02 16:20:28 修改

阅读量5.1k

点赞数

分类专栏： WEB-HTML/CSS 文章标签： html css 前端

于 2023-05-02 21:18:26 首次发布

本文链接：https://blog.csdn.net/weixin_57099902/article/details/130467022

版权

WEB-HTML/CSS 专栏收录该内容

112 篇文章 13 订阅

订阅专栏

Bootstrap5 侧边栏导航（Offcanvas）

Bootstrap5 侧边栏导航（Offcanvas）

Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。

创建滑动导航

我们可以通过 JavaScript 来设置是否在类后面添加类，从而控制侧边栏的显示与隐藏：.offcanvas.show

.offcanvas隐藏内容 (默认)
.offcanvas.show显示内容

可以使用 a 链接的属性或者 button 元素使用属性来设置侧边栏。这两种情况都需要使用。hrefdata-bs-targetdata-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> <按钮类型=“按钮” 类=“BTN-关闭文本重置” data-bs-dismiss=“offcanvas”   aria-label=“Close”></button> </div> <div class=“offcanvas-body”>   <div> 一些文本作为占位符。在现实生活中，您可以拥有您选择的元素。如文本、图像、列表等。</分区> <</b1186>”button “btn ” ” =”>  button <“ =”“> <=> >

侧边栏的方向

可以通过以下四个类来控制侧边栏的方向：

.offcanvas-start显示在左侧，如上实例。
.offcanvas-end显示在右侧
.offcanvas-top显示在顶部
.offcanvas-bottom显示在底部

<按钮类=“BTN BTN-primary” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#offcanvasTop”    aria-controls=“offcanvasTop”>顶部导航栏</button> <div class=“offcanvas offcanvas-top” tabindex=“-1” id=”  offcanvasTop“ aria-labelledby=”offcanvasTopLabel“> <div class=”offcanvas-header“>  <h5 id=”offcanvasTopLabel“>显示在顶部导航栏</h5> <button type=”button“ class=”btn-close text-reset“   data-bs-dismiss=”offcanvas“ aria-label=”Close“></button> </div>  <div class=”offcanvas-body“>... </div> </div>

<按钮类=“BTN BTN-primary” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#offcanvasRight”    aria-controls=“offcanvasRight”>右侧侧边栏</button> <div class=“offcanvas offcanvas-end” tabindex=“-1” id=”  offcanvasRight“ aria-labelledby=”offcanvasRightLabel“> <div class=”offcanvas-header“>  <h5 id=”offcanvasRightLabel“>显示在右侧侧边栏</h5> <button type=”button“ class=”btn-close text-reset“  data-bs-dismiss=“offcanvas” aria-label=“Close”></button> </div>  <div class=”画布外身体“>... </div> </div>

<按钮类=“BTN BTN-primary” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#offcanvasBottom”    aria-controls=“offcanvasBottom”>底部导航栏</button> <div class=“offcanvas offcanvas-bottom” tabindex=“-1” id=”  offcanvasBottom“ aria-labelledby=”offcanvasBottomLabel“> <div  class=”offcanvas-header“>  <h5 class=”offcanvas-title“ id=”offcanvasBottomLabel“>显示在底部导航栏</h5> <button type=”button“  class=”btn-close text-reset“ data-bs-dismiss=”offcanvas“ aria-label=”Close“  ></button> </div>  <div class=“offcanvas-body small”> ... </div> </div>

设置背景及背景是否可滚动

我们可以在弹出侧边栏的时候设置元素是否可以滚动，也可以设置是否显示一个背景画布。使用属性来设置元素是否可滚动，来切换是否显示背景画布。<body>data-bs-scroll<body>data-bs-backdrop

<按钮类=“BTN BTN-primary” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#offcanvasScrolling”    aria-controls=“offcanvasScrolling”>body 元素可以滚动</button> <button class=“btn btn-primary” type=“button”  data-bs-toggle=“offcanvas” data-bs-target=“#offcanvasWithBackdrop” aria-controls=“offcanvasWithBackdrop”  >显示画布（默认）</button> <button class=“btn btn-primary” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#offcanvasWithBothOptions”    aria-controls=“offcanvasWithBothOptions”>允许滚动及显示画布</button> <div class=“offcanvas offcanvas-start” data-bs-scroll=” true“ data-bs-backdrop=”false“ tabindex=”-1“ id=”offcanvasScrolling“    aria-labelledby=”offcanvasScrollingLabel“> <div  class=”offcanvas-header“>  <h5 class=”offcanvas-title“ id=“offcanvasScrollingLabel”>正文内容可以滚动</h5> <button type=”<b1189&gt;button</b1189>“ class=”btn-close text-reset“ data-bs-dismiss=”offcanvas“ aria-label=”Close“   ></button> </div> <div class=“offcanvas-body”> <p>滚动页面查看效果。</p> </div> </div> <div class=“offcanvas offcanvas-start” tabindex=” -1“ id=”offcanvasWithBackgrounddrop“ aria-labelledby=”offcanvasWithBackdropLabel“  > <div class=”offcanvas-header“> <h5 class=”offcanvas-title“ id=”offcanvasWithBackdropLabel“>使用背景画布</h5> <按钮类型=“按钮” 类=“btn-关闭文本重置” data-bs-dismiss=“offcanvas” aria-label=”   Close“></button> </div> <div class=”offcanvas-body“> <p>   正文内容不可滚动</p> </div> </div> <div class=“offcanvas offcanvas-start” data-bs-scroll=“true” tabindex=“-1” id=“offcanvasWithBothOptions” aria-labelledby=“offcanvasWithBothOptionsLabel”    > <div class=“offcanvas-header”> <h5 class=“offcanvas-title” id=” offcanvasWithBothOptionsLabel“>使用背景画布，正文内容可滚动</h5> <button type=”button“ class=”btn-close text-reset” data-bs-dismiss=“offcanvas” aria-label=“Close”></button> </div>  <div class=“offcanvas-body”> <p>滚动页面查看效果。</人> </格> </格>

侧边栏案例

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

	JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：

<button onclick="displayDate()">现在的时间是?</button>

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载