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

This article introduces the relevant knowledge of "what is the use of warning box components in Bootstrap". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 warning box (Alerts)

You can see that the word Alerts should not be confused with the Alert warning window in js. There is no connection between the two. Bootstrap5 warning box, which is officially defined to provide contextual feedback messages for typical user actions and to provide a small number of available and flexible alert messages. The official definition is a bit confusing. Generally speaking, the warning box is called message reminder, usually in the lower right corner or upper right corner of the window to remind you how many unread messages you have.

Warning window component

Lao Liu! You receive an on-site text message, click here to check.

2 composition of warning box

The warning box is relatively simple, consisting of a container and a close button, in which the close button can be omitted and can be closed regularly through js, for example, to close after 30 seconds of display. Here is an example of the simplest message box.

Warning window component Lao Liu! You received an on-site text message.

3 warning box color

In the above example, in addition to using the alert flag in the container, which is a warning box, there is also an alert-primary class that sets the background color of the warning box. All the common colors of the warning box are listed below.

Warning window component

Alert-primary alert-secondary alert-success alert-danger alert-warning alert-info alert-light alert-dark

4 the link color 4.1 in the warning box automatically matches

Using the. alert-link utility class, you can quickly provide matching color links in any alert, and I'll give you a comparison of only three colors below.

Color link

A simple primary alert with an example link. Give it a click if you like. A simple secondary alert with an example link. Give it a click if you like. A simple success alert with an example link. Give it a click if you like.

A simple primary alert with an example link. Give it a click if you like. A simple secondary alert with an example link. Give it a click if you like. A simple success alert with an example link. Give it a click if you like.

4.2 use color link classes

In the color links in the Bootstrap5 Chinese Handbook helper category, you can use the link-* class to color links. Unlike the text-* class, these classes have: hover and: focus states. Color links are not specific to the warning box and are valid for all links, so the warning box color is not used below, here are various colors:

Color link

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

The penultimate one, I set the background to black, otherwise it's not easy to tell.

5 additional content

Alerts can also contain other HTML elements, such as headings, paragraphs, and delimiters.

Well done!

Aww yeah, you successfully read this important alert message.This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Although it looks good, it is not recommended as a component of layout and typesetting. Grids and more powerful cards described later are more suitable for typesetting.

6 off

In the first example, we have used the close button, so let's talk about how it works. If you don't want to look at this section in depth, just copy the example.

Using the alert JavaScript plug-in, you can turn off any inline alerts (that is, warning boxes). The methods are as follows:

Make sure bootstrap.bundle.min.js is loaded.

Add a close button and a .alert-dismissible class that adds additional padding to the right side of the alert and locates the close button.

On the close button, add the data-bs-dismiss= "alert" attribute, which triggers the JavaScript function. Be sure to use the button element to do the right thing on all devices.

To animate the alarm when it is dealerted, be sure to add .fade and .show classes.

When the alarm is deactivated, the element is completely removed from the page structure. If keyboard users use the close button to dealarm, their focus will suddenly be lost and reset to the beginning of the page / document, depending on the browser. Therefore, we recommend that you include additional JavaScript to listen for closed.bs.alert events and programmatically set focus () to the most appropriate location on the page. If you plan to move focus to a non-interactive element that does not normally receive focus, be sure to add tabindex= "- 1" to that element.

This is the end of the content of "what is the use of the warning box component in Bootstrap". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.