アラート（Alerts）

アラートの設定（Examples）

アラートは任意の長さのテキストとオプションの閉じるボタンで利用可能。適切なスタイルを設定するには、必要な8つの色クラス（例：.alert-success）のいずれかを使用。インラインで閉じる場合、アラートJavaScriptプラグインを使用。

色の種類

設定例

コピー<div class="alert alert-primary" role="alert"><strong>アラート</strong> - チェックしてください！</div>

アラート内のリンクの色（Link color）

.alert-link ユーティリティー・クラスを使用すると、アラート内の色付きリンクが手早く表示可能。

見本

設定例

コピー<div class="alert alert-primary" role="alert"><strong>太字！</strong>　<a href="#" class="alert-link">リンク文字</a>　普通の文字</div>

追加コンテンツ（Additional content）

アラートには、見出し、段落、仕切り線などの追加のHTML要素も入れることが可能。

見本

設定例

コピー<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">よくやった！</h4>
	<p>ええ、あなたはこの重要な警告メッセージを正常に読むことができます。このサンプルテキストは、少し長く実行されるため、アラート内の空白がこの種のコンテンツでどのように動作するかを確認することができます。</p>
	<hr>
	<p class="mb-0">必要なときはいつでもマージンユーティリティを使用して、素敵に整えてください。</p>
</div>

メッセージを閉じるボタン（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">&times;</span>
	</button>
</div>

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の設定例

JavaScriptコピーvar 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から削除される。

メソッド（Methods）v5.0.0-alpha1設定変更、追加

アラート・コンストラクタを使用してアラート・インスタンスが作成可能。以下に例を示す：

設定例 v5.0.0-alpha1変更

JavaScriptコピーvar myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

これは data-bs-dismiss="alert" 属性を持つ子孫要素上でクリック・イベントをアラートに従わせる（data-apiの自動初期化を使用する場合は不要）。

getInstance の設定例

JavaScriptコピーvar alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

イベント（Events）

Bootstrapのアラートプラグインは、アラート機能に接続するためにいくつかのイベントを公開する。

使用例 v5.0.0-alpha1設定変更

JavaScriptコピーvar myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
	// 何かをする、たとえば、フォーカスを最も適切な要素に明示的に移動する、
	// そのため、ページの先頭に失われたりリセットされたりすることはない
	// document.getElementById('...').focus()
})