這篇文章主要介紹了Bootstrap選項卡與Masonry插件的完美結合的相關資料,需要的朋友可以參考下

BootStrap中的tabs控件以其簡單易用而很受廣大開發(fā)者的歡迎。但是，它的樣式比較單一，如何才能在其原有的基礎上做出更加美觀的效果呢，我一直在考慮這個問題。另外，Bootstrap中的tabs必須要單擊每個選項卡才能實現切換，能否使用Jquery來控制其自動切換，讓它過一段時間（如5秒鐘）從一個選項卡切換到另一個呢？下面是我的實現過程，首先是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中的內容

</p>

</div>

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

<p>

tab2中的內容

</p>

</div>

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

<p>

tab3中的內容

</p>

</div>

</div>

</div>

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

下面來設置tabs的樣式，這些樣式會覆蓋掉bootstrap中的原有樣式達到美化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>

效果出來之后是這個樣子的：

是不是比bootstrap原有的樣式要好一些（不過蘿卜白菜各有所愛，此處只是介紹實現過程，當然通過修改css你也可以做出其他的樣式）

下面看看如何來實現tabs的自動切換，話不多說，直接上代碼：

//tabs自動輪換

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);

//當鼠標懸停在列表區(qū)域時暫停輪換

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

clearInterval(interval);

});

//鼠標移開時繼續(xù)輪換

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

timer(i);

});

});

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