HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- waarschuwingen

❮ Vorig Volgende ❯

Waarschuwingen

Bootstrap biedt een eenvoudige manier om vooraf gedefinieerde waarschuwingsberichten te maken:

× Succes! Dit waarschuwingsvenster geeft een succesvolle of positieve actie aan.
× Informatie! Dit waarschuwingsvenster geeft een neutrale informatieve wijziging of actie aan.
× Waarschuwing! Dit waarschuwingsvenster geeft een waarschuwing aan die mogelijk aandacht behoeft.
× Gevaar! Dit waarschuwingsvenster geeft een gevaarlijke of mogelijk negatieve actie aan.

Waarschuwingen worden gemaakt met de .alertklasse, gevolgd door een van de vier contextuele klassen .alert-success, .alert-info, .alert-warningof .alert-danger:

Voorbeeld

<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 change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Waarschuwingslinks

Voeg de alert-linkklasse toe aan alle links in het waarschuwingsvenster om "bijpassende gekleurde links" te maken:

Succes! U zou dit bericht moeten lezen .
Informatie! U zou dit bericht moeten lezen .
Waarschuwing! U zou dit bericht moeten lezen .
Gevaar! U zou dit bericht moeten lezen .

Voorbeeld

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Waarschuwingen sluiten

× Klik op het "x"-symbool aan de rechterkant om mij te sluiten.

Om het waarschuwingsbericht te sluiten, voegt u een .alert-dismissible klasse toe aan de waarschuwingscontainer. Voeg vervolgens class="close"en toe data-dismiss="alert" aan een link of een knopelement (wanneer u hierop klikt, verdwijnt het waarschuwingsvenster).

Voorbeeld

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Het aria-* attribuut en × uitleg

Om de toegankelijkheid te verbeteren voor mensen die schermlezers gebruiken, moet u het kenmerk aria-label="close" opnemen bij het maken van een sluitknop.

&keer; (×) is een HTML-entiteit die het voorkeurspictogram is voor sluitknoppen, in plaats van de letter "x".
Ga voor een lijst met alle HTML-entiteiten naar onze HTML-entiteitenreferentie .

Geanimeerde waarschuwingen

× Klik op het "x"-symbool aan de rechterkant om mij te sluiten. Ik zal "verdwijnen".

De klassen .fadeen .invoegen een vervagend effect toe bij het sluiten van het waarschuwingsbericht:

Voorbeeld

<div class="alert alert-danger fade in">

Test jezelf met oefeningen

Oefening:

Voeg een Bootstrap "alert"-klasse toe om het resultaat van een succesvolle actie weer te geven.

<div class="">
  Success!
</div>

Volledige Bootstrap-waarschuwingsreferentie

Ga voor een volledige referentie van alle waarschuwingsopties, -methoden en -gebeurtenissen naar onze Bootstrap JS Alert Reference .


❮ Vorig Volgende ❯