Maison > Article > interface Web > Existe-t-il une couche contextuelle dans le bootstrap ?
Existe-t-il une couche contextuelle dans le bootstrap ?
- WBOYoriginal
- 2022-06-16 15:57:001874parcourir
Il existe une couche contextuelle dans bootstrap ; vous pouvez utiliser le plug-in Popover pour implémenter la couche contextuelle. Le plug-in peut générer du contenu et des balises spécifiés en fonction des besoins, et placer le contenu généré dans la fenêtre contextuelle. -boîte contextuelle déclenchée par l'élément spécifié. La syntaxe d'activation de la boîte contextuelle est " ElementObject.popover(options)".
L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3
Y a-t-il une couche pop-up dans bootstrap
La boîte pop-up (Popover) est similaire au pop-up ? info-bulle (Tooltip), offrant une vue développée. 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.
Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer popover.js, qui dépend du plugin Tooltip. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou une version minifiée de bootstrap.min.js.
Utilisation
Le plug-in popover génère du contenu et du balisage en fonction des besoins. 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.
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>Via JavaScript : Activer le popover via JavaScript :
$('#identifier').popover(options)
Le plugin popover n'est pas un plugin CSS pur comme les menus déroulants et autres plugins évoqué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 de la page :
$(function () { $("[data-toggle='popover']").popover(); }); L'exemple est le suivant :
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>Résultat de sortie :
Recommandations associées : tutoriel 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!