ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
Теги HTML HTML учебник Теги CSS CSS учебник JavaScript учебник PHP учебник SQL учебник Bootstrap 4 Еще
×

Bootstrap Tutorial

BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS Media Objects BS Carousel BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix BS Filters

Bootstrap Grids

BS Grid System BS Stacked/Horizontal BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap Themes

BS Templates BS Theme "Simply Me" BS Theme "Company" BS Theme "Band"

Bootstrap CSS Ref

CSS All Classes CSS Typography CSS Buttons CSS Forms CSS Helpers CSS Images CSS Tables CSS Dropdowns CSS Navs Glyphicons

Bootstrap JS Ref

JS Affix JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap Оповещения Alerts

❮ Назад Дальше ❯

Alerts Оповещения

Bootstrap предоставляет простой способ создания предопределенных предупреждающих сообщений:

× Успех! Это оповещение указывает на успешное или положительное действие.
× Информация! Это окно оповещения указывает на нейтральное информативное изменение или действие.
× Внимание! В этом окне предупреждения отображается предупреждение, которое может потребоваться.
× Опасность! Это предупреждение указывает на опасное или потенциально отрицательное действие.

Оповещения создаются с помощью .alert класса, за которым следует один из четырех контекстных классов .alert-success, .alert-info .alert-warning или .alert-danger:

Пример

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Оповещения ссылки

Добавьте alert-link класс к любым ссылкам внутри окна оповещения, чтобы создать "совпадающие цветные ссылки":

Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.

Пример

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Закрытие оповещений

× Нажмите на символ "x" справа, чтобы закрыть меня.

Чтобы закрыть предупреждение, добавьте .alert-dismissible класс в контейнер оповещений. После этого добавьте class="close" и data-dismiss="alert" к соединению или элементу кнопки (когда вы щелкаете дальше это окно предупреждения исчезнет).

Пример

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Aria-* атрибут и & Times; Объяснение

Чтобы улучшить доступность для людей, использующих средства чтения с экрана, при создании кнопки закрытия следует включить атрибут ARIA-Label = «Close».

& время; (×) — это объект HTML, который является предпочтительным значком для кнопок закрытия, а не буквы «x».
Список всех HTML-сущностей, посетите нашу справка HTML символы.

Анимированные оповещения

× Нажмите на символ "x" справа, чтобы закрыть меня. Я буду "исчезать" из.

.fade и .in классы добавляет эффект затухания при закрытии сообщения предупреждения:

Пример

<div class="alert alert-danger fade in">

Полная справка на оповещение начальной загрузки

Для полной справки всех вариантов оповещения, методы и события, перейдите на наш справка оповещение Bootstrap JS.


❮ Назад Дальше ❯