Руководство Bootstrap Alert
View more Tutorials:
Alert это построенный интерфейс компонент у Bootstrap, он является пространством страницы (page) отображающим сообщение (message), сообщение может являться информацией или предупреждение об ошибке, ... (info, warning, danger,..).
В отличии от компонента Model, Alert не отображается как окно, он является зоной на странице, но может иметь кнопку "x" помогающая вам закрыть данную зону пространства.
В отличии от компонента Model, Alert не отображается как окно, он является зоной на странице, но может иметь кнопку "x" помогающая вам закрыть данную зону пространства.

alert-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alert Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="alert alert-info"> <strong>Hi Tran!</strong> Welcome back! <button type="button" class="close" data-dismiss="alert" aria-label="Close">x</button> </div> <h4>Bootstrap Tutorials</h4> <ul> <li>Bootstrap Buttons</li> <li>Bootstrap Form Groups</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html>
Используйте класс .alert в сочетании с одним из классов .alert-info, .alert-warning, .alert-danger, .. чтобы создать Alert подходящий вашему контексту.
<div class="alert alert-primary">.alert-primary</div> <div class="alert alert-secondary">.alert-secondary</div> <div class="alert alert-success">.alert-success</div> <div class="alert alert-danger">.alert-danger</div> <div class="alert alert-warning">.alert-warning</div> <div class="alert alert-info">.alert-info</div> <div class="alert alert-dark">.alert-dark</div>

.alert-link
Возможно внутри Alert вы можете использовать тег (tag) <a>, вам стоит использовать класс .alert-link для данного тега. Класс .alert-link создаст цвет для тега <a> подходящий контексту у Alert.

.alert-link
<div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> <div class="alert alert-info"> <strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> <div class="alert alert-warning"> <strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>. </div> <div class="alert alert-danger"> <strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>
Чтобы создать закрывающийся (closable) Alert, вам нужно использовать класс .alert-dismissible для Alert, и добавить атрибуты (attribute): class="close" data-dismiss="alert" для кнопки закрытия. Кнопка закрытия будет отображена в правом углу у Alert. Когда пользователь нажимает на данную кнопку, Alert будет скрыт.

closing-alert-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alert Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="alert alert-info alert-dismissible"> <strong>Hi Tran!</strong> Welcome back! <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button> </div> <h4>Bootstrap Tutorials</h4> <ul> <li>Bootstrap Buttons</li> <li>Bootstrap Form Groups</li> </ul> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body>
Класс/Атрибут | Описание |
.alert-dismissible | Вам может не понадобиться этот класс, так как он не влияет на то, может Alert закрыться или нет. Но он помогает создать padding для .close. |
data-dismiss="alert" | Данный атрибут нужно добавить для кнопки (x), Bootstrap автоматически регистрирует обработчик для события, когда пользователь нажимает на данную кнопку. Когда пользователь нажимает на кнопку закрыть (x), Alert будет скрыт. |
Вы можете создать кастомизированный Alert со сложным содержанием HTML, помните что Bootstrap предоставляет вам класс .alert-heading чтобы применить к "заголовку" (heading) у Alert.
.alert-heading
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. </p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
