コース推薦：

Bootstrap 5 警告

警告

Bootstrap 5 は、事前定義の警告メッセージを作成するための簡単な方法を提供しています：

  • 警告ボックスは .alert クラスを使用して作成され、次のコンテキストクラスのいずれかを追加します：
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

例

<div class="alert alert-success">
  <strong>成功！</strong>この警告ボックスは成功またはポジティブなアクションを示します。
</div>

自分で試してみる

.alert-dark

警告リンク .alert-link 警告ボックス内のリンクにクラスを追加すると、「一致するカラーリンク」を作成できます：

例

<div class="alert alert-success">
  <strong>成功！</strong>このメッセージを読むべきです<a href="#" class="alert-link">ここをクリック</a>。
</div>

自分で試してみる

警告を閉じる

警告メッセージを閉じるには、 .alert-dismissible 警告コンテナにクラスを追加し、次に class="btn-close" および data-bs-dismiss="alert" リンクやボタネレメントに追加すると、警告ボックスがクリックで消失します。

例

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>成功！</strong>この警告ボックスは成功またはポジティブなアクションを示します。
</div>

自分で試してみる

警告ボックスアニメーション

.fade および .show 警告メッセージを閉じる際にフェードイン/アウト効果を追加するクラス：

例

<div class="alert alert-danger alert-dismissible fade show">

自分で試してみる