简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

ブートストラップで右側にフローティングボックスを実装する方法

WBOY
リリース： 2022-05-06 11:34:22
オリジナル
3009 人が閲覧しました

ブートストラップでは、ポップオーバー プラグインを使用して右側のフローティング ボックスを実現できます。このプラグインは拡張ビューを提供するために使用されます。フローティング ボックスの表示方向を設定できます。要素に「data-placement」属性を設定します。構文は「」です。

ブートストラップで右側にフローティングボックスを実装する方法

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

実装方法ブートストラップの右側のフローティング ボックス

ブートストラップ ポップアップ ボックス (Popover) プラグイン

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

使用法

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

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

    • 
    请悬停在我的上面
    ログイン後にコピー
  • JavaScript 経由: JavaScript 経由でポップオーバーを有効にする: 

    • $('#identifier').popover(options)
    ログイン後にコピー
ポップオーバー プラグイン ドロップダウン メニューなどとは異なります。プラグインは前述しましたが、純粋な CSS プラグインではありません。プラグインを使用するには、jquery (JavaScript を読み取る) を使用してプラグインを有効にする必要があります。次のスクリプトを使用して、ページ上のすべてのポップオーバーを有効にします。 

$(function () { $("[data-toggle='popover']").popover(); });
ログイン後にコピー

次の例は、データ属性を使用したポップオーバー プラグインの使用を示しています。 




 
Bootstrap 实例 - 弹出框（Popover）插件
ログイン後にコピー
出力結果:


ブートストラップで右側にフローティングボックスを実装する方法

関連する推奨事項:

ブートストラップ チュートリアル

以上がブートストラップで右側にフローティングボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap
ソース：php.cn
前の記事：重複を削除してes6配列を並べ替える方法 次の記事：ブートストラップでの aria とはどういう意味ですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Nuxt.js に jQuery をインストールする手順 プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
npm run devを実行した後でも、Laravel 9はまだApp.cssとApp.jsを見つけることができません Laravel は初めてなので、始める前に Laravel9 のドキュメントを必ずチェックしましたが、見逃した場合に備えて、artisan が提供するリンクに app.css と ...
から 2023-10-26 23:41:22
0
1
489
Bootstrap 4 のグリッド システム ブレークポイントをカスタマイズする デザインにデスクトップからタブレット、または xl から lg までそれぞれ 1280 個のブレークポイントが必要なアプリケーションがあります。ただし、Bootstrap 自体には...
から 2023-10-18 23:01:50
0
2
197
ヘッダー画像、テキスト、ボタンをレスポンシブにする方法 Bootstrap5を使ってWebサイトを作っています。ウェブサイトのヘッダーでは、Bootstrap のカルーセルをヘッダーに使用しています。カルーセル画像では、テキストやボタン...
から 2023-09-17 09:51:15
0
1
283
Bootstrap ナビゲーション バーが正しくレンダリングされないのはなぜですか? Bootstrap4 を使用してナビゲーション バーを作成しようとしていますが、コードが機能しないようです。私のコードはチュートリアルとほぼ同じですが、nav-brand にいくつ...
から 2023-09-16 16:14:06
0
1
522
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！