Bootstrap4 Grundlehrbuch

Bootstrap4 Rollen-Überwachung Bootstrap4 Hinweisbox

Bootstrap4 Popup

Das Popup-Control ist ähnlich wie ein Hinweisfenster, es wird angezeigt, wenn der Mauszeiger auf das Element klickt, und unterscheidet sich von einem Hinweisfenster darin, dass es mehr Inhalt anzeigen kann.

Wie erstellt man Popups

Durch Hinzufügen von data an das Element-toggle="popover" Erstelle Popups hier.

Der Inhalt der title-Eigenschaft ist der Titel des Popups, data-Die content-Eigenschaft zeigt den Textinhalt des Popups an:

<a href="#" data-toggle="popover" title="Popup-Titel" data-content="Popupinhalt">Klicke mich mehrmals</a>

Achtung: Das Popup muss im jQuery-Initialisierungscode stehen: Rufen Sie dann die popover()-Methode auf dem angegebenen Element auf.

Nachfolgender Beispiel kann überall im Dokument ein Popup verwendet werden:

示例

!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>Popup-Fensterbeispiel</h2>
　　<a href="#" data-toggle="popover" title="Popup-Titel" data-content="Popupinhalt">Klicke mich mehrmals</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Bestimmung der Position des Popups

Standardmäßig wird das Popup in der rechten Seite des Elements angezeigt.

Kann data verwendet werden-Die 'placement'-Eigenschaft zur Bestimmung der Anzeigedirection des Popups: top, bottom, left oder right:

示例

!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>Popup-Fensterbeispiel</h2>　<br><br><br><br><br><br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="top" data-content="Content">Klicke mich</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="bottom" data-content="Content">Klicke mich</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="left" data-content="Content">Klicke mich</a>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-placement="right" data-content="Content">Klicke mich</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

In der Schaltfläche verwenden:

示例

!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>Popup-Fensterbeispiel</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 auf oben
	</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 auf rechts
	</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 auf unten
	</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 auf links
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Pop-up-Fenster schließen

Standardmäßig wird das Pop-up-Fenster geschlossen, wenn du auf den angegebenen Element erneut klickst, du kannst data-trigger="focus" Eigenschaft, um das Schließen des Pop-up-Fensters durch Klicken auf den Bereich außerhalb des Elements zu ermöglichen:

示例

!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>Popup-Fensterbeispiel</h2>　<br>
　　<a href="#" title="Pop-up-Fenster schließen" data-toggle="popover"　data-trigger="focus" data-content="Klicke auf einen anderen Teil des Dokuments, um mich zu schließen">Klicke mich</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Hinweis:Wenn du den Effekt möchtest, dass ein Element beim Mauszeigerbewegung über ihm angezeigt wird und verschwindet, wenn du das Mauszeigerbewegung entfernst, kannst du data-trigger Eigenschaft und setze den Wert auf "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>Popup-Fensterbeispiel</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="Einige Inhalte">Bewegen Sie den Mauszeiger darauf</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Rollen-Überwachung Bootstrap4 Hinweisbox