twitter-bootstrap
alarm

Opmerkingen

Typen meldingen

In tegenstelling tot sommige andere Bootstrap componenten zoals knoppen , de meldingen komen niet met een default of primary styling, omdat ze zijn bedoeld om de gebruiker op een bepaalde manier te waarschuwen.

<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>

Alert basisvoorbeeld

<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>

Geanimeerde waarschuwingen

De klassen .fade en .in voegen een vervagend effect toe bij het sluiten van het waarschuwingsbericht.

<div class="alert alert-success fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> This is a good example!
</div>

Afgekeurde waarschuwingen

Om een close data-dismiss="alert" te geven, hoeven we alleen data-dismiss="alert" toe te voegen aan onze knop Sluiten.

<div class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    Sphinx of black quartz, judge my vow
</div>

.alert-dismissible en .close klassen zijn optioneel, alleen nuttig voor het stylen.

Kleur koppelen in Waarschuwingen

Om snel een passende kleur te bieden voor links binnen elke waarschuwing, kunnen we de .alert-link hulpprogramma klasse gebruiken.

<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>