文档章节

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
博文 545
码字总数 158790
作品 0
佛山
程序员
私信 提问
使用ajax 方式提交bootsrap 中modal中值,老是重复提交,怎么回事啊

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

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

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

AstonM
2013/12/10
29K
6
毕业就快1年了,开源一个简单的个人博客,纪念自己逝去的青春

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

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

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

孔小菜
2015/05/15
439
0
django1.8 加载静态文件

在页面中使用了bootsrap ,页面顶部如图 运行服务器发现bootstrap.min.css文件找不到 项目文件如图 设置如图 请问是哪里出现了问题?

leiline
2016/01/30
622
1

没有更多内容

加载失败,请刷新页面

加载更多

day179-2018-12-16-英语流利阅读-待学习

《海王》:上映 7 天,票房突破 9 亿,DC 要翻身? Daniel 2018-12-16 1.今日导读 这部电影堪称“有《阿凡达》般的视觉奇观,《指环王》般的史诗质感,《夺宝奇兵》般的寻宝历险,《狮子王》...

飞鱼说编程
12分钟前
3
0
window下安装maven

1.下载软件包: 2.解压到当前的安装路径: D:\Maven3.5.3 3.添加环境变量: 新建一个名为:MAVEN_HOME 填写解压路径:D:\Maven3.5.3 打开path,添加:%MAVEN_HOME%\bin 确定即可。 4.验证环境...

狼王黄师傅
26分钟前
5
0
聊聊flink的FsCheckpointStorage

序 本文主要研究一下flink的FsCheckpointStorage CheckpointStorage flink-runtime_2.11-1.7.0-sources.jar!/org/apache/flink/runtime/state/CheckpointStorage.java /** * CheckpointStor......

go4it
48分钟前
3
0
makefile 常用函数

Linux 环境下的程序员如果不会使用GNU make来构建和管理自己的工程,应该不能算是一个合格的专业程序员,至少不能称得上是 Unix程序员。今天我们来学习下makefile的常用函数。 《GNU make》h...

科陆李明
今天
20
0
Android 报错 Could not find com.android.tools.build:aapt2:3.2.1-4818971.

报错信息: Could not find com.android.tools.build:aapt2:3.2.1-4818971.Searched in the following locations: file:/C:/Users/96110/AppData/Local/Android/Sdk/extras/m2reposito......

lanyu96
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部