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

View more Tutorials:

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

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>

View more Tutorials:

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