网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 针对BootStrap中tabs控件的美化和完善(推荐)
内容
    这篇文章主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下
    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有的基础上做出更加美观的效果呢，我一直在考虑这个问题。另外，Bootstrap中的tabs必须要单击每个选项卡才能实现切换，能否使用Jquery来控制其自动切换，让它过一段时间（如5秒钟）从一个选项卡切换到另一个呢？下面是我的实现过程，首先是tabs部分的html代码：
    <div role="tabpanel">
    <!-- Nav tabs -->
    <ul role="tablist" id="docTabs">
    <li role="presentation"><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>
    <div role="tabpanel" id="Section_new">
    <p>
    tab1中的内容
    </p>
    </div>
    <div role="tabpanel" id="Section_week">
    <p>
    tab2中的内容
    </p>
    </div>
    <div role="tabpanel" 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控件的美化和完善(推荐)，希望对大家有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 5:14:55