Bootstrap中信息提示框的使用方法

小编给大家分享一下Bootstrap中信息提示框的使用方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联建站服务项目包括梅里斯网站建设、梅里斯网站制作、梅里斯网页制作以及梅里斯网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,梅里斯网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到梅里斯省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语。

基本用法

Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮 提示框在顶部 提示框在底部 提示框居右

Bootstrap中信息提示框的使用方法

属性参数

提示框组件提供了7个自定义属性参数,用来对提示框进行设置

Bootstrap中信息提示框的使用方法


无动画
有动画
hover触发
click触发
不延迟
延迟500ms

Bootstrap中信息提示框的使用方法

JS触发

除了上面所说的最简单的一种触发方法,也可以单独指定一个元素,在该元素上调用Tooltip组件,并且还可以提供各种javascript形式的自定义参数,而无需使用以data-开头的元素自定义属性

$(element).tooltip(options);

Bootstrap中信息提示框的使用方法

按钮

Bootstrap中信息提示框的使用方法

【关键字】

除了使用options对象,还可以使用关键字,'show'、'hide'、'toggle'、'destroy'


按钮1
按钮2
按钮3
按钮4

Bootstrap中信息提示框的使用方法

【事件】

该插件支持5种类型的事件订阅

show.bs.tooltip        show方法调用之后立即触发该事件
shown.bs.tooltip      此事件在tooltip已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发
hide.bs.tooltip        hide方法调用之后立即触发该事件。
hidden.bs.tooltip     此事件在tooltip被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
inserted.bs.tooltip    当tooltip模板加载到DOM中上时,在show.bs.tooltip触发后,触发该事件
按钮

Bootstrap中信息提示框的使用方法

看完了这篇文章,相信你对“Bootstrap中信息提示框的使用方法”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


分享名称:Bootstrap中信息提示框的使用方法
分享URL:
http://ybzwz.com/article/jigcjo.html