Bootstrap warning box

Bootstrap warning box
Previous

In websites, web pages always need to communicate with users. In particular, when a user's operation context provides users with valid warning boxes, such as notifying users of operation success, Operation errors, prompts, or warnings. The Bootstrap framework has an independent component that achieves similar results. This component is called a warning box. This article will detail the Bootstrap warning box

 

Default usage

The warning box component provides some flexible predefined messages to provide feedback messages for common user actions.

Combine any text with an optional close button to form a warning box,.alertClass must be set. In addition, four classes (for example,.alert-success), Indicating different warning information

.alert {  padding: 15px;  margin-bottom: 20px;  border: 1px solid transparent;  border-radius: 4px;}.alert h4 {  margin-top: 0;  color: inherit;}.alert .alert-link {  font-weight: bold;}.alert > p,.alert > ul {  margin-bottom: 0;}.alert > p + p {  margin-top: 5px;}

The warning box has no default class, only the base class and modifier class. The default gray warning box does not make much sense. Therefore, you can use a meaningful warning class. Currently, success, message, warning, and danger are provided.

1. success warning box: indicates that the operation is successful. append the "alert-success" style to the "alert" style. The background, border, and text are displayed in green;

2. Information warning box: provides the user with prompt information. append the "alert-info" style to the "alert" style. The background, border, and text are all light blue;

3. warning box: prompt the user to perform operations with caution (provide warning information), and append the "alert-warning" style based on the "alert" style, the background, border, and text are pale yellow;

4. error warning box: indicates an operation error. append the "alert-danger" style to the "alert" style. The background, border, and text are highlighted in light red.

<Div class = "alert" role = "alert"> base class </div> <div class = "alert-success" role = "alert"> success </div> <div class = "alert-info" role = "alert"> message prompt </div> <div class = "alert-warning" role = "alert"> warning </div> <div class = "alert-danger" role = "alert"> error </div>

 

Can be disabled

When you browse the webpage, you will find some warning boxes with the close button. When you click the close button, the displayed warning box will be automatically closed (that is, the warning box will not be hidden ). The warning box in the Bootstrap framework also has this function.

You only need to add a close button in the default Alert box. Perform the following three steps:

1. Add the "alert-dismissable" style on the basis of the basic warning box "alert.

2. Add the class = "close" class to the button label to implement the style of the close button in the Alert box.

3. Make sure that the custom attribute data-dismiss = "alert" is set on the close button element. Because the alert box can be closed, Javascript is used to detect this attribute, to control the closing of the Alert box)

.alert-dismissable {  padding-right: 35px;}.alert-dismissable .close {  position: relative;  top: -2px;  right: -21px;  color: inherit;}

 

Link

Sometimes you may want to add a link address in the alarm box to tell the user to jump to a certain place or a new page. At this time, we want users to clearly see that this is the link address. The link style in the Alert box is highlighted in the Bootstrap framework. The links in different types of alert boxes are roughened and the colors are deepened accordingly.

The Bootstrap framework adds a class name named "alert-link" to the link added to the alert box, and uses the "alert-link" style to highlight the link.

.alert .alert-link {  font-weight: bold;}.alert-success .alert-link {  color: #2b542c;}.alert-info .alert-link {  color: #245269;}.alert-warning .alert-link {  color: #66512c;}.alert-danger .alert-link {  color: #843534;}

<Div class = "alert-success" role = "alert"> <a href = "#" class = "alert-link"> View Details </a> </ div> <div class = "alert-info" role = "alert"> message <a href = "#" class = "alert-link"> View Details </> </div> <div class = "alert-warning" role = "alert"> warning <a href = "#" class = "alert-link"> View Details </a> </div> <div class = "alert-danger" role = "alert"> error <a href = "#" class = "alert-link"> details view </a> </div>