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

❮ Vorige Volgende ❯

Waarskuwings

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

Waarskuwings word saam met die klas geskep , .alertgevolg deur een van die vier kontekstuele klasse .alert-success, .alert-infoof :.alert-warning.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>

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 .

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

Die aria-* kenmerk en × verduideliking

Om toeganklikheid te help verbeter vir mense wat skermlesers gebruik, moet jy die aria-label="close"-kenmerk insluit wanneer jy 'n toemaakknoppie skep.

&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 .inklasse voeg 'n vervaagde effek by wanneer die waarskuwingsboodskap toegemaak word:

Voorbeeld

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

Toets jouself met oefeninge

Oefening:

Voeg 'n Bootstrap "waarskuwing" klas by om die resultaat van 'n suksesvolle aksie te vertoon.

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

Voltooi Bootstrap Alert Reference

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


❮ Vorige Volgende ❯