The usage of alerts in bootstrap

Warning Alerts use: Used to prompt the user for relevant information.

There are four basic display methods corresponding to: (information) Alert-info, (Success) alert-success, (Dangerous) Alert-danger, (warning) alert-warning. Example code:

<div class= "Alert Alert-info" > Text info Tips </div>

<div class= "Alert Alert-success" > Successful information Tips </div>

<div class= "alert Alert-danger" > Dangerous information Tips </div>

<div class= "alert alert-warning" > Warning Information tips </div>

As follows:

When writing alert this style, we also can see in the smart hint: alert-dismissable, alert-dismissiable, alert-link These styles have what effect, continue to look down:

<div class= "alert alert-info alert-dismissable" >

Tips For information

<button class= "Close" data-dismiss= "alert" aria-hidden= "true" >&times; </button>

</div>
<div class= "alert Alert-danger alert-dismissible" >

Dangerous tips

<button class= "Close" data-dismiss= "alert" aria-hidden= "true" >&times; </button>

</div>
<div class= "Alert Alert-success" >

<a href= "#" class= "alert-link" > Tips for Success </a>

<button class= "Close" data-dismiss= "alert" aria-hidden= "true" >&times;</button>

</div>

As follows:

Through the code and the display of the effect we can see alert-dismissable, alert-dismissiable, the combination of the button class= "close" data-dismiss= "alert" can achieve the effect of closing hints

The effect of Alert-link is to add a connection to the text of the hint, and the cursor is placed and clicked before the underline is displayed. Another aria-hidden= "True" is to facilitate screen readers such as some people with disabilities. &times; is an icon that is turned off.

The usage of alerts in bootstrap