Source

გაფრთხილებები

მიაწოდეთ კონტექსტური უკუკავშირის შეტყობინებები მომხმარებლის ტიპიური ქმედებებისთვის რამდენიმე ხელმისაწვდომი და მოქნილი გაფრთხილების შეტყობინებებით.

მაგალითები

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