Maison > Article > interface Web > Comment utiliser les info-bulles dans Bootstrap ? Une brève analyse de l'utilisation des composants d'invite
Comment utiliser les info-bulles dans Bootstrap ? Une brève analyse de l'utilisation des composants d'invite
- 青灯夜游avant
- 2021-12-07 19:12:483365parcourir
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 :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
点此按钮弹出提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
class="btn btn-lg btn-danger example-popover"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
点此按钮弹出提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
</script>
</body>
</html>Vous pouvez également utiliser id, qui semble plus compréhensible
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
id="example-popover"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
点此按钮弹出提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popover = new bootstrap.Popover(document.querySelector('#example-popover'), {
container: 'body'
})
</script>
</body>
</html>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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
默认
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="top"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
上部
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="bottom"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
下部
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="left"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
左侧
</button>
<button type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-placement="right"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！">
右侧
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
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 un data-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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>Popovers</title>
</head>
<body>
<div>
<br><br><br><br>
<a tabindex="0"
class="btn btn-lg btn-danger"
role="button" data-bs-toggle="popover"
data-bs-trigger="focus"
title="提示标题"
data-bs-content="你想告诉别人些什么提示？你可以写在这里！" >
点此按钮弹出提示，点击空白处提示消失
</a>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
trigger: 'focus'
})
</script>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>工具提示</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="这个是按钮提示">
按钮提示
</button>
<a href="#" data-bs-toggle="tooltip" title="这个是链接提示">链接提示</a>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="顶部提示">
顶部提示
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示">
右侧提示
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部提示">
底部提示
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="左侧提示">
左侧提示
</button>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
4 est utilisé pour les invites dans les articles
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>吐司消息</title>
</head>
<body>
<div>
<br><br><br><br>
<div class="bd-example tooltip-demo">
<p>
最近<a href="#" data-bs-toggle="tooltip" title="哔哩哔哩">B站</a> 是迎来了自己12周年的纪念日，
之前吧，B站做过好些<a href="#" data-bs-toggle="tooltip" title="点此查看流行语盘点内容">流行语盘点</a>，
比如“awsl”一类的词，不少朋友都刷过，甚至有的<a href="#" data-bs-toggle="tooltip" title="相当于现代典故">梗</a>还出圈了，
像是后那个什么浪一类的，我留意到B站官方很多时候还会做一些相关的科普盘点啥的，时不时有推送。
</p>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
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!
Articles Liés
Voir plus- Une brève discussion sur la façon de trier et de décaler les colonnes dans la disposition de la grille Bootstrap
- Parlons du composant image et du composant contour dans Bootstrap
- Comment ajouter des composants de navigation et des composants d'onglets dans Bootstrap ? Une brève analyse de l'utilisation
- Comment ajouter un fil d'Ariane dans Bootstrap ? Brève analyse des méthodes
- Explication détaillée de la façon d'utiliser le composant de boîte d'avertissement dans Bootstrap
- Une explication détaillée de la façon d'utiliser le composant Card dans Bootstrap