Offcanvas ähnelt Modalen (standardmäßig ausgeblendet und bei Aktivierung angezeigt), wird jedoch häufig als Navigationsmenü in der Seitenleiste verwendet.
Some text lorem ipsum.
Some text lorem ipsum.
Das folgende Beispiel zeigt, wie man eine Offcanvas-Seitenleiste erstellt:
<!-- 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>Probieren Sie es selbst aus →
<!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>
Die Klasse .offcanvas erstellt die Offcanvas-Seitenleiste.
Die Klasse .offcanvas-start positioniert die Offcanvas und macht sie 400 Pixel breit. Weitere Positionierungsklassen finden Sie in den Beispielen unten.
Die Klasse .offcanvas-title sorgt für korrekte Ränder und Zeilenhöhe.
Fügen Sie dann Ihren Inhalt innerhalb der Klasse .offcanvas-body hinzu.
Um die Offcanvas-Seitenleiste zu öffnen, müssen Sie ein <button>- oder ein <a>-Element verwenden, das auf zeigt die ID des .offcanvas-Containers (#demo in unserem Beispiel).
Um die Offcanvas-Seitenleiste mit einem <a>-Element zu öffnen, können Sie mit dem href-Attribut auf #demo verweisen , anstelle des Attributs data-bs-target.
Verwenden Sie .offcanvas-start|end|top|bottom, um die Offcanvas links, rechts, oben oder unten zu positionieren:
<div class="offcanvas offcanvas-end" id="demo">Some text lorem ipsum.
Some text lorem ipsum.
Probieren Sie es selbst aus →
<!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.
Probieren Sie es selbst aus →
<!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.
Probieren Sie es selbst aus →
<!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>
Mit den Klassen .offcanvas-sm|md|lg|xl|xxl können Sie auch steuern, wann Sie das Offcanvas-Menü auf verschiedenen Bildschirmbreiten ein- oder ausblenden möchten:
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">Probieren Sie es selbst aus →
<!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>
Verwenden Sie die Klasse .text-bg-dark, um eine Dunkelheit zu erstellen Offcanvas-Menü.
Tipp: Wir haben auch die Klasse .btn-close-white hinzugefügt .btn-close, um eine weiße Schaltfläche zum Schließen zu erstellen, die im Dunkeln gut aussieht Hintergrund:
<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.
Probieren Sie es selbst aus →
<!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>