前端框架bootstrap--标签页和工具提示插件
image.png
前面已经分享几篇关于bootstrap文章，往后再把本人整理的有关bootstrap分享出来,希望可以帮到读者们！
一.标签页
标签页也就是通常所说的选项卡功能
//基本用法
image.png
效果图
效果图
//可以设置淡入淡出效果fade,而in表示首选的内容默认显示
image.png
效果图
效果图
点击对应按钮显示淡入淡出效果
注意：第一个div属性设置in为了使css3内容显示出来，若不设置in就算设置active，css3内容也隐藏
例子
image.png
效果图
效果图
//也可以换成胶囊式
image.png
效果图
效果图
//data-target
使用data-target绑定或不绑定效果都是一样的
//使用JavaScript，直接使用tab方法
image.png
效果图
效果图
事件类型 描述
Show.bs.tab 在调用tab方法时触发
Shown.bs.tab 在显示整个标签时触发
例子
image.png
效果图
效果图
二.工具提示
工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语
//基本实例
image.png
效果图
效果图
工具提示有很多属性来配置提示的显示，具体如下：
属性名 描述
Data-animation 默认true，在tooltip上应用一个css fade动画。如果设置false，则不应用
Data-html 默认false，不允许提示内容格式为html。如果设置为true，则可以设置html格式的提示内容
Data-placement 默认值为top，还有bottom、left、right和auto。如果auto会自行调整合适的位置。如果是auto left则会尽量在左边显示，但左边不行就靠右边
Data-selector 默认false，可以选中绑定指定的选择器
Data-original-title 默认空字符串，提示语的内容。优先级比title低
Title 默认字空符串，提示语的内容。
Data-trigger 默认值hover foucs，表示怎么触发tooltip，其他值为：click、manual。多个值用空格隔开，manual手动不能和其他同时设置。
Data-delay 默认值0，延迟触发tooltip（毫秒），如果传数字则，表示show/hide的毫秒数，如果传对象，结构为：{show:500,hide:100}
Data-container 默认值false，将tooltip附加到特定的元素上。比如组合按钮组提示，容器不够，可以附加body上，container:’body’
data-template 更改提示框的html提示语的模板, 默认值为：<div class=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>
例子
image.png
效果图
效果图
加上data-template="<b>123</b>"
image.png
效果图
效果图
image.png
Javascript方式直接去掉前面的data即可。包括：animation、html、placement、selector、original-title、title、trigger、delay、container和template等属性
image.png
效果图
点击显示123效果
//Javascript方式
image.png
效果图
效果显示相当鼠标划过
JavaScript有四个方法：show、hide、toggle和destory四种
//显示
image.png
效果图
加载时已经显示tooltip
//隐藏
加载时不显示tooltip
//反转显示和隐藏
image.png
效果图
效果图
//隐藏并销毁
image.png
效果图
鼠标划过也显示不了tooltip，已经销毁
Tooltip中事件有四种
事件类型 描述
Show.bs.tooltip 在show方法调用时立即触发
Shown.bs.tooltip 在提示框完全显示给用户之后触发
Hide.bs.tooltip 在hide方法调用时立即触发
Hidden.bs.tooltip 在提示框完全隐藏之后触发
image.png
效果图
效果图
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
