Alerts

Alerts(アラート)は,ユーザーのアクションに対してのアラートメッセージを提供しています。アラートの使い方のドキュメントです。

Examples

任意の長さのアラートを表示できます。オプションで閉じるボタンがあります。
8色(e.g., .alert-success ) を利用可能です。インラインで閉じる場合は alerts jQuery plugin を使用します。

<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>
Conveying meaning to assistive technologies

色を用いた場合, 視覚でしか意味を伝えることができないのでスクリーンリーダーなどに対応することはできません。 そのため, 色で付加された情報がコンテンツから明らかであるか, 追加のテキストを不可視で追加する .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>

Additional content

アラートには, 見出し, 段落, 仕切りなどの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>

Dismissing

アラートのJavaScript plugin を使用すると, アラートインラインを消すことができます。
方法は

  • アラートの JavaScript plugin を読み込むか, Bootstrap JavaScriptを読み込んでください。
  • JavaScriptをソースからビルドする場合は, requires 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 behavior

Triggers

JavaScript経由でアラート閉じるを有効にします。

$('.alert').alert()

上記のように, アラート内のボタンに data 属性を設定することも可能です。

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

アラートを閉じると, アラートがDOMから削除されます。

Methods

Method Description
$().alert() data-dismiss="alert" 属性を持つ子孫要素のクリックイベントを監視してアラートを出すようにします。
$().alert('close') アラートを DOM から削除します。.fade.show クラスが要素に含まれていた場合, アラートは削除される前にフェードアウトします。
$().alert('dispose') 要素のアラートを完全に消去します。
$(".alert").alert('close')

Events

Bootstrapのアラートプラグインは, アラート機能のためにいくつかのイベントがあります。

Event Description
close.bs.alert このイベントは close インスタンスメソッドが呼ばれてすぐに発生します。
closed.bs.alert このイベントはアラートが閉じられたときに発生します(CSSによる遷移を待機します)。
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

v4.3