Detailed introduction to Bootstrap warning box

Alert box (Alert)Messages are mostly used to display information such as warning or confirmation messages to end users. Using the Alert plugin, you can add dismissal functionality to all alert messages.

Usage

You can enable the dismissal function of the warning box in the following two ways:

Through the data attribute: Add the dismissal function through the Data API (Data API) To cancel the function, just add data-dismiss="alert" to the close button, and the close function will be automatically added to the warning box.

Default usage

The alert box component provides feedback messages for common user actions by providing some flexible predefined messages

Combines arbitrary text and an optional close button They can be combined together to form an alert box. The .alert class must be set. In addition, 4 classes with special meanings are provided (for example, .alert-success) , representing different warning messages

.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 base class and modified class. The default gray warning box doesn't mean much. So you use a warning class that makes sense. Currently, success, message, warning and danger

are provided. 1. Success warning box: inform the user that the operation is successful, and add the "alert-success" style based on the "alert" style, which specifically presents the background, border and The text is all green;

2. Information warning box: Provides prompt information to the user, and adds the "alert-info" style to the "alert" style. Specifically, the background, border and text are all light. Blue;

3. Warning box: prompts the user to operate carefully (providing warning information), and adds the "alert-warning" style based on the "alert" style, specifically presenting the background, border, and text. It is light yellow;

4. Error warning box: Prompts the user for operation errors. Based on the "alert" style, the "alert-danger" style is added. Specifically, the background, border and text are all light red

<div class="alert" role="alert">基类</div><div class="alert alert-success" role="alert">成功</div><div class="alert alert-info" role="alert">信息提示</div><div class="alert alert-warning" role="alert">警告</div><div class="alert alert-danger" role="alert">错误</div>

Can be closed

When you usually browse the web, you will find that some warning boxes have a close button. The user can automatically close the displayed warning box as soon as he clicks the close button. (That is, the warning box is hidden and not displayed). The alert box in the Bootstrap framework also has such a function

You only need to add a close button to the default alert box. Then proceed to three steps:

1. You need to add the "alert-dismissable" style on the basis of the basic warning box "alert".

　2. Add the class="close" class to the button tag to implement the style of the warning box close button.

　3. Make sure that the custom attribute is set on the close button element: data-dismiss="alert" (because the closeable alert box requires Javascript 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 alert box to tell the user to jump to a certain place or new page. At this time, we want users to be able to clearly see that this is the link address. In the Bootstrap framework, the link style in the alert box is highlighted. The links in different types of alert boxes are bolded, and the colors are deepened accordingly

The Bootstrap framework adds a class name called "alert-link" to the links in the alert box, through " alert-link" style provides highlighting for links

.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 alert-success" role="alert">成功 <a href="#" class="alert-link">详情查看</a></div><div class="alert alert-info" role="alert">信息提示 <a href="#" class="alert-link">详情查看</a></div><div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">详情查看</a></div><div class="alert alert-danger" role="alert">错误 <a href="#" class="alert-link">详情查看</a></div>

The above is the detailed content of Detailed introduction to Bootstrap warning box. For more information, please follow other related articles on the PHP Chinese website!