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…
})