View on GitHub

Alerts (アラート)

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

On this page

Examples

任意の長さのアラートを表示できます。オプションで閉じるボタンがあります。適切なスタイルを設定するには、8つのrequiredコンテキストクラスのいずれかを使用します（例： .alert-success）インラインで閉じる場合は alerts JavaScript plugin 使用します。

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

<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 .visually-hidden class.

Link color

.alert-link クラスを適用すると、リンクが適切なカラーになります。

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

<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要素を含めることができます。

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<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を読み込んでください。
close button に .alert-dismissible クラスを追加すると警告の右側に追加の余白が追加され、クローズボタンの位置が決まります。
クローズボタンに data-bs-dismiss="alert" 属性を追加します。これにより、JavaScript機能がトリガーされます。すべてのデバイスで適切な動作をさせるには、必ず <button> 要素を使用してください。
アラートを解除するときにアラートをアニメートするには、必ず .fade および .show クラスを追加してください。

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

Holy guacamole! You should check in on some of those fields below.

<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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the closed.bs.alert event and programmatically sets focus() to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add tabindex="-1" to the element.

JavaScript behavior

Triggers

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

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

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

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

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

Methods

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

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

data-bs-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, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})