HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Учебник по Bootstrap 3

БС ДОМ БС Начать Базовая сетка BS Типография БС Таблицы БС Изображения БС БС Джамботрон БС Уэллс Оповещения о BS Кнопки БС Группы кнопок BS BS Глификоны Значки/этикетки BS Индикаторы прогресса BS БС Пагинация БС пейджер Группы списка BS БС Панели Выпадающие списки БС Свернуть БС Таблетки/таблетки BS БС Навбар БС Формы Входы БС Входы БС 2 Размер ввода BS Медиа-объекты BS БС Карусель BS Модальный Подсказка БС БС Поповер БС прокрутки BS-аффикс БС фильтры

Сетки начальной загрузки

Сетевая система БС BS Сложенный/горизонтальный BS Сетка Малая Сетка BS средняя BS Сетка Большая Примеры сетки BS

Загрузочные темы

Шаблоны БС Тема BS "Просто я" Тема BS "Компания" Тема BS "Группа"

Примеры начальной загрузки

Примеры БС викторина БС Упражнения Сертификат БС

Bootstrap CSS Ref

CSS все классы CSS типографика CSS-кнопки CSS-формы CSS-помощники CSS-изображения CSS-таблицы Выпадающие списки CSS CSS-навигация Глификоны

Bootstrap JS ссылка

JS-аффикс JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS-подсказка


Предупреждения начальной загрузки

❮ Предыдущий Следующий ❯

Оповещения

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класс к любым ссылкам внутри окна предупреждения, чтобы создать «соответствующие цветные ссылки»:

Успех! Вы должны прочитать это сообщение .
Информация! Вы должны прочитать это сообщение .
Предупреждение! Вы должны прочитать это сообщение .
Опасность! Вы должны прочитать это сообщение .

Пример

<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-* и × пояснение

Чтобы улучшить доступность для людей, использующих программы чтения с экрана, вы должны включить атрибут aria-label="close" при создании кнопки закрытия.

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

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

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

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

Пример

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

Проверьте себя с помощью упражнений

Упражнение:

Добавьте класс «оповещения» Bootstrap для отображения результата успешного действия.

<div class="">
  Success!
</div>

Полный справочник предупреждений Bootstrap

Полный справочник по всем параметрам, методам и событиям предупреждений см. в нашем Справочнике по предупреждениям Bootstrap JS .


❮ Предыдущий Следующий ❯