Heim >Web-Frontend >Bootstrap-Tutorial >Wie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung)
Wie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung)
- 青灯夜游nach vorne
- 2021-12-08 19:19:555747Durchsuche
Wie verwende ich die Toasts-Komponente in
Bootstrap? Der folgende Artikel stellt Ihnen die Verwendung der Toast-Nachrichten-Toast-Komponente in Bootstrap5 vor. Ich hoffe, er wird Ihnen hilfreich sein!
1 Beispiel für Toasts
Toasts sind eine einfache Benachrichtigung, die die Push-Benachrichtigungen nachahmen soll, die in Mobil- und Desktop-Betriebssystemen populär geworden sind. Sie sind mit einer Flexbox ausgestattet, sodass sie leicht ausgerichtet und positioniert werden können. [Verwandte Empfehlung: „Bootstrap-Tutorial“]
Wie die Popup-Eingabeaufforderung muss auch die Toastnachricht selbst initialisiert werden. Ich weiß nicht, warum die Initialisierungsmethode auf der offiziellen Website ungültig ist praktikable Methode auf einer ausländischen Website.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息提示</strong>
<small>11 mins ago</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
你有一条短消息！
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html> "163896212712802Wie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung)")
2 Einstellungsoptionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs- an, z. B.: data-bs-animation="".
- data-bs-animation="true" wendet CSS-Fade-Übergangseffekt auf Toast an
- data-bs-autohide="true" blendet Toast automatisch aus
- data-bs-delay="5000" , verzögertes Ausblenden von Toast 5s ( Standardeinheit (Millisekunden)
Die oben genannten Werte sind die Standardwerte. Wenn Sie mit dem Schleifeffekt zufrieden sind, müssen Sie das überhaupt nicht schreiben. Im Beispiel 27.3.1 habe ich data-bs-autohide festgelegt ="false" Es ist eingestellt, dass der Toast nicht automatisch ausgeblendet wird, damit Sie bequem Screenshots machen können. Andernfalls verschwindet das Meldungsfeld, solange Sie mit der Maus auf eine beliebige Stelle klicken.
3 Durchscheinend
Toasts können auch durchscheinend sein und daher mit allem harmonieren, auf dem sie erscheinen. Browser, die das CSS-Attribut „background-filter“ unterstützen, versuchen außerdem, die Elemente unter dem Toast unkenntlich zu machen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>半透明吐司</strong>
<small>11 mins ago</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
你有一条短消息！
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html>
4 Das Stapeln
kann erfolgen, indem man die Toasts in toast-container Behälter verpackt, wodurch etwas vertikaler Abstand entsteht.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn1">显示吐司消息1</button>
<button type="button" class="btn btn-primary" id="liveToastBtn2">显示吐司消息2</button>
<div>
<div id="toast1" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息</strong>
<small>刚刚发送</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
第一条消息
</div>
</div>
<div id="toast2" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息</strong>
<small>2分钟前</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
第二条消息
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn1").onclick = function() {
new bootstrap.Toast(document.querySelector('#toast1')).show();
}
document.querySelector("#liveToastBtn2").onclick = function() {
new bootstrap.Toast(document.querySelector('#toast2')).show();
}
</script>
</body>
</html> "163896215185633Wie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung)")
5 Passen Sie Inhalte an
Passen Sie Toast an, indem Sie untergeordnete Komponenten entfernen, allgemeine Klassen anpassen oder Markup hinzufügen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div role="alert" aria-live="assertive" aria-atomic="true">
<div>
邀请你穿越到三国！
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">接受邀请</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">关闭</button>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html>
6 Farbschemata
Basierend auf dem obigen Beispiel können Sie über unsere universellen Farbkategorien auch verschiedene Toast-Farbschemata erstellen. Als nächstes fügen wir bg-danger und text-white zum Toast hinzu und fügen dann text-white zur Schaltfläche „Schließen“ hinzu. Damit die Kanten deutlich sichtbar sind, werden die Standardränder über border-0 entfernt.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<div>
这里是红色背景的
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html> "163896216033913Wie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung)")
7 Stellen Sie die Anzeigeposition ein
Die Standard-Toastmeldung wird in der unteren rechten Ecke des Browsers angezeigt. Verwenden Sie benutzerdefiniertes CSS, um die Toastposition entsprechend Ihren Anforderungen festzulegen. Die obere rechte Ecke wird normalerweise für Benachrichtigungen verwendet, ebenso wie die obere Mitte. Wenn Sie jeweils nur einen Toast anzeigen möchten, legen Sie den Positionierungsstil auf den Toast fest.
<form> <div class="mb-3"> <label for="selectToastPlacement">Toast placement</label> <select class="form-select mt-2" id="selectToastPlacement"> <option value="" selected>Select a position...</option> <option value="top-0 start-0">Top left</option> <option value="top-0 start-50 translate-middle-x">Top center</option> <option value="top-0 end-0">Top right</option> <option value="top-50 start-0 translate-middle-y">Middle left</option> <option value="top-50 start-50 translate-middle">Middle center</option> <option value="top-50 end-0 translate-middle-y">Middle right</option> <option value="bottom-0 start-0">Bottom left</option> <option value="bottom-0 start-50 translate-middle-x">Bottom center</option> <option value="bottom-0 end-0">Bottom right</option> </select> </div> </form> <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts"> <div class="toast-container position-absolute p-3" id="toastPlacement"> <div class="toast"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div>
Das Obige ist das offizielle Beispiel, Bootstrap5 ToastsIch habe den JS-Code, der es steuert, nicht gefunden. Aber es kann jedem als Referenz dienen. Wenn Sie interessiert sind, können Sie es hier so ändern, dass es in der oberen linken Ecke angezeigt wird.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
<div class="position-fixed top-0 start-0 p-3" style="z-index: 5">
<div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
<div>
<strong>吐司消息提示</strong>
<small>11 mins ago</small>
<button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div>
你有一条短消息！
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
document.querySelector("#liveToastBtn").onclick = function() {
new bootstrap.Toast(document.querySelector('.toast')).show();
}
</script>
</body>
</html> "163896216588337Wie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung)")
Weitere Informationen zu Bootstrap finden Sie unter: Bootstrap-Basis-Tutorial! !
Das obige ist der detaillierte Inhalt vonWie verwende ich die Toasts-Komponente in Bootstrap? (Beispielerklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie füge ich eine Navigationssymbolleiste in Bootstrap hinzu? Eine kurze Analyse zur Verwendung der Navbar-Komponente
- Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden
- Ausführliche Erklärung zur Verwendung der Akkordeon-Komponente in Bootstrap (Beispiel)
- Eine kurze Analyse der Verwendung der Badge-Symbolkomponente in Bootstrap
- Eine ausführliche Erklärung zur Verwendung der Card-Komponente in Bootstrap