This is the 17th day of my participation in Gwen Challenge
“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day. Starting with this section, I have placed the demo web page in a sibling folder in the root directory to avoid too many files to find easily. So the reference path has changed. You can do what I did to create an “11-20” folder for the 11-20 section of the presentation.
17.1 Warning Dialog Box (Alerts)
You can see that the word Alerts is not to be confused with the js Alert window. Bootstrap5 alert box, officially defined as providing contextual feedback messages for typical user actions, with a small number of available and flexible alert messages. The official definition is a little confusing, but generally the warning box is better called message alert, usually in the lower right or upper right corner of the window to say “you have several unread messages” or something like that.
<! 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 > warning window component < / title > < / head > < body > < div class =" container "> <br><br>< div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong> Lau! </strong> You receive an SMS message, <a href="#" class="link-danger"> </a> <button type="button" class=" bTN-close "data-bs-dismiss="alert" aria-label="Close"></button> </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
17.2 Composition of a Warning Box
The warning box is relatively simple and consists of a container and a close button. The close button can be omitted and closed periodically by JS, for example, after 30 seconds of display. Here is a simple message box example.
<! 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 > warning window component < / title > < / head > < body > < div class =" alert alert - the primary "> Liu! You got an in-station text message. </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
17.3 Warning Box Color
In the example above, in addition to marking the container as an alert box, there is an alert-primary class that sets the background color of the alert box. All of the commonly used colors for warning boxes are listed below.
<! 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 > warning window component < / title > < / head > < body > < div class =" container "> <br><br><br> <div class="alert alert-primary" role="alert"> alert-primary </div> <div class="alert alert-secondary" role="alert"> alert-secondary </div> <div class="alert alert-success" role="alert"> alert-success </div> <div class="alert alert-danger" role="alert"> alert-danger </div> <div class="alert alert-warning" role="alert"> alert-warning </div> <div class="alert alert-info" role="alert"> alert-info </div> <div class="alert alert-light" role="alert"> alert-light </div> <div class="alert alert-dark" role="alert"> alert-dark </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
17.3 Link Color in the Warning Box
17.4.1 Automatic Matching
Using the.alert-link utility class, you can quickly provide matching color links in any alert, but I’ll just give you a comparison of the three colors below.
<! 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 > color links < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with <a href="#">an example link</a>. Give it a click if you like. </div> <br><br> <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
17.4.2 Using color Link classes
The link-* class can be used to color links in the Bootstrap5 Chinese manual helper classification. 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 there is no warning box color below. Here are various colors:
<! 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 > color links < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div><a href="#" class="link-primary">Primary link</a></div> <div><a href="#" class="link-secondary">Secondary link</a></div> <div><a href="#" class="link-success">Success link</a></div> <div><a href="#" class="link-danger">Danger link</a></div> <div><a href="#" class="link-warning">Warning link</a></div> <div><a href="#" class="link-info">Info link</a></div> <div><a href="#" class="bg-dark link-light">Light link</a></div> <div><a href="#" class="link-dark">Dark link</a></div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
For the penultimate one, I set the background to black, otherwise it’s hard to distinguish.
17.4 Additional Content
Alerts can also contain other HTML elements, such as headings, paragraphs, and separators.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>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.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Copy the code
While it looks good, it is not recommended to use it as a component for layout layout. Grids and the more powerful cards described below are better suited for layout layout.
17.5 shut down
We started with the close button in the first example. Now let’s talk about how it works. If you don’t want to delve into the invalidity of this section, just copy the example.
Using the Alert JavaScript plug-in, you can turn off any inline alerts (that is, warning boxes). The method is as follows:
- Make sure bootstrap.bundle.min.js is loaded.
- Add a turn off button and an alert-distransmissible class, which adds extra padding to the right side of alerts and locates the turn off button.
- On the close button, add the data-Bs-Dismiss =”alert” attribute, which triggers JavaScript functionality. Be sure to use the Button element to do the right thing on all devices.
- To set the alert animation when de-alert, be sure to add the.fade and.show classes.
When the alarm is cleared, the element is completely removed from the page structure. If the keyboard user uses the “close” button to deactivate, their focus will suddenly be lost and reset to the beginning of the page/document, depending on the browser. Therefore, we recommend including additional JavaScript to listen for the closed.bs.alert event and programmatically set focus () to the most appropriate place 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.
Today’s course is here, please pay attention to me, timely learning an old Liu original “Bootstrap5 zero foundation to master” section 18 Bootstrap5 Badge icon Badge component usage.
If this article is helpful, please feel free to like it!