文档章节

bootsrap 提示框

之渊
 之渊
发布于 2017/04/24 20:34
字数 397
阅读 57
收藏 0
点赞 0
评论 0

提示框:

在Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框,他们都有一个共性:

通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。
通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边。
还有一个最重要的参数不可缺少,data-toggle="tooltip"。

<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="left" 
        data-original-title="提示框居左">
        提示框居左
</button>
<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="top" 
        data-original-title="提示框在顶部">
        提示框在顶部
</button>
<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="bottom" 
        data-original-title="提示框在底部">
        提示框在底部
</button>
<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="right" 
        data-original-title="提示框居右">
        提示框居右
</button>

1、如果同时设置了 data-original-title 和 title 定义提示信息,那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时,才会取 title 的值做为提示信息的内容。

2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

JS 调用:

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

或者

$(function(){
    $('#myTooltip').tooltip({
       title:"我是一个提示框,我在顶部出现",
       placement:'top'
    });
});

© 著作权归作者所有

共有 人打赏支持
之渊
粉丝 11
博文 492
码字总数 143231
作品 0
佛山
程序员
毕业就快1年了,开源一个简单的个人博客,纪念自己逝去的青春

项目采用了spring,springmvc,lucene,bootsrap等开源框架,代码量不多,适合刚入门的新手瞅瞅 先上项目链接 http://git.oschina.net/luosl/akhasi 然后是演示地址 http://www.tnmao.com/akhasi/...

sameLuo ⋅ 2016/06/23 ⋅ 12

jQuery 评分插件--Bootstrap Rating Input

Bootstrap Rating Input 是 jQuery 的一个插件,它能简化 jQuery 和 Bootsrap 星星评分的产生,而且它只有 2kb。示例图如下:

孔小菜 ⋅ 2015/05/15 ⋅ 0

小白问个关于栈格的问题

如上图,页面是这么码的。就是一个评论区的panel 不知道错在哪了,浏览器全屏的时候显示不出评论的回复,这样↓ 然后把浏览器缩小,又显示出来了。。。这样↓ 我bootsrap用的不熟,应该是犯了...

Jioyou ⋅ 2016/04/13 ⋅ 0

使用ajax 方式提交bootsrap 中modal中值,老是重复提交,怎么回事啊

使用ajax 方式提交bootsrap 中modal中值,老是重复提交,怎么回事啊

宁不诉离殇 ⋅ 2014/06/29 ⋅ 1

bootstrap的多级列表(树形)应该用什么方式?

比如机构,怎么样来展示这个列表? 如果直接用列表看不出层级,其他的插件又和bootsrap主题不搭配。

AstonM ⋅ 2013/12/10 ⋅ 6

怎么样使Bootstrap固定在底部的导航栏只在手机端显示呀?

请教各位大神啦, 怎么样使这个导航栏只在手机等移动浏览器上才显示,而电脑浏览器不显示呢? bootsrap是否直接支持这种响应式的布局呢? 在浏览器窗口缩放的时候, 或者是移动设备浏览器的时候,...

三千水军保裆 ⋅ 2014/12/05 ⋅ 2

YiiCms 1.1 发布,企业站管理系统

YiiCms1.0 版本发布了。YiiCms 企业站管理系统,使用 PHP+MySQL ,基于 Yii2 框架开发完成,页面采用 Bootsrap 3.0 前端样式,支持 PC 、手机,响应式页面布局。 新版本新增功能: 友情链接管...

李lili ⋅ 2017/01/17 ⋅ 6

java开发须知

ant maven vss cvs svn git rose staruml powerdeisgn visio bugzilla javame javase javaweb javaee chrome ie firefox http https eclipse myeclipse springsts struts spring hibernate m......

aiscv ⋅ 2014/06/23 ⋅ 0

YiiCms1.0 发布,企业站管理系统

YiiCms1.0 版本发布了。YiiCms 企业站管理系统,使用 PHP+MySQL ,基于 Yii2 框架开发完成,页面采用 Bootsrap 3.0 前端样式,支持 PC 、手机,响应式页面布局。 yiicms 主要功能: 新闻管理...

李lili ⋅ 2017/01/04 ⋅ 19

企业站管理系统 - YiiCms

YiiCms 企业站管理系统,使用 PHP+MySQL ,基于 Yii2 框架开发完成,页面采用 Bootsrap 3.0 前端样式,支持 PC 、手机,响应式页面布局。 主要功能:文章管理,产品管理,下载管理,相册管理...

李lili ⋅ 2016/12/26 ⋅ 21

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 12分钟前 ⋅ 1

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 37分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 41分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部