ブートストラップでのポップオーバーの使用法は何ですか?

ブートストラップでは、ポップオーバー プラグインを使用して、指定したコンテンツとタグを含むポップアップ ボックスを生成します。data 属性と JavaScript を使用して、ポップアップ ボックスを追加できます。構文は「data」です。 -toggle="popover"" および "$(element ).popover(options)"。

このチュートリアルの動作環境: Windows 7 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップのポップオーバー 使用方法

ポップオーバーはツールチップに似ており、展開されたビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素の上にマウスを移動するだけです。ポップアップ ボックスの内容はすべて、Bootstrap Data API を使用して入力できます。この方法はツールチップに依存します。

ポップオーバー プラグインは、オンデマンドでコンテンツとマークアップを生成します。デフォルトでは、ポップオーバーはトリガー要素の後ろに配置されます。ポップオーバーは 2 つの方法で追加できます:

data 属性を使用します: ポップオーバーを追加するには、data-toggle="popover" をアンカー/ボタン タグに追加するだけです。アンカーのタイトルはポップオーバーのテキストです。デフォルトでは、プラグインはポップオーバーを上部に配置します。

例は次のとおりです:

<a href="#" data-toggle="popover" title="Example popover">    请悬停在我的上面</a>

JavaScript 経由: JavaScript 経由でポップオーバーを有効にする:

例は次のとおりです:

$('#identifier').popover(options)

ポップオーバー プラグイン前述のドロップダウン メニューや他のプラグインとは異なり、これは純粋な CSS プラグインではありません。プラグインを使用するには、jquery (JavaScript を読み取る) を使用してプラグインを有効にする必要があります。次のスクリプトを使用して、ページ上のすべてのポップオーバーを有効にします:

$(function () { $("[data-toggle='popover']").popover(); });

推奨学習: 「ブートストラップの使用法チュートリアル」

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