მიაწოდეთ კონტექსტური უკუკავშირის შეტყობინებები მომხმარებლის ტიპიური ქმედებებისთვის რამდენიმე ხელმისაწვდომი და მოქნილი გაფრთხილების შეტყობინებებით.
მაგალითები
გაფრთხილებები ხელმისაწვდომია ნებისმიერი სიგრძის ტექსტისთვის, ასევე არჩევითი გაუქმების ღილაკი. სწორი სტილისთვის გამოიყენეთ რვა აუცილებელი კონტექსტური კლასიდან ერთ-ერთი (მაგ., .alert-success). შიდა გათავისუფლებისთვის გამოიყენეთ გაფრთხილებების jQuery მოდული .
მარტივი პირველადი გაფრთხილება - შეამოწმეთ იგი!
მარტივი მეორადი გაფრთხილება - შეამოწმეთ იგი!
მარტივი წარმატების გაფრთხილება - შეამოწმეთ იგი!
მარტივი გაფრთხილება საფრთხის შესახებ - შეამოწმეთ!
მარტივი გამაფრთხილებელი გაფრთხილება - შეამოწმეთ იგი!
მარტივი ინფორმაციის გაფრთხილება - შეამოწმეთ იგი!
მარტივი მსუბუქი გაფრთხილება - შეამოწმეთ!
მარტივი ბნელი გაფრთხილება - შეამოწმეთ!
დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა
მნიშვნელობის დასამატებლად ფერის გამოყენება მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებს - როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (მაგ. ხილული ტექსტი), ან შეტანილია ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .sr-onlyკლასში.
ლინკის ფერი
გამოიყენეთ .alert-linkკომუნალური კლასი, რათა სწრაფად მიაწოდოთ შესაბამისი ფერადი ბმულები ნებისმიერი გაფრთხილების ფარგლებში.
მარტივი პირველადი გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი მეორადი გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი წარმატების გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი საფრთხის გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი გამაფრთხილებელი გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი ინფორმაციის გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი მსუბუქი გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
მარტივი ბნელი გაფრთხილება
მაგალითის ბმულით . დააწკაპუნეთ თუ გსურთ.
დამატებითი შინაარსი
გაფრთხილებები ასევე შეიძლება შეიცავდეს დამატებით HTML ელემენტებს, როგორიცაა სათაურები, აბზაცები და გამყოფები.
კარგად გააკეთე!
ჰო, თქვენ წარმატებით წაიკითხეთ ეს მნიშვნელოვანი გამაფრთხილებელი შეტყობინება. ეს მაგალითი ტექსტი ცოტა ხანს გაგრძელდება, ასე რომ თქვენ ხედავთ, როგორ მუშაობს გაფრთხილების ინტერვალი ამ ტიპის კონტენტთან.
როცა დაგჭირდებათ, დარწმუნდით, რომ გამოიყენეთ მარჟის უტილიტები, რომ ყველაფერი ლამაზი და მოწესრიგებული იყოს.
გათიშვა
გაფრთხილების JavaScript მოდულის გამოყენებით, შესაძლებელია ნებისმიერი გაფრთხილების ხაზგასმა. Აი როგორ:
დარწმუნდით, რომ ჩატვირთეთ გაფრთხილების მოდული ან შედგენილი Bootstrap JavaScript.
თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js . შედგენილ ვერსიაში შედის ეს.
დაამატეთ გაუქმების ღილაკი და .alert-dismissibleკლასი, რომელიც ამატებს დამატებით ბალიშს გაფრთხილების მარჯვნივ და ათავსებს .closeღილაკს.
გაუქმების ღილაკზე დაამატეთ data-dismiss="alert"ატრიბუტი, რომელიც იწვევს JavaScript ფუნქციონირებას. დარწმუნდით, რომ გამოიყენეთ <button>ელემენტი ყველა მოწყობილობაში სათანადო ქცევისთვის.
მათი გაუქმებისას გაფრთხილებების ანიმაციისთვის, აუცილებლად დაამატეთ .fadeდა .showკლასები.
თქვენ შეგიძლიათ ნახოთ ეს მოქმედებაში ცოცხალი დემო საშუალებით:
წმიდა გუაკამოლე! თქვენ უნდა შეამოწმოთ ქვემოთ მოცემული ზოგიერთი ველი.
JavaScript ქცევა
ტრიგერები
გაფრთხილების გაუქმების ჩართვა 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 გადასვლების დასრულებას).