Руководство Bootstrap Alert

Bootstrap Alert
Alert с кнопкой закрытия
Кастомизировать Alert

1. Bootstrap Alert

Alert это построенный интерфейс компонент у Bootstrap, он является пространством страницы (page) отображающим сообщение (message), сообщение может являться информацией или предупреждение об ошибке, ... (info, warning, danger,..).
В отличии от компонента 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>

2. Alert с кнопкой закрытия

Чтобы создать закрывающийся (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">&times;</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 будет скрыт.

3. Кастомизировать 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>

Руководство Bootstrap Alert

1. Bootstrap Alert

2. Alert с кнопкой закрытия

3. Кастомизировать Alert

Pуководства Bootstrap

Pуководства Bootstrap

Новейшие статьи