首先讲一讲<强>提示框(提示)的使用方法
样式文件:
少版本:对应源文件tooltips.less
& lt;风格id=癹sbin-css”比;
身体{
填充:100 px;
}
.btn {
保证金:20 px 10 px 20 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; h4>按钮做的提示框& lt;/h4>
& lt;按钮类型=鞍磁ァ?
类=" btn btn-default "
data-toggle="提示"
数据放置=白蟆?
data-original-title="提示框居左”
title=氨?
提示框居左
& lt;/button>
& lt;按钮类型=鞍磁ァ?
类=" btn btn-default "
data-toggle="提示"
数据放置="顶级"
data-original-title="提示框在顶部”比;
提示框在顶部
& lt;/button>
& lt;按钮类型=鞍磁ァ?
类=" btn btn-default "
data-toggle="提示"
数据放置="底"
data-original-title="提示框在底部”比;
提示框在底部
& lt;/button>
& lt;按钮类型=鞍磁ァ?
类=" btn btn-default "
data-toggle="提示"
数据放置=罢贰?
data-original-title="提示框居右”比;
提示框居右
& lt;/button>
& lt; h4>链接制作的提示框& lt;/h4>
& lt;一个类=" btn btn-primary "
data-toggle="提示"
数据放置=白蟆?
title=疤崾究蚓幼蟆北?
提示框居左
& lt;/a>
& lt;一个类=" btn btn-primary "
data-toggle="提示"
数据放置="顶级"
title=疤崾究蛟诙ゲ俊北?
提示框在顶部
& lt;/a>
& lt;一个类=" btn btn-primary "
data-toggle="提示"
数据放置="底"
title=疤崾究蛟诘撞俊北?
提示框在底部
& lt;/a>
& lt;一个类=" btn btn-primary "
data-toggle="提示"
数据放置=罢贰?
title=疤崾究蛟诰佑摇北?
提示框居右
& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/# #”
类=" btn btn-primary "
id=" myTooltip "比;
我是提示框
& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/# #”
类=" btn btn-primary "
id=" myTooltip2 "比;
我是提示框2
& lt;/a>
& lt;脚本src=" http://libs.baidu.com/jquery/1.9.0/jquery.js "祝辞& lt;/script>
& lt;脚本src=" http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js "祝辞& lt;/script>
& lt; script>
$(函数(){//添加提示框的事件
$ (“[data-toggle="提示"]”).tooltip ();//能过js来更改提示框
$ (' # myTooltip ') .tooltip ({
标题:“我是一个提示框,我在顶部出现”,
位置:“顶”
}）;
}）;
& lt;/script>
之前
通过标题属性的值来定义提示信息(也可以使用自定义属性data-original-title来设置提示信息)。
通过数据放置自定义属性来控制提示信息框的位置,根据四种不同的位置,数据放置具有四个值:,,底部和左,分别表示提示框出现的位置在顶部,右边、底部和左边。
还有一个最重要的参数不可缺少,data-toggle="提示" .
需要特别注意的是:
1,如果同时设置了data-original-title和标题定义提示信息,那么data-original-title的优先级要高于标题。只有data-original-title值为空时,才会取标题的值做为提示信息的内容。
2,引导框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性数据——来触发。必须得依赖于JavaScript的代码触发。
提示框——其他的自定义属性
提示框js设置参数方法
<强>弹出框(窗)
强不同的是:弹出框除了有标题标题以外还增加了内容内容部分。这个在提示框中是没有的。
样式文件:
& # 9745;少版本:对应的源文件是popovers.less
& lt;按钮类型=鞍磁ァ崩?" btn btn-default " id=癿yPopover祝辞猛击我吧& lt;/button>
& lt;脚本src=" http://libs.baidu.com/jquery/1.9.0/jquery.js "祝辞& lt;/script>
& lt;脚本src=" http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js "祝辞& lt;/script>
& lt; script>
$(函数(){
$ (' # myPopover ') .popover ({
标题:“我是弹出框的标题”,
内容:“我是弹出框的内容”,
位置:“正确”
}）;
}）;
& lt;/script>
