这是一款非常简单的Bootstrap Tabs选项卡美化特效。该特效在原生Bootstrap Tabs选项卡的基础上,通过css3来对它进行了一些美化效果。
使用方法
在页面中引入jquery和bootstrap相关文件。
< link href = "path/to/css/bootstrap.min.css" rel = "stylesheet" >
< script src = "path/to/js/jquery.min.js" ></ script >
< script src = "path/to/js/bootstrap.min.js" ></ script >
|
HTML结构
该Bootstrap 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" >Section 1</ a ></ li >
< li role = "presentation" >< a href = "#Section2" aria-controls = "profile" role = "tab" data-toggle = "tab" >Section 2</ a ></ li >
< li role = "presentation" >< a href = "#Section3" aria-controls = "messages" role = "tab" data-toggle = "tab" >Section 3</ a ></ li >
</ ul >
<!-- Tab panes -->
< div class = "tab-content tabs" >
< div role = "tabpanel" class = "tab-pane fade in active" id = "Section1" >
< h3 >选项卡 1</ h3 >
< p >....</ p >
</ div >
< div role = "tabpanel" class = "tab-pane fade" id = "Section2" >
< h3 >选项卡 2</ h3 >
< p >...</ p >
</ div >
< div role = "tabpanel" class = "tab-pane fade" id = "Section3" >
< h3 >选项卡 3</ h3 >
< p >....</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
|
CSS样式
通过下面的CSS代码来对选项卡进行美化。
a:hover,a:focus{
outline : none ;
text-decoration : none ;
}
.tab .nav-tabs{
position : relative ;
border-bottom : none ;
}
.tab .nav-tabs li{
text-align : center ;
margin-right : 10px ;
}
.tab .nav-tabs li a{
display : block ;
font-size : 16px ;
font-weight : 600 ;
color : #444 ;
padding : 10px 15px ;
background : transparent ;
margin-right : 0 ;
border : none ;
border-radius : 0 ;
overflow : hidden ;
position : relative ;
z-index : 1 ;
transition : all 0.5 s ease 0 s;
}
.tab .nav-tabs li a:before{
content : "" ;
width : 100% ;
height : 3px ;
background : #de7921 ;
position : absolute ;
top : 92% ;
left : 0 ;
transition : all 0.3 s ease 0 s;
}
.tab .nav-tabs li a:hover:before,
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:hover:before{
top : 0 ;
}
.tab .nav-tabs li a:after{
content : "" ;
width : 100% ;
height : 100% ;
background : #fff ;
position : absolute ;
top : 100% ;
left : 0 ;
z-index : -1 ;
transition : all 0.3 s ease 0 s;
}
.tab .nav-tabs li a:hover:after,
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li.active a:hover:after{
top : 0 ;
}
.nav-tabs li.active a,
.nav-tabs li.active a:focus,
.nav-tabs li.active a:hover,
.nav-tabs li a:hover{
border : none ;
}
.tab .tab-content{
padding : 30px 15px 20px ;
background : #fff ;
font-size : 14px ;
color : #555 ;
line-height : 26px ;
}
.tab .tab-content h 3 {
font-size : 24px ;
margin-top : 0 ;
}
@media only screen and ( max-width : 479px ){
.tab .nav-tabs li{ width : 100% ; }
}
|