Анхааруулга
Боломжтой, уян хатан сэрэмжлүүлгийн мессежийн тусламжтайгаар хэрэглэгчийн ердийн үйлдлийн контексттэй холбоотой санал хүсэлтийг илгээнэ үү.
Жишээ
Сэрэмжлүүлэг нь дурын урттай текст болон хаах товчлуурыг ашиглах боломжтой. Зохих загварчлахын тулд шаардлагатай найман контекст ангиллын аль нэгийг ашиглана уу (жишээ нь, .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">×</span>
</button>
</div>
JavaScript-ийн үйлдэл
Өдөөгч
JavaScript-ээр дамжуулан анхааруулгыг хаахыг идэвхжүүлэх:
$('.alert').alert()
Эсвэл дээр харуулсны дагуу дохиоллынdata
товчлуур дээрх шинж чанаруудтай :
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</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...
})