Bs Alerts
Bootstrap Alerts
Alerts
Bootstrap provides an slow agency to practise predefined warning messages: × Success! This warning box indicates a successful or positive action.
× Info! This warning box indicates a neutral informative modify or action.
× Warning! This warning box indicates a warning that powerfulness need attention.
× Danger! This warning box indicates a unsafe or potentially negative action.
Alerts are created alongside the .alert
class, followed past times 1 of the iv contextual classes .alert-success
, .alert-info
, .alert-warning
or .alert-danger
:Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative modify or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that powerfulness need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a unsafe or potentially negative action.
</div>
Alert Links
Add thealert-link
flat to whatever links within the warning box to practise "matching colored links": Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Closing Alerts
× Click on the "x" symbol to the correct to unopen me.
To unopen the warning message, add together a .alert-dismissable
flat to the warning container. Then add together class="close"
too data-dismiss="alert"
to a link or a push clitoris chemical component subdivision (when you lot click on this the warning box volition disappear).Example
<div class="alert alert-success alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
The aria-* attribute too × explanation
To assistance ameliorate accessibility for people using covert readers, you lot should include the aria-label="close" attribute, when creating a unopen button.
× (×) is an HTML entity that is the preferred picture for unopen buttons, rather than the missive of the alphabet "x".
To assistance ameliorate accessibility for people using covert readers, you lot should include the aria-label="close" attribute, when creating a unopen button.
× (×) is an HTML entity that is the preferred picture for unopen buttons, rather than the missive of the alphabet "x".
Animated Alerts
× Click on the "x" symbol to the correct to unopen me. I volition "fade" out.
The .fade
too .in
classes adds a fading resultant when closing the warning message:Example
<div class="alert alert-danger fade in">
Comments
Post a Comment