とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > アラート

アラート

.alert, .alert-{value} はアラートメッセージの背景に色付けします。

Sample
Code
<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-secondary" role="alert">Secondary alert</div>
<div class="alert alert-success" role="alert">Success alert</div>
<div class="alert alert-danger" role="alert">Danger alert</div>
<div class="alert alert-warning" role="alert">Warning alert;</div>
<div class="alert alert-info" role="alert">Info alert</div>
<div class="alert alert-light" role="alert">Light alert</div>
<div class="alert alert-dark" role="alert">Dark alert</div>

.alert-link は、アラートメッセージの背景に応じた色のリンクテキストを表示します。

Sample
Code
<div class="alert alert-primary" role="alert">
  Primary alert. (See the <a href="#" class="alert-link">details</a>)
</div>

アラートヘッダ

.alert-heading は、アラートメッセージの背景に応じた色のヘッダを表示します。

Sample
Code
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Success!</h4>
  <p>Your operation is ...</p>
</div>

削除可能アラート

.alert-dismissible は、data-dismiss="alert" を指定したボタン押下によって削除が可能なアラートを表示します。

Sample
Code
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/alert.html