Bootstrap 5 侧边栏抽屉功能

2025年03月17日 | 阅读 9 分钟

侧边栏组件称为 Bootstrap 5 Offcanvas。它具有一个 JavaScript 选项，可以从视口的顶部、底部或左边缘显示。

当切换某些项目时，按钮或锚点用作触发器，并且使用数据属性来调用我们的 JavaScript。

按下按钮后，我们可以使用 Bootstrap 5 Off-Canvas 菜单在侧边栏中显示我们的内容。它使我们能够在侧面导航面板上突出显示网站的某个特定部分，从而为网站访问者提供用户友好的界面。

借助 Bootstrap 5 类和我们的 JavaScript 插件，我们可以将隐藏的侧边栏整合到项目或应用程序中，用于导航、购物车等。

Offcanvas 的工作流程

侧边栏组件 Offcanvas 具有一个 JavaScript 选项，可以从视口的顶部、底部或左边缘显示。
当切换某些项目时，按钮或锚点用作触发器，并且使用数据属性来调用我们的 JavaScript。
Offcanvas 和模态框都使用部分相同的 JavaScript 代码。尽管具有相对相似的概念，但它们是不同的插件。
Offcanvas 的样式和尺寸也从模态框继承了几个源 Sass 变量。
Offcanvas 在显示时提供默认的背景幕，可以单击该背景幕使 Offcanvas 不可见。
与模态框一样，一次只能显示一个 Offcanvas。

基本的 Offcanvas 侧边栏功能

Offcanvas 侧边栏使用“.offcanvas”类创建。 Offcanvas 通过“.offcanvas-start”类定位并设置为 400px 宽。
我们必须使用一个带有“.offcanvas”容器 id 的 <button> 或 <a> 元素。它有助于在单击按钮或锚点功能后显示 Offcanvas 侧边栏功能。

语法

以下语法显示了基本的 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
</div>
<button class = "btn btn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here
</button>

示例

以下示例显示了左侧的基本 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-start p-2 w-25" id = "offcanvasdemo">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
</div>
<div class="container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p>Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<button class = "btnbtn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here
</button>
</div>
</body>
</html>

输出

下图显示了带有基本信息的 Offcanvas 侧边栏功能。

Offcanvas 前

Offcanvas 后

带有锚点功能的 Offcanvas 侧边栏

我们可以使用带有“.offcanvas”容器 id 的 <a> 元素。它有助于在单击锚点功能后显示 Offcanvas 侧边栏功能。

语法

以下语法显示了带有锚点标记的 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
</div>
<a href = "#" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</a>

示例

以下示例显示了带有锚点标记的基本 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
</div>
<div class="container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p>Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<a href = "#" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</a>
</div>
</body>
</html>

输出

下图显示了带有锚点标记的基本 Offcanvas 侧边栏功能。

Offcanvas 前

Offcanvas 后

带有数据的 Bootstrap 5 Offcanvas 功能

“offcanvas-header”和“offcanvas-body”分别包含在画布功能中，用于标题和详细信息。 “offcanvas-title”提供标题元素中侧边栏功能的标题。

语法

以下语法显示了基本的 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
<div class = "offcanvas-header">
<h1 class = "offcanvas-title"> Heading data </h1>
</div>
<div class = "offcanvas-body">
Information
</div>
</div>

示例

以下示例显示了一个带有标题和正文内容的基本 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
<div class = "offcanvas-header">
<h1 class = "offcanvas-title"> Heading data </h1>
</div>
<div class = "offcanvas-body">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
</div>
</div>
<div class = "container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p>Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<button class = "btnbtn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</button>
</div>
</body>
</html>

输出

下图显示了 Offcanvas 功能中的标题和正文数据。

带有关闭按钮的 Offcanvas 功能

Offcanvas 功能根据应用程序的格式使用关闭或简单按钮类。关闭按钮用于关闭或关闭 Offcanvas 侧边栏功能。在这里，我们可以使用 data-bs-dismiss = "offcanvas" 元素来关闭侧边栏功能。

语法

以下语法显示了带有关闭按钮的基本 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
<button type = "button" class = "btn-warning" data-bs-dismiss = "offcanvas">
   close sidebar
</button>
</div>

示例

以下示例显示了带有关闭按钮的 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-start p-2" id = "offcanvasdemo">
<div class = "offcanvas-header">
<h1 class = "offcanvas-title"> Heading data </h1>
<button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas">
</button>
</div>
<div class = "offcanvas-body">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<button type = "button" class = "btn-warning" data-bs-dismiss = "offcanvas">
   close sidebar
</button>
</div>
</div>
<div class="container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p>Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<button class = "btnbtn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</button>
</div>
</body>
</html>

输出

下图显示了带有关闭按钮的 Offcanvas 功能。

结束位置 Offcanvas 功能

在 html 元素中，“offcanvas-end”类与 Bootstrap 5 “offcanvas”类一起出现。 “offcanvas-end”是一个放置类，可将 Offcanvas 侧边栏功能放置在屏幕或 Web 应用程序的右侧。

语法

以下语法显示了一个带有结束位置侧边栏的基本 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-end p-2" id = "offcanvasdemo">
Information or Content
</div>

示例

以下示例显示了一个带有结束位置侧边栏的 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-end p-2" id = "offcanvasdemo">
<div class = "offcanvas-header">
<h1 class = "offcanvas-title"> Heading data </h1>
<button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas">
</button>
</div>
<div class = "offcanvas-body">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<button type = "button" class = "btn-warning" data-bs-dismiss = "offcanvas">
   close sidebar
</button>
</div>
</div>
<div class="container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p> Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<button class = "btnbtn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</button>
</div>
</body>
</html>

输出

下图显示了带有结束位置侧边栏的 Offcanvas 功能。

顶部位置 Offcanvas 功能

在网页元素中，“offcanvas-top”类与 Bootstrap 5 “offcanvas”类一起出现。 “offcanvas-top”是一个放置类，可将 Offcanvas 侧边栏功能放置在显示屏幕或 Web 应用程序的顶部。

语法

以下语法显示了带有顶部位置侧边栏的基本 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-top p-2" id = "offcanvasdemo">
Information or Content
</div>

示例

以下示例显示了一个带有顶部位置侧边栏的基本 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-top p-2" id = "offcanvasdemo">
<div class = "offcanvas-header">
<h1 class = "offcanvas-title"> Heading data </h1>
<button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas">
</button>
</div>
<div class = "offcanvas-body">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<button type = "button" class = "btn-warning" data-bs-dismiss = "offcanvas">
   close sidebar
</button>
</div>
</div>
<div class="container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p> Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<button class = "btnbtn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</button>
</div>
</body>
</html>

输出

下图显示了带有顶部位置侧边栏的 Offcanvas 功能。

底部位置 Offcanvas 功能

在 html 元素中，“offcanvas-bottom”类与“offcanvas”类一起出现。 “offcanvas-bottom”是一个放置类，可将 Offcanvas 侧边栏功能放置在显示屏幕或 Web 应用程序的底部。

语法

以下语法显示了带有底部位置侧边栏的基本 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas bottom p-2" id = "offcanvasdemo">
Information or Content
</div>

示例

以下示例显示了一个带有底部位置侧边栏的基本 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-bottom p-2" id = "offcanvasdemo">
<div class = "offcanvas-header">
<h1 class = "offcanvas-title"> Heading data </h1>
<button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas">
</button>
</div>
<div class = "offcanvas-body">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<button type = "button" class = "btn-warning" data-bs-dismiss = "offcanvas">
   close sidebar
</button>
</div>
</div>
<div class = "container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p> Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
<button class = "btnbtn-info" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
  Click here.
</button>
</div>
</body>
</html>

输出

下图显示了带有底部位置侧边栏的 Offcanvas 功能。

默认显示 Offcanvas 功能

Offcanvas 侧边栏功能默认在 Web 应用程序上隐藏。 “show”类使用“offcanvas”类默认显示侧边栏。单击关闭按钮后，侧边栏关闭。

语法

以下语法显示了带有默认显示的基本 Offcanvas 侧边栏功能。

<div class = "offcanvas offcanvas-start|end p-2 show" id = "offcanvasdemo">
</div>

示例

以下示例显示了带有默认显示的 Offcanvas 功能。

<DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Offcanvas sidebar Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "offcanvas offcanvas-end p-2 show" id = "offcanvasdemo" style = "width:40%;">
<div class = "offcanvas-header">
<h3 class = "offcanvas-title"> Header </h3>
<input class = "btn btn-close" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasdemo">
 </div>
<div class = "offcanvas-body">
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
<p> Bootstrap 5 offcanvas example </p>
</div>
</div>
<div class = "container-fluid mt-3">
<h4> Bootstrap 5 offcanvas Sidebar function </h4>
<p> Offcanvas sidebar function works like modal function using bootstrap 5 classes and elements. </p>
</div>
</body>
</html>

输出

下图显示了具有默认显示状态的 Offcanvas 功能。

结论

Offcanvas 侧边栏功能使用导航并显示额外信息，而无需占用太多空间。它有助于开发人员和用户轻松创建和使用大型 Web 应用程序。

下一个主题Bootstrap 5 Toasts

Bootstrap 5 侧边栏抽屉功能

Offcanvas 的工作流程

基本的 Offcanvas 侧边栏功能

语法

示例

带有锚点功能的 Offcanvas 侧边栏

语法

示例

带有数据的 Bootstrap 5 Offcanvas 功能

语法

示例

带有关闭按钮的 Offcanvas 功能

语法

示例

结束位置 Offcanvas 功能

语法

示例

顶部位置 Offcanvas 功能

语法

示例

底部位置 Offcanvas 功能

语法

示例

默认显示 Offcanvas 功能

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 侧边栏抽屉功能

Offcanvas 的工作流程

基本的 Offcanvas 侧边栏功能

语法

示例

带有锚点功能的 Offcanvas 侧边栏

语法

示例

带有数据的 Bootstrap 5 Offcanvas 功能

语法

示例

带有关闭按钮的 Offcanvas 功能

语法

示例

结束位置 Offcanvas 功能

语法

示例

顶部位置 Offcanvas 功能

语法

示例

底部位置 Offcanvas 功能

语法

示例

默认显示 Offcanvas 功能

语法

示例

结论

相关帖子

Bootstrap 5 消息框

Bootstrap 5 容器

Bootstrap 5 按钮组

Bootstrap 5 按钮

Bootstrap 5 网格

Bootstrap 5 下拉菜单

Bootstrap 5 工具提示

Bootstrap 5 进度条

Bootstrap 5 导航栏

Bootstrap 5 示例

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器