twitter-bootstrap
Varna
Sök…
Anmärkningar
Varningstyper
Till skillnad från vissa andra Bootstrap komponenter som knappar , de varningar inte komma med en default
eller primary
styling, eftersom de är avsedda att varna användaren på ett visst sätt.
<div class="alert alert-success" role="alert">
Some action was completed successfully
</div>
<div class="alert alert-info" role="alert">
Here is some information. Just FYI.
</div>
<div class="alert alert-warning" role="alert">
Careful! You're about to do something dangerous.
</div>
<div class="alert alert-danger" role="alert">
An error (or something dangerous) happened!
</div>
Varna grundläggande exempel
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong>
</div>
<div class="alert alert-info">
<strong>Info!</strong>
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> All foelds are required
</div>
<div class="alert alert-danger">
The username is required and can't be empty
</div>
</div>
Animerade varningar
.fade
och .in
lägger till en blekningseffekt när varningsmeddelandet stängs.
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This is a good example!
</div>
Avvisbara varningar
För att ge en varningsstängningsfunktion är allt vi behöver att lägga till data-dismiss="alert"
till vår stängningsknapp.
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Sphinx of black quartz, judge my vow
</div>
.alert-dismissible
och .close
är valfria, endast användbara för styling.
Länkfärg i varningar
För att snabbt skapa en matchande färg för länkar i alla varningar kan vi använda .alert-link
.
<div class="alert alert-success">
You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ...
</div>
<div class="alert alert-info">
You might want to check <a href="#" class="alert-link">this</a> instead.
</div>
<div class="alert alert-warning">
You are running out of coins. Buy more <a href="#" class="alert-link">here</a>.
</div>
<div class="alert alert-danger">
Something went wrong. You can try <a href="#" class="alert-link">again</a> or ...
</div>
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow