这篇文章主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下

BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有的基础上做出更加美观的效果呢，我一直在考虑这个问题。另外，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);

//当鼠标悬停在列表区域时暂停轮换

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

clearInterval(interval);

});

//鼠标移开时继续轮换

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

timer(i);

});

});

以上所述是小编给大家介绍的针对BootStrap中tabs控件的美化和完善(推荐)，希望对大家有所帮助