Bootstrap 4- waarskuwings

❮ Vorige Volgende ❯

Bootstrap 4-waarskuwings

Bootstrap 4 bied 'n maklike manier om voorafbepaalde waarskuwingsboodskappe te skep:

Sukses! Hierdie waarskuwingskassie dui 'n suksesvolle of positiewe aksie aan.

Inligting! Hierdie waarskuwingskassie dui 'n neutrale insiggewende verandering of aksie aan.

Waarskuwing! Hierdie waarskuwingskassie dui 'n waarskuwing aan wat dalk aandag moet kry.

Gevaar! Hierdie waarskuwingskassie dui 'n gevaarlike of potensieel negatiewe aksie aan.

Primêr! Hierdie waarskuwingskassie dui 'n belangrike handeling aan.

Sekondêr! Hierdie waarskuwingskassie dui 'n minder belangrike handeling aan.

Donker! Donkergrys waarskuwingsboks.

Lig! Liggrys waarskuwingsboks.

Waarskuwings word saam met die klas geskep , .alertgevolg deur een van die kontekstuele klasse .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondaryof :.alert-light.alert-dark

Voorbeeld

<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

Waarskuwingskakels

Voeg die alert-linkklas by enige skakels binne die waarskuwingskassie om "passende gekleurde skakels" te skep:

Sukses! Jy moet hierdie boodskap lees .

Inligting! Jy moet hierdie boodskap lees .

Waarskuwing! Jy moet hierdie boodskap lees .

Gevaar! Jy moet hierdie boodskap lees .

Primêr! Jy moet hierdie boodskap lees .

Sekondêr! Jy moet hierdie boodskap lees .

Donker! Jy moet hierdie boodskap lees .

Lig! Jy moet hierdie boodskap lees .

Voorbeeld

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

Sluitingswaarskuwings

× Klik op die "x" simbool aan die regterkant om my toe te maak.

Om die waarskuwingboodskap toe te maak, voeg 'n .alert-dismissible klas by die waarskuwinghouer. Voeg dan class="close"en data-dismiss="alert" by 'n skakel of 'n knoppie-element (wanneer jy hierop klik, sal die waarskuwingskassie verdwyn).

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>

Wenk: &tye; (×) is 'n HTML-entiteit wat die voorkeur-ikoon vir toemaakknoppies is, eerder as die letter "x".

Vir 'n lys van alle HTML-entiteite, besoek ons HTML-entiteite-verwysing .

Geanimeerde waarskuwings

× Klik op die "x" simbool aan die regterkant om my toe te maak. Ek sal "fade" uit.

Die .fadeen .showklasse voeg 'n vervaagde effek by wanneer die waarskuwingsboodskap toegemaak word:

Voorbeeld

Voltooi Bootstrap 4 Alert Reference

Vir 'n volledige verwysing van alle waarskuwingsopsies, metodes en gebeure, gaan na ons Bootstrap 4 JS Alert Reference .

❮ Vorige Volgende ❯

Bootstrap 4-tutoriaal

Bootstrap 4-rooster

Bootstrap 4 Ander

Bootstrap 4 Verw

Bootstrap 4- waarskuwings