Offcanvas 与模态框类似(默认隐藏,激活时显示),不同之处在于它经常用作侧边栏导航菜单。
Some text lorem ipsum.
Some text lorem ipsum.
以下示例展示了如何创建 offcanvas 侧边栏:
<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start"
id="demo">
<div
class="offcanvas-header">
<h1
class="offcanvas-title">Heading</h1>
<button
type="button" class="btn-close text-reset"
data-bs-dismiss="offcanvas"></button>
</div>
<div
class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn
btn-secondary" type="button">A Button</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn
btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas Sidebar</h3>
<p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>
.offcanvas
类创建 offcanvas 侧边栏。
.offcanvas-start
类定位 offcanvas,并使其宽度为 400px。 有关更多定位类别,请参阅下面的示例。
.offcanvas-title
类确保适当的边距和行高。
然后,将您的内容添加到 .offcanvas-body
类中。
要打开 offcanvas 侧边栏,您必须使用 <button>
或指向的 <a>
元素.offcanvas
容器的 ID(在我们的示例中为 #demo
)。
要使用 <a>
元素打开 offcanvas 侧边栏,您可以使用 href 属性指向 #demo
,而不是 data-bs-target
属性。
使用 .offcanvas-start|end|top|bottom
将 offcanvas 定位到左侧、右侧、顶部或底部:
<div class="offcanvas offcanvas-end" id="demo">
Some text lorem ipsum.
Some text lorem ipsum.
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-end" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Right Offcanvas</h3>
<p>The .offcanvas-end class positions the offcanvas to the right of the page.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Toggle Right Offcanvas
</button>
</div>
</body>
</html>
<div class="offcanvas offcanvas-top" id="demo">
Some text lorem ipsum.
Some text lorem ipsum.
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-top" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Top Offcanvas</h3>
<p>The .offcanvas-top class positions the offcanvas at the top of the page.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Toggle Top Offcanvas
</button>
</div>
</body>
</html>
<div class="offcanvas offcanvas-bottom" id="demo">
Some text lorem ipsum.
Some text lorem ipsum.
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-bottom" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Bottom Offcanvas</h3>
<p>The .offcanvas-bottom class positions the offcanvas at the bottom of the page.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Toggle Bottom Offcanvas
</button>
</div>
</body>
</html>
您还可以使用 .offcanvas-sm|md|lg|xl|xxl
类来控制何时在不同的屏幕宽度上隐藏或显示 offcanvas 菜单:
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Responsive Offcanvas Menu</h3>
<p>You can also hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes.</p>
<p>In this example, we hide the offcanvas menu on screens larger than 991px wide. Note that we also hide the button that opens the offcanvas (d-lg-none).</p>
<p class="text-bg-danger">Resize the browser window to see the result.</p>
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>
使用 .text-bg-dark
类创建深色 画布外菜单。
提示:我们还添加了 .btn-close-white
类 .btn-close
,创建一个白色的关闭按钮,与深色搭配看起来很漂亮 背景:
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
Some text lorem ipsum.
Some text lorem ipsum.
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Dark Offcanvas Sidebar</h3>
<p>Use the .text-bg-dark class to create a dark offcanvas menu.</p>
<p><strong>Tip:</strong> We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>