გაფრთხილებები
მიაწოდეთ კონტექსტური უკუკავშირის შეტყობინებები მომხმარებლის ტიპიური ქმედებებისთვის რამდენიმე ხელმისაწვდომი და მოქნილი გაფრთხილების შეტყობინებებით.
გაფრთხილებები ხელმისაწვდომია ნებისმიერი სიგრძის ტექსტისთვის, ასევე არჩევითი გაუქმების ღილაკი. სწორი სტილისთვის გამოიყენეთ რვა აუცილებელი კონტექსტური კლასიდან ერთ-ერთი (მაგ., .alert-success
). შიდა გათავისუფლებისთვის გამოიყენეთ გაფრთხილებების jQuery მოდული .
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა
მნიშვნელობის დასამატებლად ფერის გამოყენება მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებზე – როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (მაგ. ხილული ტექსტი), ან შედის ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .sr-only
კლასში.
გამოიყენეთ .alert-link
კომუნალური კლასი, რათა სწრაფად მიაწოდოთ შესაბამისი ფერადი ბმულები ნებისმიერი გაფრთხილების ფარგლებში.
<div class="alert alert-primary" role="alert">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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-ის საშუალებით:
ან data
ატრიბუტებით ღილაკზე სიგნალიზაციის შიგნით , როგორც ზემოთ იყო ნაჩვენები:
გაითვალისწინეთ, რომ გაფრთხილების დახურვა წაშლის მას DOM-დან.
მეთოდი | აღწერა |
---|---|
$().alert() |
ხდის გაფრთხილებას მოისმენს დაწკაპუნების მოვლენებს შთამომავლ ელემენტებზე, რომლებსაც აქვთ data-dismiss="alert" ატრიბუტი. (არ არის საჭირო data-api-ის ავტომატური ინიციალიზაციის გამოყენებისას.) |
$().alert('close') |
ხურავს გაფრთხილებას DOM-დან ამოღებით. თუ ელემენტზე არის .fade და .show კლასები, გაფრთხილება გაქრება მის წაშლამდე. |
$().alert('dispose') |
ანადგურებს ელემენტის გაფრთხილებას. |
Bootstrap-ის გაფრთხილების მოდული ავლენს რამდენიმე მოვლენას გაფრთხილების ფუნქციონირებაში ჩასართავად.
ღონისძიება | აღწერა |
---|---|
close.bs.alert |
ეს მოვლენა მაშინვე ირთვება, როდესაც close გამოიძახება ეგზემპლარის მეთოდი. |
closed.bs.alert |
ეს ღონისძიება გააქტიურებულია, როდესაც გაფრთხილება დაიხურება (დაელოდება CSS გადასვლების დასრულებას). |