GitHubで確認

アラート

いくつかの利用可能な柔軟なアラートメッセージで、一般的なユーザー操作に対する状況に応じたフィードバックメッセージを提供します。

サンプル

アラートは、任意の長さのテキスト、およびオプションの閉じるボタンに使用できます。適切なスタイルのために、8つの**必須**のコンテキストクラス（例：.alert-success）のいずれかを使用します。インラインで閉じるには、alerts jQueryプラグインを使用します。

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
支援技術への意味の伝達

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

.alert-linkユーティリティクラスを使用して、任意のアラート内で簡単に色を合わせたリンクを提供します。

<div class="alert alert-primary" role="alert">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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()

または、上記で説明したように、アラート内のボタンに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...
})