在bootstrap栅格系统中使用提示框(实例)

作者(出处):百宝箱工作室发布时间:2018年4月14日 18:02:32查阅量:156

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body>
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-14
        	描述:提示框
        	
        	提示框含有标题和内容,标题写在标签的title属性值里面,内容写在标签的data-content属性值里面。
        	data-toggle="popover"	这个属性是与js交互用的,但我个人认为这个属性是可选的,不是必须的。
        	
        	data-placement="top"	提示框出现在上方
        	data-placement="bottom"	提示框出现在下方
        	data-placement="left"	提示框出现在左边
        	data-placement="right"	提示框出现在右边
        	
        	提示框的js事件需要手动触发,也就是要在bootstrap.js文件后面增加下面这行代码才能触发js事件:
        	$('.btn').popover();			这行代码表示class为btn的标签显示提示框
        	
        	如果有需求在网页加载后,一直到手动触发js的popover事件前,让提示框一直显示,需要用下方这行代码:
        	$('.btnshow').popover('show');	这行代码表示class为btnshow的标签在浏览器加载网页之后一直显示提示框
        -->
		<div class="container">
			<div class="row" style="margin-top: 100px;">
				<button class="btn btn-primary" data-placement="top" title="弹出框的标题" data-content="弹出框的内容,内容可以很长">演示在上方弹出框</button>
			</div>
			<div class="row" style="margin-top: 50px;margin-left: 100px;">
				<button class="btn btn-primary" data-placement="left" title="弹出框的标题" data-content="弹出框的内容,内容可以很长">演示在左边弹出框</button>
			</div>
			<div class="row" style="margin-top: 50px;">
				<button class="btn btn-primary" data-toggle="popover" data-placement="right" title="弹出框的标题" data-content="弹出框的内容,内容可以很长">演示在右边弹出框</button>
			</div>
			<div class="row" style="margin-top: 10px;">
				<button class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="弹出框的标题" data-content="弹出框的内容,内容可以很长">演示在下方弹出框</button>
			</div>
			<div class="row" style="margin-top: 90px;">
				<button class="btn btn-primary btnshow" data-toggle="popover" data-placement="bottom" title="弹出框的标题" data-content="弹出框的内容,内容可以很长">演示在下方弹出框</button>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<script>
			<!--这行代码表示class为btn的标签显示提示框-->
			$('.btn').popover();
			<!--这行代码表示class为btnshow的标签在浏览器加载网页之后一直显示提示框-->
			$('.btnshow').popover('show');
		</script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息