გაფრთხილებები
მიაწოდეთ კონტექსტური უკუკავშირის შეტყობინებები მომხმარებლის ტიპიური ქმედებებისთვის რამდენიმე ხელმისაწვდომი და მოქნილი გაფრთხილების შეტყობინებებით.
მაგალითები
გაფრთხილებები ხელმისაწვდომია ნებისმიერი სიგრძის ტექსტისთვის, ასევე არჩევითი გაუქმების ღილაკი. სწორი სტილისთვის გამოიყენეთ რვა აუცილებელი კონტექსტური კლასიდან ერთ-ერთი (მაგ., .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...
})