Bootstrap4 Tutoriel de base

Bootstrap4 Écouteur de défilement Bootstrap4 Boîte de message

Bootstrap4 Boîte de dialogue

Le contrôle de la boîte de dialogue est similaire à la boîte de dialogue d'information, elle apparaît après un clic sur l'élément, contrairement à la boîte de dialogue d'information, elle peut afficher plus de contenu.

Comment créer une boîte de dialogue

En ajoutant data-toggle="popover" Créons une boîte de dialogue.

Le contenu de l'attribut 'title' est le titre de la boîte de dialogue, data-L'attribut 'content' affiche le texte du contenu de la boîte de dialogue :

<a href="#" data-toggle="popover" title="titre de la boîte de dialogue" data-content="contenu de la boîte de dialogue">Cliquez-moi plusieurs fois</a>

Attention : La boîte de dialogue doit être écrite dans le code d'initialisation de jQuery : puis appeler la méthode popover() sur l'élément spécifié.

Les exemples suivants peuvent être utilisés partout dans le document :

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemple de boîte de dialogue</h2>
　　<a href="#" data-toggle="popover" title="titre de la boîte de dialogue" data-content="contenu de la boîte de dialogue">Cliquez-moi plusieurs fois</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Spécifier la position de la boîte de dialogue

Par défaut, la boîte de dialogue s'affiche à droite de l'élément.

Il est possible d'utiliser data-L'attribut 'placement' pour définir la direction de display de la boîte de dialogue: haut, bas, gauche ou droite:

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemple de boîte de dialogue</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top" data-content="Content">点我</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="bottom" data-content="Content">点我</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="left" data-content="Content">点我</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="right" data-content="Content">点我</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

按钮中使用:

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemple de boîte de dialogue</h2>　<br><br><br><br><br><br>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover on top
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover on right
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="bottom" data-content="Vivamus
	sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover on bottom
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"　data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover on left
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

关闭弹出框

默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框：

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemple de boîte de dialogue</h2>　<br>
　　<a href="#" title="取消弹出框" data-toggle="popover"　data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover":

示例

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Exemple de boîte de dialogue</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="Un certain contenu">Cliquez ici pour me déplacer</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Bootstrap4 Écouteur de défilement Bootstrap4 Boîte de message