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"> ...
随机推荐
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- .NET涉及的一些名词
本文在最为概略的层次上对.NET涉及的一些名词进行解释, 包括: 通用语言基础架构(Common Language Infrastructure, CLI). 虚拟执行系统(Virtual Execu ...
- 16 On Large-Batch Training for Deep Learning: Generalization Gap and Sharp Minima 1609.04836v1
Nitish Shirish Keskar, Dheevatsa Mudigere, Jorge Nocedal, Mikhail Smelyanskiy, Ping Tak Peter Tang N ...
- start a new android studio project not working
现象:点击无响应 解决:Configure -> Project Defaults -> Project Structure -> Platform Settings (SDK) c ...
- wordpress导入模板数据
主题安装完成以后,如果有主题的DEMO数据(xml格式的)的话可以导入,导入后该有的页面与分类文章等等都会有了,这样子会节省很多时间,导入后只需要更改对应的页面与分类就可以了. 导入方法: 1. 在后 ...
- iOS开发之APP上线
APP 上线有两种途径: 一种是 Xcode->openDeveloperTool->applicationLoader,这种打开后登陆appleID就可以选取并且交付您的应用程序了.这种 ...
- 【Cocos2d-x 3.x】 调度器Scheduler类源码分析
非个人的全部理解,部分摘自cocos官网教程,感谢cocos官网. 在<CCScheduler.h>头文件中,定义了关于调度器的五个类:Timer,TimerTargetSelector, ...
- 小结MapReduce 程序的流程及设计思路
简单回顾一下,目前系统是WCF三层C/S插件系统.服务器端是WCF程序寄宿在IIS中,其中我的配置设计是长连接,客户端支持多线程,一个volatile的实例对象.客户端用Winform,其中客户端框架 ...
- 2016 、12 、11<本周>
翻了翻记录 想把上周没搞出来的1159和day2T2搞出来.
- first
不知道学啥,怎么办,写博客.找不到工作,怎么办,写博客.好吧,第一天博客完成.-渣渣米