Bootstarp Learning (16) Warning box, bootstarp warning

Bootstarp Learning (16) Warning box, bootstarp warning
Alert box

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. As shown in:

The Bootstrap framework has an independent component to achieve the above effect. This component is called a warning box.

Source code version:

LESS version: the source code file alerts. less

Sass version: corresponding source code file _ alerts. scss

Compiled version: 4,427th lines to the bootstrap.css File ~ 4,499th rows

<H2> default alert box 

Alert box-default Alert box
The Bootstrap framework uses the "alert" style to implement the alert box effect. By default, four different warning boxes are provided:
1. Success Alert box: Tells the user 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: Provide the user with prompt information. append the "alert-info" style to the "alert" style. The background, border, and text are highlighted in light blue;
3. Warning box: Prompt the user to perform operations with caution (provide warning information). append the "alert-warning" style to the "alert" style. The background, border, and text are all pale yellow;
4. error warning box: A user operation error is prompted. The "alert-danger" style is appended to the "alert" style. The background, border, and text are highlighted in light red.
As shown in:

Usage:
You can place a prompt in the div container named "alert. To implement different types of alert boxes, you only need to append the corresponding class name based on "alert", as shown below:
<Div class = "alert-success" role = "alert"> congratulations! </Div> <div class = "alert-info" role = "alert"> enter the correct password </div> <div class = "alert-warning" role = "alert"> you have failed the operation twice, last chance </div> <div class = "alert-danger" role = "alert"> sorry, the password you entered is incorrect </div>
The running effect is as follows:

Implementation principle:
The source code of the "alert" style mainly sets the background color, border, rounded corner and text color of the alarm box. In addition, some elements like h4, p, ul, And. alert-link are specially processed in the style:
/* The bootstrap.css file contains 4,427th rows ~ 4,446th rows */. 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 ;}
Different types of alert boxes are implemented through the "alert-success", "alert-info", "alert-warning", and "alert-danger" styles:
/* The bootstrap.css file contains 4,456th rows ~ 4,499th rows */. alert-success {color: # 3c763d; background-color: # dff0d8; border-color: # d6e9c6 ;}. alert-success hr {border-top-color: # c9e2b3 ;}. alert-success. alert-link {color: # 2b542c ;}. alert-info {color: # 31708f; background-color: # d9edf7; border-color: # bce8f1 ;}. alert-info hr {border-top-color: # a6e1ec ;}. alert-info. alert-link {color: #245269 ;}. alert-warning {color: # 8a6d3b; background-color: # fcf8e3; border-color: # faebcc ;}. alert-warning hr {border-top-color: # f7e1b5 ;}. alert-warning. alert-link {color: # 66512c ;}. alert-danger {color: # a94442; background-color: # f2dede; border-color: # ebccd1 ;}. alert-danger hr {border-top-color: # e4b9c0 ;}. alert-danger. alert-link {color: #843534 ;}
<Div class = "alert-success" role = "alert"> congratulations! </Div> <div class = "alert-info" role = "alert"> enter the correct password </div> <div class = "alert-warning" role = "alert"> you have failed the operation twice, last chance </div> <div class = "alert-danger" role = "alert"> sorry, incorrect password </div> <br/>

Alert box-warning box that can be closed
When you browse the webpage, you will find some warning boxes with the close button, you can click the close button to automatically close the displayed alarm box (that is, hide or not show the alarm box ). The warning box in the Bootstrap framework also has this function.
Usage:
You only need to add a close button in the default Alert box. Perform the following three steps:
1. Add"Alert-dismissable"Style.
2. Add the button labelClass = "close"Class.
3. Make sure that custom attributes are set on the close button element:"Data-dismiss = "alert""(Because the Alert box can be closed, you need Javascript to detect this attribute to control the closure of the Alert box ).
The specific usage is as follows:
<Div class = "alert-successAlert-dismissable"Role =" alert "> <buttonClass = "close"Type = "button"Data-dismiss = "alert"> & Times; </button> congratulations! </Div>
The running effect is as follows:

Principle Analysis:
In terms of style, you need to add"Alert-dismissable"Style, so that the warning box with the disabled function can be implemented.
/* The bootstrap.css file contains 4,447th rows ~ 4,455th rows */. alert-dismissable {padding-right: 35px ;}. alert-dismissable. close {position: relative; top:-2px; right:-21px; color: inherit ;}
<Div class = "alert-success alert-dismissable" role = "alert"> <button class = "close" type = "button" data-dismiss = "alert"> × </button> congratulations! </Div> <div class = "alert-info alert-dismissable" role = "alert"> <button class = "close" type = "button" data-dismiss =" alert "> × </button> enter the correct password </div> <div class =" alert-warning alert-dismissable "role =" alert "> <button class = "close" type = "button" data-dismiss = "alert"> × </button> you have failed the operation twice, last chance </div> <div class = "alert-danger alert-dismissable" role = "alert"> <button class = "close" type = "button" Data-dismiss = "alert"> × </button> sorry, the password you entered is incorrect. </div> <! -- Below is the code section --> 

Alert box-link to the Alert box
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, you want to make it clear 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 alarm boxes are roughened and the colors are deepened accordingly.
Implementation Method:
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.
The specific usage is as follows:
<div class="alert alert-success" role="alert">    <strong>Well done!</strong>     You successfully read     <a href="#" class="alert-link">this important alert message</a>    .</div><div class="alert alert-info" role="alert">    <strong>Heads up!</strong>     This      <a href="#" class="alert-link">alert needs your attention</a>     , but it's not super important.</div><div class="alert alert-warning" role="alert">    <strong>Warning!</strong>     Better check yourself, you're      <a href="#" class="alert-link">not looking too good</a>     .</div><div class="alert alert-danger" role="alert">    <strong>Oh snap!</strong>    <a href="#" class="alert-link">Change a few things up</a>     and try submitting again.</div>
The running effect is as follows:

Implementation principle:
The implementation style is as follows:
/* The bootstrap.css file contains 4,437th rows ~ 4,439th rows */. alert. alert-link {font-weight: bold;}/* text color linked to different warning boxes */. 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"> <strong> Well done! </Strong> You successfully read <a href = "#" class = "alert-link"> this important alert message </a>. </div> <div class = "alert-info" role = "alert"> <strong> Heads up! </Strong> This <a href = "#" class = "alert-link"> alert needs your attention </a>, but it's not super important. </div> <! -- The following code task section -->