Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Alerts (アラート)

柔軟性のあるアラートメッセージで、典型的なユーザーアクションに対して文脈に沿ったフィードバックメッセージを提供します。

目次

Examples

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

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

.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 を使用すると、アラートインラインを消すことができます。

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

<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経由でアラート閉じるを有効にします。

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

または, クローズボタンの data 属性を持ちます。

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

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

Methods

アラートのインスタンスを作成するには、例えば alert のコンストラクタを使用します。

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

data-dismiss="alert" 属性を子孫要素のクリックイベントに対してアラートをリッスンするようにします。
(data-apiの自動初期化を使用している場合は必要ありません)。

Method Description
close DOMから削除してアラートを閉じます。.fade and .show クラスが要素に存在する場合、アラートは削除される前にフェードアウトします。
dispose アラート要素を破棄します。
getInstance DOM 要素に関連付けられたアラートのインスタンスを取得する静的メソッドです。
使い方: bootstrap.Alert.getInstance(alert)
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Events

Bootstrapのalertプラグインは、アラート機能にフックするためのいくつかのイベントがあります。

Event Description
close.bs.alert close インスタンス・メソッドが呼ばれたときにすぐに発生します。
closed.bs.alert アラートが閉じられ、CSSの遷移が完了したときに発生します。
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something…
})