Bootstrap4 情報プロンプトボックス

Bootstrap4 情報通知ボックス

この記事では、Bootstrap4 で情報通知ボックスを使用してユーザーにメッセージを表示する方法について説明します。

1. Bootstrap4 情報通知ボックス

情報通知ボックスは、ユーザーにメッセージを表示するために使用されます。 .alert とコンテキストクラス（.alert-success、.alert-info、.alert-warning、.alert-danger、.alert-primary、.alert-secondary、.alert-light、または .alert-dark）を使用して情報通知ボックスを作成できます。

クラス	説明
`.alert`	情報通知ボックスの基本クラス
`.alert-success`	成功メッセージの表示に使用
`.alert-info`	情報メッセージの表示に使用
`.alert-warning`	警告メッセージの表示に使用
`.alert-danger`	エラーメッセージの表示に使用
`.alert-primary`	プライマリメッセージの表示に使用
`.alert-secondary`	セカンダリメッセージの表示に使用
`.alert-light`	明るい背景のメッセージの表示に使用
`.alert-dark`	暗い背景のメッセージの表示に使用


<div class="alert alert-success" role="alert">
  これは成功メッセージです。
</div>

<div class="alert alert-info" role="alert">
  これは情報メッセージです。
</div>

<div class="alert alert-warning" role="alert">
  これは警告メッセージです。
</div>

<div class="alert alert-danger" role="alert">
  これはエラーメッセージです。
</div>

2. リンクの色

.alert-link クラスを追加すると、リンクの色をより明確にすることができます。


<div class="alert alert-success" role="alert">
  これは成功メッセージで、<a href="#" class="alert-link">リンク</a> が含まれています。
</div>

3. 情報通知ボックスを閉じる

class="close" と data-dismiss="alert" を持つボタンを追加して、情報通知ボックスを閉じることができます。スクリーンリーダーが正しく読み取れるように、閉じるアイコンに aria-label 属性を追加してください。


<div class="alert alert-warning alert-dismissible fade show" role="alert">
  警告！ 変更を保存してください。
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">×</span>
  </button>
</div>

4. JavaScript を使用して情報通知ボックスを閉じる

alert('close') メソッドを使用して、情報通知ボックスを閉じることができます。


<div class="alert alert-danger alert-dismissible fade show" role="alert" id="myAlert">
  これはエラーメッセージです。
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">×</span>
  </button>
</div>

<script>
  setTimeout(function() {
    $("#myAlert").alert('close');
  }, 3000); // 3秒後に閉じる
</script>

5. 情報通知ボックスに追加のコンテンツを含める

<h4>-<h6> を使用してタイトルを追加したり、リスト、画像など、他の HTML 要素を含めることができます。


<div class="alert alert-info" role="alert">
  <h4 class="alert-heading">情報</h4>
  <p>これは情報メッセージです。</p>
  <hr>
  <p class="mb-0">詳細については、<a href="#">こちら</a> をご覧ください。</p>
</div>

6. アニメーション効果

.fade と .show クラスを使用して、情報通知ボックスにフェードインとフェードアウトの効果を実現できます。これらのクラスは、JavaScript プラグインで要素を表示および非表示にするために使用されます。


<div class="alert alert-success alert-dismissible fade show" role="alert">
  成功！ 変更が保存されました。
  <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
    <span aria-hidden="true">×</span>
  </button>
</div>

情報通知ボックスに関するよくある質問

情報通知ボックスを自動的に非表示にするにはどうすればよいですか？

JavaScript の setTimeout() 関数を使用すると、情報通知ボックスを一定時間後に非表示にすることができます。上記 JavaScript を使用して情報通知ボックスを閉じるの例を参照してください。
情報通知ボックスに複数のコンテキストクラスを追加できますか？

いいえ、情報通知ボックスには1つのコンテキストクラスのみを追加できます。ただし、追加のユーティリティクラスを追加して、スタイルをさらにカスタマイズすることができます。
情報通知ボックスをページの特定の場所に配置するにはどうすればよいですか？

情報通知ボックスは、他の HTML 要素と同様に、ページ上の任意の場所に配置できます。情報通知ボックスを含む要素に適切な CSS スタイルを適用することで、配置を制御できます。

参照：

https://getbootstrap.jp/docs/4.1/components/alerts/