Source

アラート

少数の利用可能で柔軟なアラート メッセージを使用して、典型的なユーザー アクションに対してコンテキスト フィードバック メッセージを提供します。

例

アラートは任意の長さのテキストで利用でき、オプションの却下ボタンも利用できます。適切なスタイルを設定するには、8 つの必須コンテキスト クラスのいずれかを使用します (例: .alert-success)。インラインで却下するには、アラート jQuery プラグインを使用します。

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
支援技術に意味を伝える

色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.sr-only色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。

ユーティリティ クラスを使用して、.alert-linkアラート内に一致する色のリンクをすばやく提供します。

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

追加コンテンツ

アラートには、見出し、段落、仕切りなどの追加の HTML 要素を含めることもできます。

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

却下

アラート JavaScript プラグインを使用すると、アラートをインラインで無視できます。方法は次のとおりです。

  • アラート プラグインまたはコンパイル済みの Bootstrap JavaScript をロードしたことを確認してください。
  • JavaScript をソースからビルドする場合はutil.js、 . コンパイルされたバージョンにはこれが含まれます。
  • 非表示ボタンと.alert-dismissibleクラスを追加します。これにより、アラートの右側に余分なパディングが追加され、.closeボタンが配置されます。
  • 非表示ボタンでdata-dismiss="alert"、JavaScript 機能をトリガーする属性を追加します。<button>すべてのデバイスで適切に動作するように、要素を一緒に使用してください。
  • アラートを閉じるときにアラートをアニメーション化するには、.fadeおよび.showクラスを必ず追加してください。

ライブデモでこれを実際に見ることができます:

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

JavaScript の動作

トリガー

JavaScript によるアラートの却下を有効にします。

$('.alert').alert()

または、上で示したように、 alert 内のdataボタンの属性を使用します。

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

アラートを閉じると、DOM から削除されることに注意してください。

メソッド

方法 説明
$().alert() data-dismiss="alert"属性を持つ子孫要素のクリック イベントをリッスンするアラートを作成します。(data-api の自動初期化を使用する場合は必要ありません。)
$().alert('close') DOM からアラートを削除してアラートを閉じます。.fadeおよびクラスが要素に存在する場合.show、アラートは削除される前にフェードアウトします。
$().alert('dispose') 要素のアラートを破棄します。 
$(".alert").alert('close')

イベント

Bootstrap のアラート プラグインは、アラート機能にフックするためのいくつかのイベントを公開します。

イベント 説明
close.bs.alert closeこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
closed.bs.alert このイベントは、アラートが閉じられたときに発生します (CSS トランジションが完了するまで待機します)。 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})