当前位置:主页 > 网页特效 > TAB标签 >

炫酷Bootstrap美化Tabs选项卡特效

发布时间:2018/07/10 来源:互联网 浏览: 关键词:bootstrap 选项卡 tab 
炫酷Bootstrap美化Tabs选项卡特效 炫酷Bootstrap美化Tabs选项卡特效
阿里云

简要教程

这是一款炫酷Bootstrap美化Tabs选项卡特效。该选项卡特效基于Bootstrap原生Tab选项卡的基础上,使用CSS样式来进行美化,增加了tab标签的伸缩动画功能。

使用方法

在页面中引入bootstrap相关文件和fontawsome字体图标文件。

<linkhref="path/to/css/bootstrap.min.css"rel="stylesheet">
<linkhref="path/to/css/font-awesome.min.css"rel="stylesheet">
<scriptsrc="path/to/jquery.min.js"></script>
<scriptsrc="path/to/bootstrap.min.js"></script>

HTML结构

选项卡的基本HTML结构如下:

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

CSS样式

为Tab选项卡添加下面的CSS样式。

a:hover,a:focus{
    outline:none;
    text-decoration:none;
}
.tab .nav-tabs{
    padding-left:15px;
    border-bottom:4pxsolid#692f6c;
}
.tab .nav-tabs li a{
    color:#fff;
    padding:10px20px;
    margin-right:10px;
    background:#692f6c;
    text-shadow:1px1px2px#000;
    border:none;
    border-radius:0;
    opacity:0.5;
    position:relative;
    transition:all0.3s ease0s;
}
.tab .nav-tabs li a:hover{
    background:#692f6c;
    opacity:0.8;
}
.tab .nav-tabs li.active a{
    opacity:1;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover,
.tab .nav-tabs li.active a:focus{
    color:#fff;
    background:#692f6c;
    border:none;
    border-radius:0;
}
.tab .nav-tabs li a:before,
.tab .nav-tabs li a:after{
    content:"";
    border-top:42pxsolidtransparent;
    position:absolute;
    top:-2px;
}
.tab .nav-tabs li a:before{
    border-right:15pxsolid#692f6c;
    left:-15px;
}
.tab .nav-tabs li a:after{
    border-left:15pxsolid#692f6c;
    right:-15px;
}
.tab .nav-tabs li a i,
.tab .nav-tabs li.active a i{
    display:inline-block;
    padding-right:5px;
    font-size:15px;
    text-shadow:none;
}
.tab .nav-tabs li a span{
    display:inline-block;
    font-size:14px;
    letter-spacing:-9px;
    opacity:0;
    transition:all0.3s ease0s;
}
.tab .nav-tabs li a:hover span,
.tab .nav-tabs li.active a span{
    letter-spacing:1px;
    opacity:1;
    transition:all0.3s ease0s;
}
.tab .tab-content{
    padding:30px;
    background:#fff;
    font-size:16px;
    color:#6c6c6c;
    line-height:25px;
}
.tab .tab-content h3{
    font-size:24px;
    margin-top:0;
}
@media onlyscreenand (max-width:479px){
    .tab .nav-tabs li{
        width:100%;
        margin-bottom:5px;
        text-align:center;
    }
    .tab .nav-tabs li a span{
        letter-spacing:1px;
        opacity:1;
    }
}             

共有人阅读,期待你的评论!评论
Top