Bootstrap 4- waarschuwingen

❮ Vorig Volgende ❯

Bootstrap 4-waarschuwingen

Bootstrap 4 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.

Primair! Dit waarschuwingsvenster geeft een belangrijke actie aan.

Ondergeschikt! Dit waarschuwingsvenster geeft een minder belangrijke actie aan.

Donker! Donkergrijze waarschuwingsbox.

Licht! Lichtgrijze waarschuwingsbox.

Waarschuwingen worden gemaakt met de .alertklasse, gevolgd door een van de contextuele klassen .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightof .alert-dark:

Voorbeeld

<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive 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 .

Primair! U zou dit bericht moeten lezen .

Ondergeschikt! U zou dit bericht moeten lezen .

Donker! U zou dit bericht moeten lezen .

Licht! 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">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>

Tip: × (×) 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 .showvoegen een vervagend effect toe bij het sluiten van het waarschuwingsbericht:

Voorbeeld

Volledige Bootstrap 4-waarschuwingsreferentie

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

❮ Vorig Volgende ❯

Bootstrap 4 zelfstudie

Bootstrap 4-raster

Bootstrap 4 Overig

Bootstrap 4 Ref

Bootstrap 4- waarschuwingen