电商二十五、Bootstrap的data-toggle="modal"、data-toggle="popover"、data-toggle="tooltips" data-target=“#id值”

最新推荐文章于 2021-12-17 13:57:01 发布

详见附件

最新推荐文章于 2021-12-17 13:57:01 发布

阅读量2k

点赞数

分类专栏：电商-------基于ssm框架大型分布式电商系统开发文章标签：电商二十五、Bootstrap的data-toggle=&quot;m

本文链接：https://blog.csdn.net/lbh19630726/article/details/99197906

版权

电商-------基于ssm框架大型分布式电商系统开发专栏收录该内容

73 篇文章 3 订阅

订阅专栏

①bootstrap的data-toggle="modal" data-target=“#弹出窗口（div）的id”

新建一个文件夹：bootstrapdemo文件夹

引入bootstrap.min.js文件

新建文件bootstrap-modal.html

引入bootstrap.min.css文件和jquery-2.2.3.min.js文件

文件bootstrap-modal.html的内容为：

<html>
<head>
<title>bootstrap小demo  data-toggle="modal"</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<button type="button" data-toggle="modal" data-target="#modal"> <i class="fa fa-user-plus m-r-sm text-md"></i>添加</button> 
<div class="modal fade" tabindex="-1" role="dialog" id="modal"  aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog" >
 <div class="modal-content">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

用浏览器方式打开文件bootstrap-modal.html

点击添加按钮

弹出窗口

②bootstrap的data-toggle="popover"

data-placement="top"、"bottom"、"left"、"right"

新建文件bootstrap-popover.html

文件bootstrap-popover.html的内容为：

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<titlebootstrap小demo  data-toggle="popover"</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 100px 50px 10px;" >
	<button type="button" class="btn btn-default" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="left" 
			data-content="左侧的 Popover 中的一些内容">
		左侧的 Popover
	</button>
	<button type="button" class="btn btn-primary" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="top" 
			data-content="顶部的 Popover 中的一些内容">
		顶部的 Popover
	</button>
	<button type="button" class="btn btn-success" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="bottom" 
			data-content="底部的 Popover 中的一些内容">
		底部的 Popover
	</button>
	<button type="button" class="btn btn-warning" title="Popover title"  
			data-container="body" data-toggle="popover" data-placement="right" 
			data-content="右侧的 Popover 中的一些内容">
		右侧的 Popover
	</button>
</div>
<script>
$(function () { 
	$("[data-toggle='popover']").popover();
});
</script>

</body>
</html>

测试结果：

用浏览器方式打开文件bootstrap-popover.html

点击按钮出现如下情景：

如果出现乱码，利用软件，打开文件bootstrap-popover.html，

File->Save As

③bootstrap的data-toggle="tooltip"

data-placement="top"、"bottom"、"left"、"right"

新建文件bootstrap-tooltip.html的内容为：

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<titlebootstrap小demo  data-toggle="tooltip"</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>

<h4>工具提示（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>
<br>
<h4>工具提示（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>
<script>
	$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

</body>
</html>

用浏览器方式打开文件bootstrap-tooltip.html，结果为：

鼠标放在上面，不点击，也有泡泡窗口出现。

详见附件

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
电商二十五、Bootstrap的data-toggle="modal"、data-toggle="popover"、data-toggle="tooltips" data-target=“#id值”

①bootstrap的data-toggle="modal" data-target=“#弹出窗口（div）的id”新建一个文件夹：bootstrapdemo文件夹引入bootstrap.min.js文件新建文件bootstrap-modal.html引入bootstrap.min.css文件和jquery-2.2.3.min.js文件文件bootstrap...
复制链接

扫一扫