针对BootStrap中tabs控件的美化和完善

编程之家收集整理的这篇文章主要介绍了针对BootStrap中tabs控件的美化和完善编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

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

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: "";
positionabsolute;
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;
border1px solID lightgray;
}
.tab .nav-tabs li.active a:after {
border: none;
}
}
</style>

效果出来之后是这个样子的:

QQ图片20160706102720.png

是不是比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控件的美化和完善全部内容,希望文章能够帮你解决针对BootStrap中tabs控件的美化和完善所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

Bootstrap文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注