アラートの設定(Examples)
アラートは任意の長さのテキストとオプションの閉じるボタンで利用可能。適切なスタイルを設定するには、必要な8つの色クラス(例:.alert-success
)のいずれかを使用。インラインで閉じる場合、アラートJavaScriptプラグインを使用。
色の種類
.alert-primary
.alert-secondary
.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-light
.alert-dark
設定例
<div class="alert alert-primary" role="alert"><strong>アラート</strong> - チェックしてください!</div>
【設定】
.alert.alert-{themecolor}
(.alert-{themecolor}
は上記の「色の種類」から選択、.alert
単独での使用は不可){themecolor}
は、primary
,secondary
,success
,info
,warning
,danger
,light
,dark
のいずれかを選択
【アクセシビリティの設定】
.alert.alert-{themecolor}
に、role="alert"
属性(支援技術にアラート(警告情報)の役割を伝える)を入れる
支援技術への意味の伝達
意味を追加するのにカラー名を使用しても視覚的な指示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーには伝わらないだろう。カラー名で表示された情報をコンテンツ自体で明らかにするか(可視テキストなど)、代替手段として追加のテキストなどを .visually-hidden
クラスで隠すなどして入れるようにすること。
アラート内のリンクの色(Link color)
.alert-link
ユーティリティー・クラスを使用すると、アラート内の色付きリンクが手早く表示可能。
見本
設定例
<div class="alert alert-primary" role="alert"><strong>太字!</strong> <a href="#" class="alert-link">リンク文字</a> 普通の文字</div>
【設定】
.alert.alert-{themecolor}
>a.alert-link
追加コンテンツ(Additional content)
アラートには、見出し、段落、仕切り線などの追加のHTML要素も入れることが可能。
見本
よくやった!
ええ、あなたはこの重要な警告メッセージを正常に読むことができます。このサンプルテキストは、少し長く実行されるため、アラート内の空白がこの種のコンテンツでどのように動作するかを確認することができます。
必要なときはいつでもマージンユーティリティを使用して、素敵に整えてください。
設定例
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">よくやった!</h4>
<p>ええ、あなたはこの重要な警告メッセージを正常に読むことができます。このサンプルテキストは、少し長く実行されるため、アラート内の空白がこの種のコンテンツでどのように動作するかを確認することができます。</p>
<hr>
<p class="mb-0">必要なときはいつでもマージンユーティリティを使用して、素敵に整えてください。</p>
</div>
【設定】
- アラート内に見出し
<h*>
、段落<p>
、水平線<hr>
などの追加のHTML要素を入れる(.alert-heading
や.m{sides}-{size}
なども併用可)
メッセージを閉じるボタン(Dismissing)v5.0.0-beta1設定変更
アラートJavaScriptプラグインを使用すると、アラートをすべて閉じることができます。方法は次のとおり:
- アラートプラグインかコンパイル済みのBootstrapのJavaScriptファイルを読み込む。
- 閉じるボタンと
.alert-dismissible
クラスを追加。これにより、アラートの行末側に余白が追加され、.btn-close
ボタンが配置される。 - 閉じるボタンで、
data-bs-dismiss="alert"
属性を追加。これにより、JavaScript機能が起動される。すべてのデバイスで適切な動作をさせるには、必ず<button>
要素を使用すること。 - アラートを閉じるときにアラートをアニメーション化するには、必ず
.fade
と.show
のクラスを追加すること。
以下の見本でこれを見ることが可能。
※実例としてモーダルを利用してアラートを表示する方法をモーダルでアラート表示に掲載。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる"></button>
<strong>注意!</strong> このアラートはあなたの注意が必要です。
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>注意!</strong> このアラートはあなたの注意が必要です。
<button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
【設定】
.alert.alert-{themecolor}.alert-dismissible[role="alert"]
> {《アラート文》 +button.btn-close
《閉じるボタン》}- プラグインを使ってアラートを閉じるため
button.btn-close
にdata-bs-dismiss="alert"
を入れる - アイコンボタンをフェードインで閉じるためには
.alert.alert-{themecolor}.alert-dismissible
に.fade.show
を追加
【アクセシビリティの設定】
- モーダルを閉じるボタンとなる
button.btn-close
に、aria-label
属性(アイコンボタンのラベル)を入れる
【変更履歴】
- 【v5.0.0-alpha2】
- 閉じるボタンの設定の変更(
.close
⇒.btn-close
、span[aria-hidden="true"]
>×
が不要に)
- 閉じるボタンの設定の変更(
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-dismiss="alert"]
⇒[data-bs-dismiss="alert"]
closed.bs.alert
イベントを処理し、プログラムでページ内の最も適切な場所に focus()
を設定する追加のJavaScriptを含めることを推奨。通常はフォーカスを受け取らない非インタラクティブ要素にフォーカスを移動する場合は、要素に tabindex="-1"
を追加すること。
Sass v5.0.0-beta3追加
変数(Variables)
デフォルトの設定
scss/_variables.scss 内 alert-variables の設定$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3xは、xの幅に加えて、両側のデフォルトのパディングをカバー
バリエーションmixin(Variant mixin)
$theme-colors
と組み合わせて使用し、アラートのコンテキスト修飾子クラスを作成。
デフォルトの設定
scss/mixins/_alert.scss 内 alert-variant-mixin の設定@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
ループ(Loop)
alert-variant()
mixinを使用して修飾子クラスを生成するループ。
デフォルトの設定
scss/_alert.scss 内 alert-modifiers の設定// アラートを色付けするためのコンテキスト修飾子クラスを生成
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
JavaScriptの動作(JavaScript behavior)v5.0.0-alpha1設定変更
トリガー(Triggers)
JavaScript経由でアラートを閉じることを有効にする。
Bootstrap5.xの設定例
JavaScriptvar alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
※Bootstrap4.xの設定例
$('.alert').alert()
また、下記のように、アラート内のボタンに data
属性を設定することも可能。
HTML<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる">
</button>
アラートを閉じると、アラートがDOMから削除される。
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
- 【v5.0.0-alpha2】
- 閉じるボタンの設定の変更(
.close
⇒.btn-close
、span[aria-hidden="true"]
>×
が不要に)
- 閉じるボタンの設定の変更(
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-dismiss="alert"]
⇒[data-bs-dismiss="alert"]
メソッド(Methods)v5.0.0-alpha1設定変更、追加
アラート・コンストラクタを使用してアラート・インスタンスが作成可能。以下に例を示す:
設定例 v5.0.0-alpha1変更
JavaScriptvar myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
これは data-bs-dismiss="alert"
属性を持つ子孫要素上でクリック・イベントをアラートに従わせる(data-apiの自動初期化を使用する場合は不要)。
メソッド | 説明 |
---|---|
close |
DOMからアラートを削除して閉じる。.fade と .show クラスが要素上に存在する場合、アラートはそれが削除される前にフェードアウトする。 |
dispose |
要素のアラートを破棄(DOM要素に保存されているデータを削除)。 |
getInstance v5.0.0-alpha1追加 |
DOM要素に関連付けられたアラート・インスタンスを取得することを可能にする静的メソッドで、次のように使用可能:bootstrap.Alert.getInstance(alert) |
getInstance
の設定例
JavaScriptvar alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
【変更履歴】
- 【v5.0.0-alpha1】
$().alert('xxx')
⇒alert.xxx()
イベント(Events)
Bootstrapのアラートプラグインは、アラート機能に接続するためにいくつかのイベントを公開する。
イベントタイプ | 説明 |
---|---|
close.bs.alert |
close のインスタンス・メソッドが呼び出されると直ちに発動。 |
closed.bs.alert |
アラートが閉じられると発動(完全にCSS遷移が完了するまで待機)。 |
使用例 v5.0.0-alpha1設定変更
JavaScriptvar myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// 何かをする、たとえば、フォーカスを最も適切な要素に明示的に移動する、
// そのため、ページの先頭に失われたりリセットされたりすることはない
// document.getElementById('...').focus()
})