在bootstrap栅格系统中使用提示标签

作者(出处):百宝箱工作室发布时间:2018年4月13日 15:40:07查阅量:341

<!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-13
        	描述:提示标签
        	
        	tool	a标签的class带tool,表示应用提示标签。提示标签上显示的内容是a标签的title属性的值。
        	data-toggle="tooltip"	这个属性是与js交互用的,但我个人认为这个属性是可选的,不是必须的。
        	
        	data-placement="top"	提示标签出现在上方
        	data-placement="bottom"	提示标签出现在下方
        	data-placement="left"	提示标签出现在左边
        	data-placement="right"	提示标签出现在右边
        	
        	提示标签的js事件需要手动触发,也就是要在bootstrap.js文件后面增加下面这行代码才能触发js事件:
        	$('.tool').tooltip();			这行代码表示class为tool的标签显示tooltip
        	
        	如果有需求在网页加载后,一直到手动触发js的tooltip事件前,让提示标签一直显示,需要用下方这行代码:
        	$('.btnshow').tooltip('show');	这行代码表示class为btnshow的标签在浏览器加载网页之后一直显示tooltip
        -->
		<div class="container" style="margin-top: 50px;">
			<div class="row">
				<h4 class="modal-title">百宝箱网站建设与维护</h4>
				<p>如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟<a class="tool" data-placement="top" href="#" title="欢迎了解百宝箱工作室">百宝箱工作室</a>洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。<a href="#" class="tool" data-placement="left" title="百宝箱工作室网站维护业务">网站维护</a>收费标准:<a class="tool" data-placement="right" href="#" title="百宝箱工作室个人站业务">个人站</a>300元-600元/月、<a class="tool" data-placement="bottom" href="#" title="百宝箱工作室企业站业务">企业站</a>600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
			</div>
			<div class="row" style="margin-top: 40px;">
				<button class="btn btn-primary tool" data-toggle="tooltip" title="百宝箱工作室" data-placement="top">百宝箱工作室</button>
			</div>
			<div class="row" style="margin-top: 40px;">
				<button class="btn btn-primary tool" data-toggle="tooltip" title="百宝箱工作室" data-placement="left">百宝箱工作室</button>
			</div>
			<div class="row" style="margin-top: 40px;">
				<button class="btn btn-primary tool" data-toggle="tooltip" title="百宝箱工作室" data-placement="right">百宝箱工作室</button>
			</div>
			<div class="row" style="margin-top: 40px;">
				<button class="btn btn-primary tool btnshow" data-toggle="tooltip" title="百宝箱工作室" data-placement="bottom">百宝箱工作室</button>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<!--这个js代码一定要放在bootstrap.js的后面-->
		<script>
			<!--这行代码表示class为tool的标签显示tooltip-->
			$('.tool').tooltip();
			<!--这行代码表示class为btnshow的标签在浏览器加载网页之后一直显示tooltip-->
			$('.btnshow').tooltip('show');
		</script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2099
点击这里给我发消息