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

<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	浏览器已完成页面的加载

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 ...

	在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

【Spring Boot 】Spring Boot + HikariCP 连接池使用示例

文章目录示例工具版本HikariCP 依赖HikariCP 配置1. connectionTimeout2. minimumIdle3. maximumPoolSize4. idleTimeout5. maxLifetime6. autoCommitSpring Boot Data + HikariCP + MySQL示例测试应用程序1. 使用 Maven 命令2. 使用 Eclipse3. 使用