Comment utiliser les info-bulles dans Bootstrap ? Une brève analyse de l'utilisation des composants d'invite

Comment utiliser l'info-bulle dans

Bootstrap? L'article suivant vous présentera l'utilisation des invites contextuelles et des composants d'info-bulles dans Bootstrap5. J'espère qu'il vous sera utile !

Parlons de deux contrôles : Popovers et Tooltips. Ces deux composants ont une seule fonction et sont très simples à utiliser. Ils présentent de nombreuses similitudes. [Recommandations associées : "Tutoriel bootstrap"]

Popovers (Popovers)

1 Exemple

1.1 Notes

Choses à noter lors de l'utilisation du plug-in popover :

• Il doit s'appuyer sur bootstrap.bundle.min.js fonctionnera !
• Pour des raisons de performances, les popovers sont facultatifs, vous devez donc les initialiser vous-même.

1.2 Activer les popovers partout

Une façon d'initialiser tous les popovers sur une page est de les sélectionner via leur attribut data-bs-toggle :

         
  
 



  点此按钮弹出提示  
    

1.3 Utiliser l'option conteneur

Lorsque certains les styles sur l'élément parent interfèrent avec le popover, vous devez spécifier un conteneur personnalisé pour que le code HTML du popover apparaisse dans cet élément. Il n'y a aucune différence d'affichage entre celui-ci et celui ci-dessus, sauf qu'un exemple de popover est ajouté à la classe du bouton.

         
  
 



  点此按钮弹出提示  
    

Vous pouvez également utiliser id, qui semble plus compréhensible

         
  
 



  点此按钮弹出提示  
    

2 Changer la direction de la fenêtre contextuelle

Nous pouvons faire en sorte que les informations d'invite contextuelle soient dans quatre directions : haut, droite, bas, gauche. Il est également très simple à utiliser. Il vous suffit d'ajouter data-bs-placement="position" à l'attribut du bouton, où la position peut être en haut, en bas, à gauche ou à droite.

Il convient de noter que l'emplacement à afficher doit disposer de suffisamment d'espace, sinon il trouvera automatiquement un emplacement approprié. Si vous le configurez pour qu'il soit affiché en haut, mais que le haut est déjà en haut du navigateur, il sera affiché en bas.

         
  
 



  默认   上部   下部   左侧   右侧  
    

3 Fermez à nouveau n'importe où

Par défaut, cliquez sur le bouton pour afficher le message d'invite, cliquez à nouveau sur le bouton pour masquer le message, sinon le message sera toujours affiché. Si nous voulons cliquer à nouveau n'importe où pour fermer les informations d'invite précédemment affichées, nous devons ajouter undata-bs-trigger="focus"属性，并在js文件中增加trigger: 'focus'au bouton.

Pour obtenir un comportement multi-navigateur et multi-plateforme correct, la balise a doit être utilisée à la place de la balise bouton, et l'attribut tabindex doit également être inclus.

         
  
 



  点此按钮弹出提示，点击空白处提示消失  
    

Tooltips

Tooltips sont très similaires aux Popovers. Ils sont également chargés en option et doivent être initialisés par vous-même. Son affichage sera également Ajustez automatiquement en fonction de l'espace réservé. Contrairement aux info-bulles contextuelles, les info-bulles s'afficheront lorsque la souris survolera le bouton et se masqueront automatiquement lorsque la souris sera éloignée, sans qu'il soit nécessaire de cliquer.

1 Le code efficace de l'info-bulle

est fondamentalement similaire à l'invite contextuelle. Ce code doit être inclus dans la page pour que l'info-bulle prenne effet.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })

2 Exemple d'info-bulle

Les info-bulles sont généralement utilisées sur les boutons et les liens pour expliquer leurs fonctions, et bien sûr peuvent également être utilisées sur des images. La valeur du titre est le contenu affiché lorsque la souris survole et vous pouvez utiliser des éléments HTML.

Le lien a un attribut de titre par défaut et son texte d'invite est affiché dans la barre d'état du navigateur. Cet affichage est plus intuitif.

         
  
 



  按钮提示  链接提示 
    

3 Position d'affichage de l'info-bulle

prend en charge quatre directions d'info-bulle, comme les astuces de la fenêtre contextuelle, qui sont en haut, en bas, à gauche et à droite.

         
  
 



  顶部提示   右侧提示   底部提示   左侧提示  
    

4 est utilisé pour les invites dans les articles

         
  
 



 
 
 最近B站 是迎来了自己12周年的纪念日， 之前吧，B站做过好些流行语盘点， 比如“awsl”一类的词，不少朋友都刷过，甚至有的梗还出圈了， 像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。 
 
 
    

peut être combiné avec des classes communes pour créer plus d'effets

Les parties de texte des deux invites peuvent utiliser les classes communes de HTML et de bootstrap , définissez l'espacement, la typographie, les polices, les couleurs, etc., vous pouvez l'essayer vous-même pour créer des effets plus sympas.

Pour plus de connaissances sur le bootstrap, veuillez visiter :Tutoriel de base 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!