アラート

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

例

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

または、上で示したように、 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...
})