Bootstrap 5 の警告

警告

Bootstrap 5 では、事前定義された警告メッセージを簡単に作成できます。

アラート ボックスは、.alert クラスの後にコンテキスト クラスの 1 つを使用して作成されます。

• .alert-success
• .alert-info
• .alert-warning
• .alert-danger
• .alert-primary
• .alert-secondary
• .alert-light
• .alert-dark

例

<div class="alert alert-success">
  <strong>成功！ </strong>このアラート ボックスは、成功または肯定的なアクションを示します。
</div>

自分で試してみてください

警告リンク

.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">

自分で試してみてください