28.1 吐司消息（Toasts）示例
吐司（Toasts）是一種輕量級(jí)通知，旨在模仿移動(dòng)和桌面操作系統(tǒng)已經(jīng)普及的推送通知。它們是用flexbox構(gòu)建的，所以它們很容易對(duì)齊和定位。
和彈出提示一樣，吐司消息也需要自己初始化，不知為什么官網(wǎng)的初始化方法無(wú)效，我在國(guó)外網(wǎng)站找到一個(gè)可行的方法。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<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 class="toast-header">
<strong class="me-auto">吐司消息提示</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
你有一條短消息！
</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>
復(fù)制代碼28.2 設(shè)置選項(xiàng)
選項(xiàng)可以透過(guò)數(shù)據(jù)屬性或是JavaScript傳遞。對(duì)于數(shù)據(jù)屬性，將選項(xiàng)名稱附加到data-bs-，如：data-bs-animation=""。
- data-bs-animation="true" 在吐司應(yīng)用CSS fade轉(zhuǎn)換效果
- data-bs-autohide="true" 自動(dòng)將吐司隱藏
- data-bs-delay="5000" ，延遲隱藏吐司5s（默認(rèn)單位毫秒）
以上值為默認(rèn)值，如果你對(duì)磨人的效果滿意，根本不需要寫(xiě)那個(gè)，27.3.1例子中，我設(shè)置了data-bs-autohide="false"設(shè)置不自動(dòng)將吐司隱藏，這樣好方便截圖，否則鼠標(biāo)只要在任何地方一點(diǎn)，消息框就消失了。
28.3 半透明的
吐司也可以是半透明的，因此能混合在它們可能出現(xiàn)的任何東西上。在支持CSS屬性backdrop-filter的瀏覽器，還會(huì)嘗試對(duì)吐司下方的元素進(jìn)行模糊效果。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">顯示吐司消息</button>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">半透明吐司</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
你有一條短消息！
</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>
復(fù)制代碼28.4 堆疊
可以透過(guò)將吐司包裝于toast-container容器來(lái)推疊它們，這將會(huì)在垂直方向上增加一些間距。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<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 class="toast-container">
<div class="toast" id="toast1" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">吐司消息</strong>
<small class="text-muted">剛剛發(fā)送</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
第一條消息
</div>
</div>
<div class="toast" id="toast2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">吐司消息</strong>
<small class="text-muted">2分鐘前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
第二條消息
</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>
復(fù)制代碼28.5 自定義內(nèi)容
透過(guò)移除子元件、調(diào)整通用類或是增加標(biāo)記以自定義吐司。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<br><br><br><br>
<button type="button" class="btn btn-primary" id="liveToastBtn">顯示吐司消息</button>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
邀請(qǐng)你穿越到三國(guó)！
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">接受邀請(qǐng)</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">關(guān)閉</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>
復(fù)制代碼28.6 配色方案
基于以上的示例，您也可以透過(guò)我們的顏色通用類別建立不同的吐司配色方案。以下我們將bg-danger與text-white添加到toast，再把text-white添加到關(guān)閉按鈕上。為了讓邊緣清晰顯示，透過(guò)border-0移除了預(yù)設(shè)的邊框。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<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 class="d-flex">
<div class="toast-body">
這里是紅色背景的
</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>
復(fù)制代碼28.7 設(shè)置顯示位置
默認(rèn)吐司消息顯示在瀏覽器右下角，根據(jù)需求，使用自定義的CSS指定吐司位置。右上角通常用于通知，頂部的中間也是如此。如果您一次只要展示一個(gè)吐司，請(qǐng)將定位樣式放在toast上。
<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>
復(fù)制代碼上面是官方例子，Bootstrap5 Toasts我也沒(méi)找到其中驅(qū)動(dòng)的js代碼。不過(guò)可以給大家參考一下，有興趣的可以去研究一下，在這里我根據(jù)上面的代碼，修改了個(gè)顯示在左上角的。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<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 class="toast-header">
<strong class="me-auto">吐司消息提示</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
你有一條短消息！
</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>
復(fù)制代碼今天的課程就到這里，請(qǐng)關(guān)注我，及時(shí)學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第29節(jié) Bootstrap5 讀取圖標(biāo)Spinners組件用法。
如果這篇文章對(duì)你有幫助，記得隨手點(diǎn)贊哦！