image.png

前面已經(jīng)分享幾篇關(guān)于bootstrap文章，往后再把本人整理的有關(guān)bootstrap分享出來,希望可以幫到讀者們！

一.標(biāo)簽頁

標(biāo)簽頁也就是通常所說的選項(xiàng)卡功能

//基本用法

image.png

效果圖

效果圖

//可以設(shè)置淡入淡出效果fade,而in表示首選的內(nèi)容默認(rèn)顯示

image.png

效果圖

效果圖

點(diǎn)擊對(duì)應(yīng)按鈕顯示淡入淡出效果

注意：第一個(gè)div屬性設(shè)置in為了使css3內(nèi)容顯示出來，若不設(shè)置in就算設(shè)置active，css3內(nèi)容也隱藏

例子

image.png

效果圖

效果圖

//也可以換成膠囊式

image.png

效果圖

效果圖

//data-target

使用data-target綁定或不綁定效果都是一樣的
//使用JavaScript，直接使用tab方法

image.png

效果圖

效果圖

事件類型 描述

Show.bs.tab 在調(diào)用tab方法時(shí)觸發(fā)
Shown.bs.tab 在顯示整個(gè)標(biāo)簽時(shí)觸發(fā)
例子

image.png

效果圖

效果圖

二.工具提示

工具提示就是通過鼠標(biāo)移動(dòng)選定在特定的元素上時(shí)，顯示相關(guān)的提示語
//基本實(shí)例

image.png

效果圖

效果圖

工具提示有很多屬性來配置提示的顯示，具體如下：

屬性名 描述

Data-animation 默認(rèn)true，在tooltip上應(yīng)用一個(gè)css fade動(dòng)畫。如果設(shè)置false，則不應(yīng)用
Data-html 默認(rèn)false，不允許提示內(nèi)容格式為html。如果設(shè)置為true，則可以設(shè)置html格式的提示內(nèi)容
Data-placement 默認(rèn)值為top，還有bottom、left、right和auto。如果auto會(huì)自行調(diào)整合適的位置。如果是auto left則會(huì)盡量在左邊顯示，但左邊不行就靠右邊
Data-selector 默認(rèn)false，可以選中綁定指定的選擇器
Data-original-title 默認(rèn)空字符串，提示語的內(nèi)容。優(yōu)先級(jí)比title低
Title 默認(rèn)字空符串，提示語的內(nèi)容。
Data-trigger 默認(rèn)值hover foucs，表示怎么觸發(fā)tooltip，其他值為：click、manual。多個(gè)值用空格隔開，manual手動(dòng)不能和其他同時(shí)設(shè)置。
Data-delay 默認(rèn)值0，延遲觸發(fā)tooltip（毫秒），如果傳數(shù)字則，表示show/hide的毫秒數(shù)，如果傳對(duì)象，結(jié)構(gòu)為：{show:500,hide:100}

Data-container 默認(rèn)值false，將tooltip附加到特定的元素上。比如組合按鈕組提示，容器不夠，可以附加body上，container:’body’
data-template 更改提示框的html提示語的模板, 默認(rèn)值為：<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

效果圖

點(diǎn)擊顯示123效果

//Javascript方式

image.png

效果圖

效果顯示相當(dāng)鼠標(biāo)劃過

JavaScript有四個(gè)方法：show、hide、toggle和destory四種

//顯示

image.png

效果圖

加載時(shí)已經(jīng)顯示tooltip

//隱藏

加載時(shí)不顯示tooltip

//反轉(zhuǎn)顯示和隱藏

image.png

效果圖

效果圖

//隱藏并銷毀

image.png

效果圖

鼠標(biāo)劃過也顯示不了tooltip，已經(jīng)銷毀

Tooltip中事件有四種

事件類型 描述
Show.bs.tooltip 在show方法調(diào)用時(shí)立即觸發(fā)
Shown.bs.tooltip 在提示框完全顯示給用戶之后觸發(fā)
Hide.bs.tooltip 在hide方法調(diào)用時(shí)立即觸發(fā)
Hidden.bs.tooltip 在提示框完全隱藏之后觸發(fā)

image.png

效果圖

效果圖

本文作者lilyping
越努力，越幸運(yùn)
原文鏈接：http://www.itdecent.cn/u/3908e601f4ec
微信公眾號(hào)：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping