Maison > interface Web > Tutoriel d'amorçage > le corps du texte

A quoi sert le popover dans le bootstrap ?

WBOY
Libérer: 2021-12-29 15:55:57
original
2781 Les gens l'ont consulté

Dans bootstrap, le plug-in popover est utilisé pour générer une boîte contextuelle avec le contenu et les balises spécifiés. Vous pouvez utiliser l'attribut data et JavaScript pour ajouter une boîte contextuelle. La syntaxe est "data-toggle=". popover"" et "$(element).popover(" respectivement. options)".

A quoi sert le popover dans le bootstrap ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version bootstrap 3.3.7, ordinateur DELL G3

Quelle est l'utilisation du popover dans le bootstrap

Le popover est similaire à l'info-bulle fournie ? une vue élargie. Pour activer le popover, les utilisateurs survolent simplement l'élément. Le contenu de la boîte contextuelle peut être entièrement rempli à l'aide de l'API Bootstrap Data. Cette méthode s'appuie sur des info-bulles.

Les plug-ins Popover génèrent du contenu et du balisage à la demande. Par défaut, les popovers sont placés derrière leurs éléments déclencheurs. Vous pouvez ajouter un popover de deux manières :

Grâce à l'attribut data : Pour ajouter un popover, ajoutez simplement data-toggle="popover" à une balise d'ancrage/bouton. Le titre de l'ancre est le texte du popover. Par défaut, le plugin place le popover en haut.

Un exemple est le suivant :

<a href="#" data-toggle="popover" title="Example popover">    请悬停在我的上面</a>
Copier après la connexion

Via JavaScript : Activer le popover via JavaScript :

Un exemple est le suivant :

$(&#39;#identifier&#39;).popover(options)
Copier après la connexion

Le plug-in popover n'est pas un pur pop-up comme les menus déroulants et autres plug-ins discutés précédemment. Pour utiliser le plugin, vous devez l'activer en utilisant jquery (lire javascript). Utilisez le script suivant pour activer tous les popovers sur la page :

$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });
Copier après la connexion

Apprentissage recommandé : "Tutoriel d'utilisation de bootstrap"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal