Bootstrap4 基本チュートリアル

Bootstrap4 スクロールリスナー Bootstrap4 アラートボックス

Bootstrap4 ポップアップ

ポップアップコントロールはポップアップウィンドウに似ており、要素をクリックした後に表示されます。ポップアップウィンドウとは異なり、より多くの内容を表示できます。

ポップアップを作成する方法

要素にdataを追加することで-toggle="popover" ポップアップを作成しましょう。

title属性の内容はポップアップのタイトルです、data-content属性はポップアップのテキスト内容を表示します：

<a href="#" data-toggle="popover" title="ポップアップのタイトル" data-content="ポップアップの内容">を何度もクリックしてください</a>

注意: ポップアップはjQueryの初期化コードに書かれます: 然後指定された要素でpopover()メソッドを呼び出します。

以下の例は、ドキュメントのどこでもポップアップを使用できます：

示例

!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>ポップアップボックス例</h2>
　　<a href="#" data-toggle="popover" title="ポップアップのタイトル" data-content="ポップアップの内容">を何度もクリックしてください</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

テストを見てみましょう ‹/›

ポップアップの位置を指定します

デフォルトでは、ポップアップが要素の右側に表示されます。

dataを使用できます-プレースメント属性を使用してポップアップの表示方向を設定します: top、bottom、left、または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>ポップアップボックス例</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>

テストを見てみましょう ‹/›

按钮中使用:

示例

!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>ポップアップボックス例</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>

テストを見てみましょう ‹/›

关闭弹出框

默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 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>ポップアップボックス例</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>

テストを見てみましょう ‹/›

提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 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>ポップアップボックス例</h2>　<br>
　　<a　href="#"　title="Header"　data-toggle="popover"　data-trigger="hover"　data-content="一些内容">マウスをここに移動して</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>

テストを見てみましょう ‹/›

Bootstrap4 スクロールリスナー Bootstrap4 アラートボックス