Bootstrap Оповещения

В этой главе объясняются оповещения и классы, которые Bootstrap предоставляет для оповещений. Оповещения позволяют стилизовать сообщения для пользователей. Они обеспечивают контекстную обратную связь для типичных действий пользователя.

Вы можете добавить необязательную кнопку закрытия в блок предупреждения. Чтобы создать встроенный закрываемый блок предупреждения, используйтеAlerts jQuery Plugin。

Вы можете, создав <div> и добавив к нему.alertкласс и один из четырёх контекстных классов (т.е. .alert-success、.alert-info、.alert-warning、.alert-danger), добавить базовый блок предупреждения. Следующий пример демонстрирует это:

Примеры

<div class="alert alert-success">Успех! Отправка успешно завершена.</div> <div class="alert alert-info">Информация! Пожалуйста, обратите внимание на эту информацию.</div> <div class="alert alert-warning">Предупреждение! Пожалуйста, не отправляйте.</div> <div class="alert alert-danger">Ошибка! Пожалуйста, внесите некоторые изменения.</div>

Попробуйте »

Результат показан ниже:

警告（Alerts）

Закрываемые предупреждения (предупреждения с закрытием)

Шаги для создания закрываемого предупреждения (предупреждения с закрытием) следующие:

  • Создав <div> и добавив к нему.alertкласс и один из четырёх контекстных классов (т.е. .alert-success、.alert-info、.alert-warning、.alert-danger), чтобы добавить базовый блок предупреждения.
  • Также добавьте необязательный ... к <div> выше..alert alert-dismissable。
  • Добавьте кнопку закрытия.

Следующий пример демонстрирует это:

Примеры

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Успех! Отправка успешно завершена.</div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Информация! Пожалуйста, примите к сведению эту информацию.</div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Предупреждение! Пожалуйста, не отправляйте.</div> <div class="alert alert alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Ошибка! Пожалуйста, внесите некоторые изменения.</div>

Пожалуйста, убедитесь, что вы используетеdata-dismiss="alert"элемент <button> с атрибутом данных.
Попробуйте »

Результат показан ниже:

可取消的警告（Dismissal Alerts）

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

Шаги по созданию ссылок в оповещениях следующие:

  • Создав <div> и добавив к нему.alertкласс и один из четырёх контекстных классов (т.е. .alert-success、.alert-info、.alert-warning、.alert-danger), чтобы добавить базовый блок предупреждения.
  • Используйте класс.alert-link, чтобы быстро добавить ссылки с соответствующими цветами.

Примеры

<div class="alert alert-success"> <a href="#" class="alert-link">Успех! Отправка успешно завершена.</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">Информация! Пожалуйста, обратите внимание на эту информацию.</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">Предупреждение! Пожалуйста, не отправляйте.</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">Ошибка! Пожалуйста, внесите некоторые изменения.</a> </div>

Попробуйте »

Результат показан ниже:

警告（Alerts）中的链接
Другие расширения