Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to use Toasts components in Bootstrap. It is very detailed and has a certain reference value. Friends who are interested must read it!

1 sample toast message (Toasts)

Toast (Toasts) is a lightweight notification designed to mimic the popularity of push notifications in mobile and desktop operating systems. They are built in flexbox, so they are easy to align and locate.

Like pop-up tips, toast messages need to be initialized by themselves. I don't know why the initialization method of the official website is invalid. I found a feasible method on foreign websites.

Popovers

Display toast message toast message hint 11 mins ago you have a short message! Document.querySelector ("# liveToastBtn") .onclick = function () {new bootstrap.Toast (document.querySelector ('.toast')) .show ();}

2 set 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 conversion effect in toast

Data-bs-autohide= "true" automatically hides the toast

Data-bs-delay= "5000", delay hiding toast for 5s (default unit millisecond)

Take the above value as the default value, if you are satisfied with the grinding effect, you don't need to write that at all. In the 27.3.1 example, I set the data-bs-autohide= "false" setting not to hide the toast automatically, so it is convenient to take screenshots, otherwise the message box disappears as long as the mouse is anywhere.

3 translucent

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

Toast message

Display toast message translucent toast 11 mins ago you have a short message! Document.querySelector ("# liveToastBtn") .onclick = function () {new bootstrap.Toast (document.querySelector ('.toast')) .show ();}

4 stacking

You can fold the toast by wrapping it in a toast-container container, which will add some spacing vertically.

Toast message

Show toast message 1 show toast message 2 toast message just sent the first message toast message 2 minutes ago The second message document.querySelector ("# liveToastBtn1"). Onclick = function () {new bootstrap.Toast (document.querySelector ('# toast1')) .show () } document.querySelector ("# liveToastBtn2"). Onclick = function () {new bootstrap.Toast (document.querySelector ('# toast2')) .show ();}

5 Custom content

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

Toast message

The toast message invites you to travel to the three Kingdoms! Accept the invitation to close document.querySelector ("# liveToastBtn"). Onclick = function () {new bootstrap.Toast (document.querySelector ('.toast')) .show ();}

6 color scheme

Based on the above example, you can also create different toast color schemes through our common color category. Let's add bg-danger and text-white to toast, and then add text-white to the close button. To make the edges clearly visible, the default borders are removed through border-0.

Toast message

Displays the toast message here is the document.querySelector ("# liveToastBtn") with a red background. Onclick = function () {new bootstrap.Toast (document.querySelector ('.toast')) .show ();}

7 set the display position

The default toast message is displayed in the lower right corner of the browser, and a custom CSS is used to specify the toast location as needed. The upper right corner is usually used for notifications, as well as in the middle of the top. If you show only one toast at a time, place the positioning style on the toast.

Toast placementSelect a position...Top leftTop centerTop rightMiddle leftMiddle centerMiddle rightBottom leftBottom centerBottom right

Bootstrap 11 mins ago Hello, world! This is a toast message.

The above is an official example, Bootstrap5 Toasts, and I can't find the js code of the driver. However, you can refer to it, if you are interested, you can study it. Here, according to the above code, I modified the one shown in the upper left corner.

Toast message

Display toast message toast message hint 11 mins ago you have a short message! Document.querySelector ("# liveToastBtn") .onclick = function () {new bootstrap.Toast (document.querySelector ('.toast')) .show ();}

These are all the contents of the article "how to use Toasts components in Bootstrap". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.