メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

アラート(Alerts) v4.0.0一部変更

一掴みほどの利用可能な柔軟な警告メッセージを使用して、一般的なユーザーアクションに対するコンテキストフィードバックメッセージを提供。

アラートの設定(Examples)

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

色の種類
アラート - チェックしてください! Primary:.alert-primary v4.0.0追加
アラート - チェックしてください! Secondary:.alert-secondary v4.0.0追加
アラート - チェックしてください! Success:.alert-success
アラート - チェックしてください! Info:.alert-info
アラート - チェックしてください! Warning:.alert-warning
アラート - チェックしてください! Danger:.alert-danger
アラート - チェックしてください! Light:.alert-light v4.0.0追加
アラート - チェックしてください! Dark:.alert-dark v4.0.0追加
設定例
<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" 属性(支援技術にアラート(警告情報)の役割を伝える)を入れる

.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} なども併用可)

【変更履歴】

  • 【v4.0.0】
    • 見出し文の設定:div.alert.alert-{themecolor} > <h4>div.alert.alert-{themecolor} > h*.alert-heading(大きさは <h4> に限定する必要なし)

メッセージを閉じるアイコンボタン(Dismissing)v4.0.0設定変更

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

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

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

見本
Bootstrap3.xの設定例 赤背景が変更箇所
<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>
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>

【設定】

  • .alert.alert-{themecolor}.alert-dismissible[role="alert"] > {《アラート文》 + [button.close > <span> > &times;]《閉じるアイコンボタン》}
  • プラグインを使ってアラートを閉じるため button.closedata-dismiss="alert" を入れる
  • アイコンとなる × は、&times; と記述してエスケープ処理をする
  • アイコンボタンをフェードインで閉じるためには .alert.alert-{themecolor}.alert-dismissible.fade.show を追加

アクセシビリティの設定】

  • モーダルを閉じるボタンとなる <button> に、aria-label 属性(アイコンボタンのラベル)を入れる
  • 閉じるボタンアイコンの &times;span[aria-hidden="true"](スクリーンリーダー等での読み上げをスキップさせる)で囲む

【変更履歴】

  • 【v4.0.0】
    • 《閉じるアイコンボタン》⇒《アラート文》の順から《アラート文》⇒《閉じるアイコンボタン》に変更(アクセシビリティの向上のため)
    • フェードインで閉じる:.fade.in.fade.show

 

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)サンプル

メソッド 説明
$().alert() data-dismiss="alert" 属性を持つ子孫要素のclickイベントをアラートで待ち受ける。(data-apiの自動初期化を使用する場合は不要)
$().alert('close') DOMからそれを削除してアラートを閉じる。.fade.show クラスが要素上に存在する場合は、アラートは削除される前にフェードアウトする。
$().alert('dispose')
v4.0.0追加
要素のアラートを破棄。
JavaScript$('.alert').alert('close')

イベント(Events)サンプル

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

イベントタイプ 説明
close.bs.alert このイベントは、close のインスタンス・メソッドが呼び出されると直ちに発動。
closed.bs.alert このイベントは、アラートが閉じられると発動(完全にCSS遷移が完了するまで待機)。
使用例
JavaScript$('#my-alert').on('closed.bs.alert', function () {
	// 何かをする...
})