这是一款基于Bootstrap的超酷Tabs选项卡美化特效。该Tabs选项卡在原生Bootstrap选项卡的基础上，使用CSS3样式来对齐进行美化，效果非常炫酷。
使用方法
在页面中引入bootstrap相关文件和jquery文件。
HTML结构
该Tabs选项卡的HTML结构如下。
Section 1Section 2Section 3
Section 1
......
Section 2
......
Section 3
......
CSS样式
为该Tabs选项卡添加下面的CSS样式：
a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab .nav-tabs{
position: relative;
border-bottom: 0 none;
}
.tab .nav-tabs li{
text-align: center;
}
.tab .nav-tabs li a{
display: block;
height: 70px;
line-height: 65px;
background: linear-gradient(165deg, transparent 29%, #908a78 30%);
font-size: 15px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
margin-right: 0;
border-radius: 0;
border: none;
position: relative;
transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
background: linear-gradient(165deg, transparent 29%, #efe8d5 30%);
border: none;
color: #908a78;
}
.tab .nav-tabs li a:before{
content: "";
height: 70px;
line-height: 90px;
border-bottom: 70px solid rgba(0, 0, 0, 0.1);
border-right: 10px solid transparent;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
}
.tab .nav-tabs li:last-child a:before{
border: none;
}
.tab .tab-content{
font-size: 14px;
color: #6f6c6c;
line-height: 26px;
background: #efe8d5;
padding: 20px;
}
.tab .tab-content h3{
font-size: 24px;
color: #6f6c6c;
margin-top: 0;
}
.tab .tab-content p{
margin-bottom: 0;
}
@media only screen and (max-width: 480px){
.tab .nav-tabs li{
width: 100%;
margin-bottom: 8px;
}
.tab .nav-tabs li:last-child{
margin-bottom: 0;
}
.tab .nav-tabs li a:before{
border: none;
}
}
