bootstrap-提示标签、提示框
提示标签:
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<p>
<a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="用来开发网站的">java</a>
一种语言
</p>
<p>
<a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="用来开发网站的">java</a>
一种语言
</p>
</div>
<div class="col-lg-6">
<p>
<a href="#" class="tool" data-toggle="tooltip" data-placement="left" title="用来开发网站的">java</a>
一种语言
</p>
<p>
<a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="用来开发网站的">java</a>
一种语言
</p>
</div>
</div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
//$('.tool').tooltip();
$('.tool').tooltip('show'); $('.tool').on('hidden.bs.tooltip', function () {
alert('隐藏了');
})
</script>
</body>
效果:
提示框:
<body>
<div class="container">
<div class="row">
<!--这边用的hover触发的-->
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" data-delay='{"show": 1000, "hide": 1000 }' data-trigger="hover">Click to toggle popover</button>
</div>
</div> <script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('.btn').popover('show');
})
</script>
</body>
效果:
bootstrap-提示标签、提示框的更多相关文章
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法
一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...
- 关于eclipse使用thymeleaf时,提示标签不显示及后续问题的解方法
因为thymeleaf 使用快捷键提示,不提示标签信息. 在使用网上说的的install new software安装插件的时候 报错: Unable to read repository at ht ...
- BarTender中每个标签提示手动输入的设置方法
我们知道手动输入数据进行标签打印,可以利用BarTender中的数据输入表单来实现.表单的创建有利于提示程序员,输入要打印标签的的数据.如果手动输入数据的标签较多,可以设置表单提示为每个标签提示,减去 ...
- textarea标签提示录入剩余字数
textarea标签提示录入剩余字数 <textarea onkeydown="checkMaxInput(this,300)" onkeyup="checkMax ...
- JSTL标签提示:"items" does not support runtime expressions
今天在使用JSTL的 c:forEach 标签时,jsp提示:"items" does not support runtime expressions,后来才发现是因为taglib ...
- bootstrap基本标签总结2
[布局]bootstrap基本标签总结2 缩略图 <div class="container"> <div class="row"> ...
随机推荐
- Xcode6中如何使用自定义的类模板
说到IOS类的模板,有些人感觉很陌生,但是只要有开发过IOS程序的人,其实都用过类的模板,只不过是用的系统自带的类的模板. 例如创建一个ClassTemplateVC继承于UIViewControll ...
- C++学习笔记29:运行期型式信息2
static_cast 静态转型的用途 与dynamic_cast不同,static_cast不仅可以用于指针和引用,还可以用于其他型式 一般用于非类型式的普通数据对象转型 静态转型的问题 不进行运行 ...
- import pysam 出错解决办法
安装pysam后,import之,结果,出现报错: Library not loaded: libcurl.4.dylib 尝试很多办法,最终发现应当这样解决: # 首先重装curl brew ins ...
- 分布式事务(一)两阶段提交及JTA
原创文章,同步发自作者个人博客 http://www.jasongj.com/big_data/two_phase_commit/ 分布式事务 分布式事务简介 分布式事务是指会涉及到操作多个数据库(或 ...
- 如何配置Windows 防火墙,允许SQL Server的远程连接
一.如何找到SQL Server正在侦听的TCP端口,可以按一下步骤: 1.打开 SQL Server 配置管理器中,从开始->所有程序-> Microsoft SQL Server 20 ...
- iOS中常用的设计模式
常用的设计模式(一)代理模式应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则:开放-封闭原则实例:tableview的 数据源delegate,通过 ...
- groupspecWidhoutAuthorizations与groupspecWidthAuthorizations的区别
GroupSpecifier是一个用来定义group所有参数的类.首先,将它命名为“myGroup/g1”.然后设置 serverChannel与Stratus进行沟通.最后发布.这样,我们就完成了P ...
- 数论 UVALive 2911
这道题是一道数论题. 题目的意思是告诉m.p.a.b,并且告诉你xi满足的两个条件.让你求出 xp1 + xp2 +...+ xpm 的最大值(其中p<=12,切p是偶数). 这里需要对于xi所 ...
- JS的字符串处理
1.字符串包含判断 var a = "qwer"; var b = "q"; if (a.contains(b)) { alert("1") ...
- 解决Type 'UnityEngine.Component' does not support slicing
unity从4.x升级到5.x后部分脚本的编译错误 将animation改成GetComponent.<Animation>()