Bootstrap工具提示框
基本用法(data-toggle、data-placement)
1.新建一个web项目ch25，把ch24中css、js文件等复制过来。
2.打开ch25中的demo01.html，设置工具提示框的基本用法。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
<script language="JavaScript">
//如果一篇文章里放很多提示的时候
//只用声明式的话会导致页面性能存在问题。
$(function () {
$('[data-toggle="tooltip"]').tooltip();
//选择这个按钮，给它加了一个tooltip（）方法。
});
</script>
</head>
<body>
<div style=" margin: 200px;">
//容器内浏览器边界的距离是200像素
<button type="button" class="btn btn-danger" title="向左显示" data-toggle="tooltip" data-placement="left">向左</button>
//需要添加data-toggle和data-placement这两个属性。
//data-placement是决定提示框的方向
//当然加了这两个属性还是不起作用的，还要配合JavaScript一起来用，
<button type="button" class="btn btn-danger" title="向上显示" data-toggle="tooltip" data-placement="top">向上</button>
</div>
</body>
3.运行效果
Js用法
$(“select”).tooltip()
$(“select”).tooltip(‘show’)
$(“select”).tooltip(‘hide’)
$(“select”).tooltip(‘toggle’)
$(“select”).tooltip(‘option’)
1.复制demo01.html到新建的demo02.html中。
2.js用法实例(当点击“显示”这个button的时，显示“向左显示”和“向右显示”的提示框。）
<body>
<div style=" margin: 200px;">
<button type="button" class="btn btn-danger" title="向左显示" data-toggle="tooltip" data-placement="left">向左</button>
<button type="button" class="btn btn-danger" title="向上显示" data-toggle="tooltip" data-placement="top">向上</button>
<br/>
<button type="button" class="btn btn-danger" id="showbtn">显示</button>
</div>
</body>
3.运行效果
扫一扫
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
