Source

Siaga

Nyadiakeun pesen eupan balik kontekstual pikeun lampah pamaké has kalawan sakeupeul pesen waspada sadia tur fléksibel.

Contona

Panggeuing sadia pikeun sagala panjang téks, kitu ogé hiji tombol ngilangkeun pilihan. Pikeun gaya anu leres, paké salah sahiji tina dalapan kelas kontekstual anu diperyogikeun (contona, .alert-success). Pikeun PHK inline, make panggeuing jQuery plugin .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .sr-onlykelas.

Anggo .alert-linkkelas utiliti pikeun gancang nyayogikeun tautan warna anu cocog dina sagala ngageter.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

eusi tambahan

Tanda ogé bisa ngandung elemen HTML tambahan kawas lulugu, paragraf jeung dividers.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Ngabubarkeun

Ngagunakeun plugin ngageter JavaScript, éta mungkin pikeun ngilangkeun sagala inline ngageter. Kieu carana:

  • Pastikeun anjeun parantos ngamuat plugin waspada, atanapi Bootstrap JavaScript anu disusun.
  • Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js . Versi anu disusun kalebet ieu.
  • Nambahkeun tombol ngilangkeun jeung .alert-dismissiblekelas, nu nambihan padding tambahan ka katuhu waspada jeung posisi .closetombol.
  • Dina tombol PHK, tambahkeun data-dismiss="alert"atribut, nu micu fungsionalitas JavaScript. Pastikeun ngagunakeun <button>unsur éta pikeun paripolah anu leres dina sadaya alat.
  • Pikeun ngahirupkeun panggeuing nalika ngaleungitkeun aranjeunna, pastikeun pikeun nambihan kelas .fadesareng .show.

Anjeun tiasa ningali ieu dina aksi sareng demo langsung:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

kabiasaan JavaScript

Pemicu

Aktipkeun pamecatan hiji ngageter via JavaScript:

$('.alert').alert()

Atanapi sareng dataatribut dina tombol dina waspada , sapertos anu dipidangkeun di luhur:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Catet yén nutup ngageter bakal ngahapus tina DOM.

Métode

Métode Katerangan
$().alert() Ngadamel waspada ngadangukeun acara klik dina unsur turunan anu ngagaduhan data-dismiss="alert"atribut. (Teu diperlukeun nalika ngagunakeun data-api sacara otomatis-inisialisasi.)
$().alert('close') Nutup ngageter ku cara ngahapus tina DOM. Upami kelas .fadesareng .showaya dina unsur, waspada bakal luntur sateuacan dipiceun.
$().alert('dispose') Ngancurkeun waspada hiji unsur. 
$(".alert").alert('close')

Kajadian

Plugin ngageter Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.

Acara Katerangan
close.bs.alert Kajadian ieu langsung hurung nalika closemetode conto disebut.
closed.bs.alert Acara ieu dipecat nalika ngageter parantos ditutup (bari ngantosan transisi CSS réngsé). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})