Source

Анхааруулга

Боломжтой, уян хатан сэрэмжлүүлгийн мессежийн хамт хэрэглэгчийн ердийн үйлдлийн контексттэй холбоотой санал хүсэлтийг илгээнэ үү.

Жишээ

Сэрэмжлүүлэг нь дурын урттай текст, мөн нэмэлт хаах товчлууртай. Зохих загварчлалын хувьд шаардлагатай найман контекст ангиллын аль нэгийг ашиглана уу (жишээ нь, .alert-success). Дотор нь ажлаас халахын тулд jQuery залгаасын дохиог ашиглана уу .

<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>
Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .sr-onlyангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

.alert-linkЯмар ч сэрэмжлүүлэг дотор тохирох өнгөт холбоосыг хурдан өгөхийн тулд хэрэгслийн ангиллыг ашиглана уу .

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

Нэмэлт контент

Анхааруулга нь гарчиг, догол мөр, хуваагч зэрэг нэмэлт HTML элементүүдийг агуулж болно.

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

Хасаж байна

Сэрэмжлүүлэг JavaScript залгаасыг ашигласнаар аливаа сэрэмжлүүлэгийг шугаман дээр хаах боломжтой. Үүнд:

  • Та анхааруулах залгаас эсвэл хөрвүүлсэн Bootstrap JavaScript-г ачаалсан эсэхээ шалгаарай.
  • Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа бол энэ ньutil.js . Эмхэтгэсэн хувилбарт үүнийг багтаасан болно.
  • .alert-dismissibleСэрэмжлүүлгийн баруун талд нэмэлт дэвсгэр нэмж, товчлуурыг байрлуулдаг хаах товчлуур болон анги нэмнэ .close.
  • Хаах товчлуур дээр data-dismiss="alert"JavaScript функцийг идэвхжүүлдэг атрибутыг нэмнэ үү. <button>Бүх төхөөрөмжид зөв ажиллахын тулд элементийг ашиглахаа мартуузай .
  • Сэрэмжлүүлгийг хэрэгсэхгүй болгохын тулд .fadeболон .showангиллыг нэмэхээ мартуузай.

Та үүнийг шууд үзүүлэнгээр харж болно:

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

JavaScript-ийн үйлдэл

Өдөөгч

JavaScript-ээр дамжуулан анхааруулгыг хаахыг идэвхжүүлэх:

$('.alert').alert()

Эсвэл дээр харуулсны дагуу дохиоллынdata товчлуур дээрх шинж чанаруудтай :

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

Анхааруулгыг хааснаар DOM-аас устгана гэдгийг анхаарна уу.

Арга зүй

Арга Тодорхойлолт
$().alert() Шинж чана�� бүхий удам угсааны элементүүд дээр товших үйл явдлуудыг сонсоход сэрэмжлүүлэг data-dismiss="alert"болгоно. (Data-api-г автоматаар эхлүүлэхийг ашиглах үед шаардлагагүй.)
$().alert('close') DOM-ээс устгаснаар дохиог хаадаг. Хэрэв элемент дээр .fadeболон .showангиуд байгаа бол сэрэмжлүүлэг нь устгахаас өмнө алга болно.
$().alert('dispose') Элементийн сэрэмжлүүлэгийг устгадаг. 
$(".alert").alert('close')

Үйл явдал

Bootstrap-ийн дохиоллын залгаас нь дохиоллын функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.

Үйл явдал Тодорхойлолт
close.bs.alert closeИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
closed.bs.alert Сэрэмжлүүлэг хаагдсан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})