This is the 28th day of my participation in Gwen Challenge

“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.

28.1 Example of Toasts

Toasts are lightweight notifications designed to mimic the push notifications already prevalent in mobile and desktop operating systems. They are built with Flexbox, so they are easy to align and locate.

Just like the pop-up prompt, the toast message also needs to be initialized by itself. For some reason, the initialization method on the official website does not work. I found a feasible method on the foreign website.

<! 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=" toasts-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 =" toasts-body "> You have a short message! </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>Copy the code

28.2 Setting Options

Options can be passed through data properties or JavaScript. For data attributes, append the option name to data-bs-, such as data-bs-animation=””.

  • Data-bs-animation =”true” applies CSS Fade to toast
  • Data-bs-autohide =”true” Automatically hides toast
  • Data-bs-delay =”5000″, delay hiding toast 5s (default unit: ms)

The above value is the default, if you are happy with the effect, there is no need to write that. In 27.3.1 example, I set data-bs-autohide=”false” to not automatically hide toast, so that it is easy to take snapshots, otherwise the message box will disappear as soon as the mouse is in any place.

28.3 Translucent

Toast can also be translucent, so it can be mixed on anything they can be. Browsers that support the CSS attribute Backdrop bath-filter also try to blur the elements below the toast.

<! 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 > toast message < / 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=" pick-up "aria-atomic="true"> <div class=" toastle-header "> <strong class="me-auto">  <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=" toasts-body "> You have a short message! </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>Copy the code

28.4 the stacked

You can stack the toast by packing them in toasts-Containers, which will add some vertical spacing.

<! 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 > toast message < / title > < / head > < body > < div class =" container "> <br><br><br><br> <br><br><br><br> <br><br>< button type="button" class=" BTN btn-primary" id="liveToastBtn1"> Class =" BTN bTN-primary "id="liveToastBtn2"> </button> <div class="toast-container"> <div class="toast" id="toast1" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong </strong> <small class=" text-heavy "> just sent </small> <button type="button" class=" BTN-close" Data-bs-dismiss ="toast" aria-label="Close"></button> </div> <div class=" toasts-body "> First message </div> </div> <div class="toast" id="toast2" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong </strong> <small class=" text-heavy ">2 min </small> <button type="button" class=" BTN-close" </div> </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>Copy the code

28.5 User-defined Content

Customize toast by removing child components, adjusting generic classes, or adding tags.

<! 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 > toast message < / 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=" pick-up "aria-atomic="true"> <div class=" toastle-body "> invite you to warp into The Three Kingdoms! <div class="mt-2 pt-2 border-top"> <button type="button" class=" BTN btn-primary btn-sm" </button> </div> </div> </div> </div> </div> </div> </div> </div> </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>Copy the code

28.6 Color scheme

Based on the examples above, you can also create different color schemes for toast through our Color Universal category. Below we add BG-Danger and text-White to toast, and text-White to the Close button. To make the edges clear, remove the default border across border-0.

<! 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 > toast message < / title > < / head > < body > < div class =" container "> <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=" toasts-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>Copy the code

28.7 Setting the Display Position

The default toast message is displayed in the lower right corner of the browser, using custom CSS to specify the toast location as required. The upper right corner is usually used for notifications, as is the middle of the top. If you are presenting only one toast at a time, place the positioning style on 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>
Copy the code

Bootstrap5 Toasts is the official example above and I didn’t find the js code for the driver. But for your reference, if you are interested, you can go and study it. Here I have modified the code shown in the upper left corner.

<! 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 > toast message < / 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=" toasts-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 =" toasts-body "> You have a short message! </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>Copy the code

Today’s course is here, please pay attention to me, timely learn my original “Bootstrap5 zero foundation to master” section 29 Bootstrap5 read icon Spinners component usage.

If this article is helpful, please feel free to like it!