Bootstrap4メッセージボックス

1：メッセージボックス。

風船が.alert続いクラス成功.alert使用することができる、.alert-情報、
.alert警告、.alert-危険、.alertプライマリ、セカンダリ-.alert、.alert-明暗や.alert実装するクラス：

< のdiv クラス= "コンテナ" > 
  < H2 >風船</ H2 > 
  < P >風船を実装するために特定の意味指定された色クラスに続いて、カテゴリ.alert使用することができます。</ P > 
  < divのクラス=「警告成功-ALERT " > 
    < 強い>成功！</ 強い> 操作が成功迅速な情報だっ指定します。
  </ 本部> 
  < divのクラス= "アラートアラート情報" > 
    < 強い>情報！</ 強いです> この情報に注意してください。
  </DIV > 
  < DIV クラス= "アラートアラート警告" > 
    < 強い>警告！</ 強い> 警告メッセージを設定します。
  </ 本部> 
  < divのクラス= "警告アラート危険" > 
    < 強い>エラー！</ 強い> 失敗した操作
   </ divの> 
  < divのクラス= "警告アラートプライマリ" > < 強い>選択！</ 強いです> これは重要な操作情報です。
  </ 本部
    > 
  < のdiv クラス=「アラートアラートセカンダリ」> < 強い>マイナー！</ 強い> いくつかの重要な情報を表示します。
  </ 本部> < divのクラス= "警告アラート・ダーク" > < 強い>濃い灰色！</ 強い> 濃い灰色のボックスが表示されます。
  </ 本部> < divのクラス= "警告アラート・ライト" > < 強い>グレー淡い！</ 強いです> ライトグレー風船。
  </ 事業部>
    
  
    
  
    
</ DIV >

2：バルーンは、リンクの追加します

　　プロンプトボックスはリンクタグに追加 アラートリンク タイプのリンク設定されたカラーマッチングバルーン：

<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>

3：关闭提示框

　　在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>

提示: &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"。

4：提示框动画

　　.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>

效果可以自己试试没法截屏效果

Bootstrap4メッセージボックス

おすすめ