实用Tabs选项卡(可自定义样式)插件下载

分享 :

网盘下载链接:

提取密码: ruyj
复制提取密码
这是一款基于Bootstrap的Tabs选项卡特效。该Tabs选项卡在bootstrap tabs的基础上,使用CSS3进行了一些效果美化,增强用户体验效果。
  • 详情
    文件来源

    网络收集

    更新日期

    2018-01-09

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    34次

    效果图预览:

  • 使用说明

    使用方法:

    在页面中引入bootstrap相关文件,以及jquery和font-awesome字体图标文件。

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>   
    

    HTML结构:

    该Tabs选项卡的基本HTML结果如下:

    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="tab" role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-globe"></i></span> Section 1</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><span><i class="fa fa-rocket"></i></span> Section 2</a></li>
                        <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><span><i class="fa fa-briefcase"></i></span> Section 3</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                            <h3>Section 1</h3>
                            <p>Tabs选项卡一的内容...</p>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                            <h3>Section 2</h3>
                            <p>Tabs选项卡二的内容...</p>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="Section3">
                            <h3>Section 3</h3>
                            <p>Tabs选项卡三的内容...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    CSS样式:

    通过下面的CSS代码来对Tabs选项卡进行效果的美化。

    a:hover,a:focus{
        outline: none;
        text-decoration: none;
    }
    .tab{ text-align: center; }
    .tab .nav-tabs{
        display: inline-block;
        position: relative;
        border-bottom: none;
    }
    .tab .nav-tabs li{
        margin: 0;
    }
    .tab .nav-tabs li a{
        display: block;
        padding: 80px 20px 10px;
        background: #fff;
        font-size: 17px;
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        text-align: center;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid #fff;
        margin-right: 0;
        overflow: hidden;
        z-index: 1;
        position: relative;
        transition: all 0.3s ease 0s;
    }
    .tab .nav-tabs li a span{
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #f2f2f2;
        margin: auto;
        font-size: 22px;
        color: #999;
        border-radius: 5px;
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        transform: rotate(45deg);
    }
    .tab .nav-tabs li.active a span{
        background: #29335c;
        color: #fff;
    }
    .tab .nav-tabs li a span i{
        transform: rotate(-45deg);
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li a:hover{
        color: #999;
        border: none;
        border-bottom: 2px solid #fff;
    }
    .tab .nav-tabs li.active a{
        border-bottom: 2px solid #29335c;
    }
    .tab .tab-content{
        padding: 20px;
        margin-top: -5px;
        font-size: 15px;
        color: #757575;
        line-height: 26px;
        text-align: left;
        border-top: 1px solid #e5e5e5;
    }
    .tab .tab-content h3{
        font-size: 24px;
        margin-top: 0;
    }
    @media only screen and (max-width: 479px){
        .tab .nav-tabs li{
            width: 100%;
            text-align: center;
            margin-bottom: 5px;
        }
        .tab .nav-tabs li:last-child{
            margin-bottom: 0;
        }
    }
    
  • 相关下载