ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップ モーダル ボックスの用途は何ですか?

ブートストラップ モーダル ボックスの用途は何ですか?

(*-*)浩
(*-*)浩オリジナル
2019-07-10 14:21:412399ブラウズ

ブートストラップ モーダル (モーダル ボックス) は、カスタム Jquery プラグインを使用して作成されます。

ブートストラップ モーダル ボックスの用途は何ですか?

モーダル ウィンドウを作成してユーザー エクスペリエンスを強化したり、実用的な機能をユーザーに追加したりするために使用できます。ポップオーバーとツールチップをモーダルで使用できます。 (推奨学習: Bootstrap ビデオ チュートリアル )

では、いくつかの例と説明を通じて、Bootstrap を使用してモーダル ウィンドウを作成する方法について説明します。カスタマイズに利用できるさまざまなオプションについても説明します。

Jquery、Bootstrap CSS、および JavaScript ファイル bootstrap-modal.js が必要です。この js ファイルは、作成した Bootstrap ダウンロードのメイン フォルダー内の js フォルダーにあります。

Jquery は、Bootstrap ホーム フォルダーの docs >assets > js にあり、jquery.js という名前です。または、https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js に直接アクセスして Jquery をダウンロードすることもできます。

ブートストラップ モーダル (モーダル ボックス) はどのようなものですか

#次の例は、ブートストラップ モーダル (モーダル ボックス) がどのようなものかを示しています。

ブートストラップ モーダル ボックスの用途は何ですか?

Web サイトでブートストラップ モーダル (モーダル ボックス) を使用する

次の例は、Web ページでブートストラップ モーダル (モーダル ボックス) を使用する方法を示しています。モーダル。 JavaScript コードを記述する必要はないことに注意してください。

<div>
    <h2>使用Bootstrap创建模态框</h2>
    <div>
        <div>
            <a>×</a>
            <h3>这是一个模态框标题</h3>
        </div>
        <div>
            <h4>模态框中的文本</h4>
            <p>你可以在这添加一些文本。</p>
        </div>
        <div>
            <a>唤醒活动</a>
            <a>关闭</a>
        </div>
    </div>
    <p><a>发动演示模态框</a></p>
</div>
<script></script>
<script></script>

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップ モーダル ボックスの用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。