Bootstrap 5のエクストララージモーダルの使い方

2024-02-16 09:15 Bootstrap 5 モーダル エクストララージ

エクストララージモーダルは、大きなコンテンツを表示するのに適しています。以下に、エクストララージモーダルを使用するためのシンプルで簡単な手順を示します。

  1. 必要なファイルのインクルード: Bootstrap 5のCSSとJavaScriptファイルをHTMLファイルにインクルードします。以下のCDNを使用することで簡単にファイルを取得できます。

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  2. モーダルの作成: エクストララージモーダルを作成するために、以下のようなHTMLコードを使用します。

    <div class="modal-dialog modal-xl">
 <div class="modal-content">
   <!-- モーダルのコンテンツをここに追加 -->
 </div>
</div>

    modal-dialogクラスにmodal-xlクラスを追加することで、エクストララージモーダルを作成できます。

  3. モーダルのトリガー: モーダルを表示するためには、トリガーとなる要素が必要です。例えば、ボタンをクリックした時にモーダルを表示する場合、以下のようなコードを使用します。

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 モーダルを開く
</button>

    data-bs-toggle="modal"属性とdata-bs-target="#exampleModal"属性を設定することで、ボタンがモーダルのトリガーになります。

以上の手順に従うことで、Bootstrap 5のエクストララージモーダルを簡単に作成し、コンテンツを表示することができます。この方法を使用することで、ユーザーとの対話的なコンテンツ表示を実現できます。