文档章节

bootsrap 提示框

之渊
 之渊
发布于 2017/04/24 20:34
字数 397
阅读 58
收藏 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
博文 514
码字总数 151976
作品 0
佛山
程序员
毕业就快1年了,开源一个简单的个人博客,纪念自己逝去的青春

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

sameLuo
2016/06/23
2.3K
12
jQuery 评分插件--Bootstrap Rating Input

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

孔小菜
2015/05/15
439
0
小白问个关于栈格的问题

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

Jioyou
2016/04/13
82
0
使用ajax 方式提交bootsrap 中modal中值,老是重复提交,怎么回事啊

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

宁不诉离殇
2014/06/29
603
1
bootstrap的多级列表(树形)应该用什么方式?

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

AstonM
2013/12/10
28.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部