原文:Alerts
利用できる柔軟な警告メッセージで、一般的なユーザーの動作のために、文脈上のフィードバック・メッセージを与えます。
例
オプションの解除ボタンと同様に、どんな長さのテキストでも、警告が、利用できます。適切なスタイル調整のために、8つの必要なコンテキスト・クラスの1つを使用します。(例えば、.alert-success)。インラインの棄却のために、警告jQueryプラグインを使用します。
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
支援技術に意味を伝える
Conveying meaning to assistive technologies
スクリーン・リーダーのような、外観を提供するだけの意味を追加するために、色を使用すると、それは、支援技術から、ユーザーに伝達されません。.sr-onlyクラスで隠されている追加のテキストのような、(表示されるテキストのような)内容そのものから明らか、あるいは、代替手段が含まれられている色によって、情報が表示されていることを確認します。
リンクの色
警告の中で、対応する色のついたリンクを素早く提供するために、.alert-linkユーティリティ・クラスを使用します。
<div class="alert alert-primary" role="alert">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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を必要とします。コンパイルされたバージョンは、これが、含まれています。
- 解除ボタンと警告の右に追加のパディングを追加し、.closeボタンが配置される.alert-dismissibleクラスを追加します。
- 解除ボタンで、JavaScript機能を起動する、data-dismiss="alert"属性を追加します。すべてのデバイスにわたり適切な動作させるために、
- それらを閉じるとき、警告をアニメーション化するために、.fadeと.showクラスを必ず追加して下さい。
あなたは、ライブ・デモで、この動作を見ることができます。:
JavaScriptの挙動
<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">×</span>
</button>
</div>
トリガ
JavaScript経由で、警告の無視を有効にします。:
上で説明されたように、あるいは、警告の中のボタン上のデータ属性で:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
警告を閉じると、それがDOMから削除することに注意して下さい。
メソッド
メソッド | 解説 |
---|---|
$().alert() | data-dismiss="alert"属性を持っている派生した要素で、クリック・イベントのための警告の聞き取りを作成します。(データ-APIの自動初期化を使用するとき、必要ありません。) |
$().alert('close') | DOMから、それを削除してアラートを閉じます。.fadeと.showクラスが要素に存在する場合、警告は、削除される前に、次第に消えて行きます。 |
$().alert('dispose') | 要素の警告を無効にします。 |
$(".alert").alert('close')
イベント
Bootstrapの警告プラグインは、警告機能にフックするため、いくつかのイベントを公開しています。
イベント | 解説 |
---|---|
close.bs.alert | このイベントは、閉じるインスタンスメソッドが、呼び出されるとき、すぐに発生します。 |
closed.bs.alert | 警告が、閉じられたとき、このイベントが起動されます。(CSSの移行が完了するのを待ちます)。 |
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})