Основной курс Bootstrap4

Информационные окна Bootstrap4

Bootstrap 4 легко реализует информационные сообщения.

Сообщение можно создать с помощью класса .alert, добавив .alert-success, .alert-info, .alert-warning: классами .alert-danger, .alert-primary, .alert-secondary, .alert-light или .alert-dark:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Сообщение</h2>
　　<p>Сообщение можно создать с помощью класса .alert, добавив класс с конкретным значением цвета:</p>
　　<div class="alert alert-success">
　　　　<strong>Успех!</strong> Успешно завершена указанная операция.
　　</div>
　　<div class="alert alert-info">
　　　　<strong>Информация!</strong> Обратите внимание на эту информацию.
　　</div>
　　<div class="alert alert-warning">
　　　　<strong>Предупреждение!</strong> Установлена информация о предупреждении.
　　</div>
　　<div class="alert alert-danger">
　　　　<strong>Ошибка!</strong> Неудачная операция
　　</div>
　　<div class="alert alert-primary">
　　　　<strong>Выберите!</strong> Это важная операционная информация.
　　</div>
　　<div class="alert alert-secondary">
　　　　<strong>Второстепенный!</strong> Показать некоторые второстепенные informacje.
　　</div>
　　<div class="alert alert-dark">
　　　　<strong>Темно-серый!</strong> Темно-серый информационный блок.
　　</div>
　　<div class="alert alert-light">
　　　　<strong>Светло-серый!</strong> Светло-серый информационный блок.
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Добавление ссылок в сообщение

В окне сообщения добавьте класс alert-link к тегу ссылки, чтобы установить цвет ссылок, соответствующий цвету сообщения:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Добавление ссылки в уведомление</h2>
　　<p>Добавьте класс "alert-link" к тегу ссылки в строке, чтобы установить цвет ссылок, соответствующий цвету уведомления:</p>
　　<div class="alert alert-success">
　　　　<strong>Успех!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-info">
　　　　<strong>Информация!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-warning">
　　　　<strong>Предупреждение!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-danger">
　　　　<strong>Ошибка!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-primary">
　　　　<strong>Основной!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-secondary">
　　　　<strong>Второстепенный!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-dark">
　　　　<strong>Серый!</strong> Вы должны серьезно читать <a href="#" class="alert-link">эту информацию</a>.
　　</div>
　　<div class="alert alert-light">
　　　　<strong>Серый!</strong> Вы должны серьезно относиться к <a href="#" class="alert-link">этому сообщению</a>.
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Закрыть всплывающее окно

Мы можем добавить .alert-dismissible в div всплывающего окна класс, а затем добавить классы и data-dismiss="alert" в ссылке кнопки закрытия классы для настройки операции закрытия всплывающего окна.

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Закрыть всплывающее окно</h2>
　　<p>Мы можем добавить класс .alert-dismissible в div всплывающего окна и добавить классы class="close" и data-dismiss="alert" в ссылке кнопки закрытия, чтобы настроить операцию закрытия всплывающего окна.</p>
　　<div class="alert alert-success alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Успех!</strong> Успешно завершена указанная операция.
　　</div>
　　<div class="alert alert-info alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Информация!</strong> Обратите внимание на эту информацию.
　　</div>
　　<div class="alert alert-warning alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Предупреждение!</strong> Установлена информация о предупреждении.
　　</div>
　　<div class="alert alert-danger alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Ошибка!</strong> Операция не выполнена.
　　</div>
　　<div class="alert alert-primary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Выберите!</strong> Это важная операционная информация.
　　</div>
　　<div class="alert alert-secondary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Второстепенный!</strong> Показать некоторые второстепенные informacje.
　　</div>
　　<div class="alert alert-dark alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Темно-серый!</strong> Темно-серый информационный блок.
　　</div>
　　<div class="alert alert-light alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Светло-серый!</strong> Светло-серый информационный блок.
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Подсказка: × (×) - это HTML сущность символа, которая используется для представления операции закрытия, а не буквы "x".

Анимация всплывающего окна

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

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Анимация всплывающих окон</h2>
　　<p>.fade и .show классы используются для настройки эффекта размытия при закрытии и открытия всплывающего окна:</p>
　　<div class="alert alert-success alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Успех!</strong> Успешно завершена указанная операция.
　　</div>
　　<div class="alert alert-info alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Информация!</strong> Обратите внимание на эту информацию.
　　</div>
　　<div class="alert alert-warning alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Предупреждение!</strong> Установлена информация о предупреждении.
　　</div>
　　<div class="alert alert-danger alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Ошибка!</strong> Операция не выполнена.
　　</div>
　　<div class="alert alert-primary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Выберите!</strong> Это важная операционная информация.
　　</div>
　　<div class="alert alert-secondary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Второстепенный!</strong> Показать некоторые второстепенные informacje.
　　</div>
　　<div class="alert alert-dark alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Темно-серый!</strong> Темно-серый информационный блок.
　　</div>
　　<div class="alert alert-light alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>Светло-серый!</strong> Светло-серый информационный блок.
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Кнопки Bootstrap4 Jumbotron Bootstrap4