Babala ng Bootstrap 5

Babala

Nagbibigay ng simpleng paraan ang Bootstrap 5 upang gumawa ng predefinidong mensaheng babala:

Ang babala na ito ay nilikha gamit ang klase .alert, sinundan ng anumang klase ng konteksto:

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

Halimbawa

<div class="alert alert-success">
  <strong>Matagumpay!</strong> Ang babala na ito ay naglalarawan ng matagumpay o positibong aksyon.
</div>

Subukan Nang Personal

Link ng Babala

Idagdag ang .alert-link Idagdag ang klase sa anumang link sa babala na ito upang lumikha ng "matchyong kulay na link":

Halimbawa

<div class="alert alert-success">
  <strong>Matagumpay!</strong> Dapat ninyong <a href="#" class="alert-link">basahin ang mensaheng ito</a>.
</div>

Subukan Nang Personal

Isara ang Babala

Upang isara ang mensaheng babala, dagdagin ang .alert-dismissible Idagdag ang klase sa konteyner ng babala. Pagkatapos, dagdagin ang class="btn-close" at data-bs-dismiss="alert" Idagdag sa link o buton na elemento (kapag inililikihin ninyo, ang babala ay puputol).

Halimbawa

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Matagumpay!</strong> Ang babala na ito ay naglalarawan ng matagumpay o positibong aksyon.
</div>

Subukan Nang Personal

Anime ng Babala

.fade at .show Ang klase ay idinagdag sa mensaheng babala upang magkaroon ng epekto ng pagpasok at pagbubukas:

Halimbawa

<div class="alert alert-danger alert-dismissible fade show">

Subukan Nang Personal