アラート（Alerts） v4.0.0一部変更

アラートの設定（Examples）

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

色の種類

設定例

コピー<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）v4.0.0設定変更

アラートJavaScriptプラグインを使用すると、アラートをすべて無効にすることができます。方法は次のとおり：

• アラートプラグインかコンパイル済みのBootstrapのJavaScriptファイルを読み込む。
• ソースファイルからJavaScriptを構築する場合は、util.js が必要。コンパイル済みのバージョンにはこれが組み込まれている。
• 閉じるボタンと.alert-dismissible クラスを追加。これにより、アラートの右側に余白が追加され、.close ボタンが配置される。
• 閉じるボタンで、data-dismiss="alert" 属性を追加。これにより、JavaScript機能が起動される。すべてのデバイスで適切な動作をさせるには、必ず <button> 要素を使用すること。
• アラートを閉じるときにアラートをアニメーション化するには、必ず .fade と .show のクラスを追加すること。

次の見本でこれを見ることが可能。

見本

<div class="alert alert-warning alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
		<span aria-hidden="true">&times;</span>
	</button>
	<strong>注意!</strong>　このアラートはあなたの注意が必要です。
</div>

コピー<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>

JavaScriptの動作（JavaScript behavior）

トリガー（Triggers）

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

JavaScript$('.alert').alert()

また、上記のように、アラート内のボタンに data 属性を設定することも可能。

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

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

メソッド（Methods）サンプル

JavaScript$('.alert').alert('close')

イベント（Events）サンプル

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

使用例

JavaScript$('#my-alert').on('closed.bs.alert', function () {
	// 何かをする...
})