這篇文章主要介紹了Bootstrap選項(xiàng)卡與Masonry插件的完美結(jié)合的相關(guān)資料,需要的朋友可以參考下

BootStrap中的tabs控件以其簡(jiǎn)單易用而很受廣大開(kāi)發(fā)者的歡迎。但是，它的樣式比較單一，如何才能在其原有的基礎(chǔ)上做出更加美觀的效果呢，我一直在考慮這個(gè)問(wèn)題。另外，Bootstrap中的tabs必須要單擊每個(gè)選項(xiàng)卡才能實(shí)現(xiàn)切換，能否使用Jquery來(lái)控制其自動(dòng)切換，讓它過(guò)一段時(shí)間（如5秒鐘）從一個(gè)選項(xiàng)卡切換到另一個(gè)呢？下面是我的實(shí)現(xiàn)過(guò)程，首先是tabs部分的html代碼：

<div class="tab" role="tabpanel">

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist" style="margin-top:0px;" id="docTabs">

<li role="presentation" class="active"><a href="#Section_new"

aria-controls="home" role="tab" data-toggle="tab"> 最新</a>

<li role="presentation"><a href="#Section_week"

aria-controls="profile" role="tab" data-toggle="tab">7天熱門</a>

<li role="presentation"><a href="#Section_month"

aria-controls="messages" role="tab" data-toggle="tab">30天熱門</a>

</ul>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane fade in active" id="Section_new">

<p>

tab1中的內(nèi)容

</p>

</div>

<div role="tabpanel" class="tab-pane fade" id="Section_week">

<p>

tab2中的內(nèi)容

</p>

</div>

<div role="tabpanel" class="tab-pane fade" id="Section_month">

<p>

tab3中的內(nèi)容

</p>

</div>

</div>

</div>

這些代碼基本和bootstrap中的原生代碼是一樣的，不用做太大的改動(dòng)，填入自己的數(shù)據(jù)即可。

下面來(lái)設(shè)置tabs的樣式，這些樣式會(huì)覆蓋掉bootstrap中的原有樣式達(dá)到美化tabs的效果

<style type="text/css">

.tab .nav-tabs {

border-bottom: 0 none;

background: #eaeaea;

}

.tab .nav-tabs li a {

background: transparent;

border-radius: 0;

font-size: 16px;

border: none;

color: #333;

padding: 12px 22px;

}

.tab .nav-tabs li.active a, .tab .nav-tabs li.active a i {

border: 0 none;

background:#e67e22;

color: #fff;

}

.tab .nav-tabs li.active a:after {

content: "";

position: absolute;

left: 45%;

bottom: -14px;

border: 7px solid transparent;

border-top: 7px solid #e67e22;

}

.tab .tab-content {

padding: 5px;

color: #5a5c5d;

font-size: 14px;

line-height: 20px;

margin-top: 5px;

border-bottom: 1px solid #e67e22;

}

@media only screen and (max-width: 480px) {

.tab .nav-tabs, .tab .nav-tabs li {

width: 100%;

background: transparent;

}

.tab .nav-tabs li.active a {

border-radius: 10px 10px 0 0;

}

.tab .nav-tabs li:first-child a {

border-bottom-left-radius: 0;

}

.tab .nav-tabs li a {

margin-bottom: 10px;

border: 1px solid lightgray;

}

.tab .nav-tabs li.active a:after {

border: none;

}

}

</style>

效果出來(lái)之后是這個(gè)樣子的：

是不是比bootstrap原有的樣式要好一些（不過(guò)蘿卜白菜各有所愛(ài)，此處只是介紹實(shí)現(xiàn)過(guò)程，當(dāng)然通過(guò)修改css你也可以做出其他的樣式）

下面看看如何來(lái)實(shí)現(xiàn)tabs的自動(dòng)切換，話不多說(shuō)，直接上代碼：

//tabs自動(dòng)輪換

function timer(i)

{

interval=setInterval(function()

{

$("#docTabs li:eq("+i+") a").tab('show');

i++;

if(i>2)

i=0;

}

,5000);

return interval;

}

$(function(){

var i=0;

interval=timer(i);

//當(dāng)鼠標(biāo)懸停在列表區(qū)域時(shí)暫停輪換

$(".tab-pane").mouseover(function(){

clearInterval(interval);

});

//鼠標(biāo)移開(kāi)時(shí)繼續(xù)輪換

$(".tab-pane").mouseout(function(){

timer(i);

});

});

以上所述是小編給大家介紹的針對(duì)BootStrap中tabs控件的美化和完善(推薦)，希望對(duì)大家有所幫助