Home > TagScript > html,cssテンプレート >  Bootstrap > Bootstrap 4 ドキュメントの和訳

警告

新規作成日 2017-01-17
最終更新日

原文:Alerts

利用できる柔軟な警告メッセージで、一般的なユーザーの動作のために、文脈上のフィードバック・メッセージを与えます。

Examples

オプションの解除ボタンと同様に、どんな長さのテキストでも、警告が、利用できます。適切なスタイル調整のために、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クラスで隠されている追加のテキストのような、(表示されるテキストのような)内容そのものから明らか、あるいは、代替手段が含まれられている色によって、情報が表示されていることを確認します。

リンクの色

Link color

警告の中で、対応する色のついたリンクを素早く提供するために、.alert-linkユーティリティ・クラスを使用します。

.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>

その他の内容

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プラグインを使用して、警告をインラインで解除することができます。方法は、次のとおりです。:

  • あなたが、警告プラグインやコンパイルされたBootstrap JavaScriptを読み込むことは確実です。
  • あなたが、ソースから、私たちのJavaScriptをビルドしている場合、util.jsを必要とします。コンパイルされたバージョンは、これが、含まれています。
  • 解除ボタンと警告の右に追加のパディングを追加し、.closeボタンが配置される.alert-dismissibleクラスを追加します。
  • 解除ボタンで、JavaScript機能を起動する、data-dismiss="alert"属性を追加します。すべてのデバイスにわたり適切な動作させるために、を必ず使用してください。
  • それらを閉じるとき、警告をアニメーション化するために、.fadeと.showクラスを必ず追加して下さい。

あなたは、ライブ・デモで、この動作を見ることができます。:

JavaScriptの挙動

JavaScript behavior

デザインの例

<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>

トリガ

Triggers

JavaScript経由で、警告の無視を有効にします。:

上で説明されたように、あるいは、警告の中のボタン上のデータ属性で:

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

警告を閉じると、それがDOMから削除することに注意して下さい。

メソッド

Methods

メソッド 解説
$().alert() data-dismiss="alert"属性を持っている派生した要素で、クリック・イベントのための警告の聞き取りを作成します。(データ-APIの自動初期化を使用するとき、必要ありません。)
$().alert('close') DOMから、それを削除してアラートを閉じます。.fadeと.showクラスが要素に存在する場合、警告は、削除される前に、次第に消えて行きます。
$().alert('dispose') 要素の警告を無効にします。

$(".alert").alert('close')

イベント

Events

Bootstrapの警告プラグインは、警告機能にフックするため、いくつかのイベントを公開しています。

イベント 解説
close.bs.alert このイベントは、閉じるインスタンスメソッドが、呼び出されるとき、すぐに発生します。
closed.bs.alert 警告が、閉じられたとき、このイベントが起動されます。(CSSの移行が完了するのを待ちます)。
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」