Toast-komponenten är som en varningsruta som bara visas i ett par sekunder när något händer (dvs när användaren klickar på en knapp, skickar ett formulär, etc.).
Some text inside the toast body
För att skapa en toast, använd klassen .toast
och lägg till en .toast-header
och en .toast-body
inuti den.
Obs! Rostat bröd är dolda som standard. Använd klassen .show
om du vill visa den. För att stänga den, använd ett <button>-element och lägg till data-bs-dismiss="toast"
:
<div class="toast show">
<div class="toast-header">
Toast Header
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Prova själv →
<!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="container mt-3">
<h3>Toast Example</h3>
<p>A toast is like an alert box that is only shown for a couple of seconds when something happens (i.e. when a user clicks on a button, submits a form, etc.).</p>
<p>In this example, we use the .show class to always show the toast by default. You can close it by clicking on the close (x) icon inside the toast header.</p>
<div class="toast show">
<div class="toast-header">
<strong class="me-auto">Toast Header</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>Some text inside the toast body</p>
</div>
</div>
</div>
</body>
</html>
För att visa en toast med ett klick på en knapp måste du initialisera den med JavaScript: välj det angivna elementet och anrop toast()
-metoden.
Följande kod kommer att visa alla "toaster" i dokumentet när du klickar på en knapp:
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
Prova själv →
<!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="container mt-3">
<h3>Toast Example</h3>
<p>In this example, we use a button to show the toast message.</p>
<button type="button" class="btn btn-primary" id="toastbtn">Show Toast</button>
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast Header</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>Some text inside the toast body</p>
</div>
</div>
</div>
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
</body>
</html>