ブートストラップアラートを使用して、それらを却下できるようにする方法は？

Bootstrapアラートは、特定のクラスとJavaScriptサポートを追加することでオフにできます。 2。Alt.Alert-disisible、.fade、および.showクラスを追加して、シャットダウンとフェードアウト効果をサポートします。 3. .btn-closeクラスとdata-bs-dismiss = "alert"属性を備えたボタンを追加します。 4.シャットダウン動作を有効にするために、Bootstrap JavaScriptバンドルが導入されていることを確認してください。 5.オプションでアイコンを追加するか、closd.bs.alertイベントをリッスンして、機能性とインタラクティブ性を強化し、最終的に完全なシャットダウンアラートコンポーネントを実装します。

ブートストラップアラートは、成功、警告、エラーなど、ユーザーにフィードバックメッセージを提供する簡単な方法です。それらを却下可能にする（つまり、ユーザーがボタンでそれらを閉じることを許可する）により、ユーザーエクスペリエンスが向上します。 Bootstrapアラートを使用して却下できるようにする方法は次のとおりです。

basic Basic Bootstrapアラート

.alert-success 、 .alert-dangerなどのコンテキストクラスとともに.alertクラスを使用して、基本的なアラートから始めます。

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

✅却下可能なアラート（ボタンを閉じる）

アラートを却下できるようにするには：

1. .alert-dismissibleクラスをアラートコンテナに追加します。
2. .btn-closeの閉じるボタン（ <button> ）を含めます。
3. data-bs-dismiss="alert"を使用して、JavaScriptベースの解雇を有効にします。

 <div class = "alert alert-info alert-disisisible show" role = "alert">
  <strong>情報！</strong>このアラートは閉じることができます。
  <button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "close"> </button>
</div>

重要なクラスと属性：

• alert-dismissible - 閉じるボタンのパディングを有効にし、適切に配置します。
• fade show - スムーズなフェードイン/フェードアウトトランジションに必要です（BootstrapのCSSトランジションを使用する場合）。
• data-bs-dismiss="alert" - JavaScriptの動作をトリガーして、クリックしたときにアラートを削除します。
• aria-label="Close" - アクセシビリティが向上します。

Alertアラートコンテキストの種類

さまざまなコンテキストスタイルを使用できます。

 <div class = "アラートアラート - アラートデジス可能なフェードショー「役割=" alert ">
  成功！操作が完了しました。
  <button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "close"> </button>
</div>

<div class = "alert alert-danger alert-disisisible show" role = "alert">
  エラー！何かがうまくいかなかった。
  <button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "close"> </button>
</div>

<div class = "アラートアラートwarning alert-disisisible show" role = "alert">
  警告！注意して進めてください。
  <button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "close"> </button>
</div>

optionalオプション：アイコンまたは追加コンテンツを追加します

アイコン（たとえば、ブートストラップアイコンから）または追加のフォーマットでアラートを強化できます。

 <div class = "alert alert-primary alert-sisisisible show" role = "alert">
  <i class = "bi bi-info-circle-fill"> </i>
  <strong>ヘッズアップ！</strong>この機能は実験的です。
  <button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "close"> </button>
</div>

アイコンを使用する場合は、必ずブートストラップアイコンまたは別のアイコンライブラリを含めてください。

✅JavaScriptイベント（オプション）

ブートストラップアラートは、次のようにフックできるイベントのトリガーをアラートします。

 const alert = document.queryselector（'。alert '）;
alert.addeventlistener（ 'closed.bs.alert'、function（）{
  console.log（ 'アラートが閉じられた'）;
}）;

アラートが却下された後にコードを実行する必要がある場合に便利です。

bootstrap JavaScriptが含まれていることを確認してください

却下可能なアラートを機能させるには、 BootstrapのJavaScriptバンドル（アラートプラグインを含む）を含める必要があります。

 <スクリプトsrc = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/boottrap.bundle.min.js"> </scrip>

これがなければ、 data-bs-dismiss="alert"機能しません。

基本的に、覚えておいてください：

• .alertコンテキストクラスを使用します
• .alert-dismissibleおよび.fade.showを追加します
• data-bs-dismiss="alert"に閉じるボタンを含める
• ブートストラップJSを含めます

そして、あなたのアラートは完全に機能し、却下されます。

以上がブートストラップアラートを使用して、それらを却下できるようにする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。