Осигурете контекстуални съобщения за обратна връзка за типични потребителски действия с шепа налични и гъвкави предупредителни съобщения.
Примери
Предупрежденията са налични за произволна дължина на текста, както и незадължителен бутон за отхвърляне. За правилен стил използвайте един от осемте необходими контекстуални класа (напр. .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"атрибута. (Не е необходимо, когато използвате автоматичното инициализиране на API за данни.)
$().alert('close')
Затваря предупреждение, като го премахва от DOM. Ако класовете .fadeи .showприсъстват в елемента, предупреждението ще избледнее, преди да бъде премахнато.
$().alert('dispose')
Унищожава предупреждението за елемент.
събития
Плъгинът за предупреждение на Bootstrap разкрива няколко събития за свързване с функцията за предупреждение.
Събитие
Описание
close.bs.alert
Това събитие се задейства веднага, когато closeсе извика методът на екземпляра.
closed.bs.alert
Това събитие се задейства, когато предупреждението е затворено (ще изчака CSS преходите да завършат).