diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md | 22 |
1 files changed, 6 insertions, 16 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md index b7a84dc6e..a7d1cb713 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md @@ -87,17 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low We use the following JavaScript to trigger our live toast demo: -```js -const toastTrigger = document.getElementById('liveToastBtn') -const toastLiveExample = document.getElementById('liveToast') -if (toastTrigger) { - toastTrigger.addEventListener('click', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() - }) -} -``` +{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} ### Translucent @@ -108,7 +98,7 @@ Toasts are slightly translucent to blend in with what's below them. <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">11 mins ago</small> + <small class="text-body-secondary">11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -127,7 +117,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">just now</small> + <small class="text-body-secondary">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -139,7 +129,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -246,7 +236,7 @@ For systems that generate more notifications, consider using a wrapping element <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">just now</small> + <small class="text-body-secondary">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -258,7 +248,7 @@ For systems that generate more notifications, consider using a wrapping element <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> |