基础 - Bootstrap选项卡
<section id="zw-product">
<div class="container">
<!--选项-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" >
<a href="#zw-tab-one" aria-controls="zw-tab-one" role="tab" data-toggle="tab">home</a>
</li>
<li role="presentation" >
<a href="#zw-tab-two" aria-controls="zw-tab-two" role="tab" data-toggle="tab">profile</a>
</li>
<li role="presentation" >
<a href="#zw-tab-three" aria-controls="zw-tab-three" role="tab" data-toggle="tab">message</a>
</li>
<li role="presentation" >
<a href="#zw-tab-four" aria-controls="zw-tab-four" role="tab" data-toggle="tab">setting</a>
</li>
</ul>
<!--面板-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active " id="zw-tab-one">不拉不拉home</div>
<div role="tabpanel" class="tab-pane fade" id="zw-tab-two">不拉不拉profile</div>
<div role="tabpanel" class="tab-pane fade" id="zw-tab-three">不拉不拉message</div>
<div role="tabpanel" class="tab-pane fade" id="zw-tab-four">不拉不拉setting</div>
</div>
</div>
</section>
#zw-product{
background-color: #8fccc4;
}
#zw-product > .container > .nav-tabs {
border-bottom: 1px solid #d3dd62;
padding-left: 20px;
}
#zw-product > .container > .nav-tabs > li {
}
#zw-product > .container > .nav-tabs > li > a {
font-size: 18px;
color: #9e76cc;
}
#zw-product > .container > .nav-tabs > li > a:hover {
border: 0;
background-color: #cc8ea5;
}
#zw-product > .container > .nav-tabs > li.active {
}
#zw-product > .container > .nav-tabs > li.active > a {
background-color: transparent;
color: #cc449d;
border: 0;
border-bottom:3px solid #e92322;
}
#zw-product > .container > .nav-tabs > li.active > a:hover {
background-color: #cc8ea5;
}
bootstrap面板组件
.panel
<section id="zw-product">
<div class="container">
<!--选项-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" >
<a href="#zw-tab-one" aria-controls="zw-tab-one" role="tab" data-toggle="tab">home</a>
</li>
<li role="presentation" >
<a href="#zw-tab-two" aria-controls="zw-tab-two" role="tab" data-toggle="tab">profile</a>
</li>
<li role="presentation" >
<a href="#zw-tab-three" aria-controls="zw-tab-three" role="tab" data-toggle="tab">message</a>
</li>
<li role="presentation" >
<a href="#zw-tab-four" aria-controls="zw-tab-four" role="tab" data-toggle="tab">setting</a>
</li>
</ul>
<!--面板-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active " id="zw-tab-one">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">home</div>
<div class="panel-body">疑是银河落九天</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="zw-tab-two">profile</div>
<div role="tabpanel" class="tab-pane fade" id="zw-tab-three">message</div>
<div role="tabpanel" class="tab-pane fade" id="zw-tab-four">setting</div>
</div>
</div>
</section>
#zw-product{
background-color: #8fccc4;
}
#zw-product > .container > .nav-tabs {
border-bottom: 1px solid #d3dd62;
padding-left: 20px;
}
#zw-product > .container > .nav-tabs > li {
}
#zw-product > .container > .nav-tabs > li > a {
font-size: 18px;
color: #9e76cc;
}
#zw-product > .container > .nav-tabs > li > a:hover {
border: 0;
background-color: #cc8ea5;
}
#zw-product > .container > .nav-tabs > li.active {
}
#zw-product > .container > .nav-tabs > li.active > a {
background-color: transparent;
color: #cc449d;
border: 0;
border-bottom:3px solid #e92322;
}
#zw-product > .container > .nav-tabs > li.active > a:hover {
background-color: #cc8ea5;
}
#zw-product > .container > .tab-content > .tab-pane {
padding: 30px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default {
border-radius: 5%;
box-shadow: 1px 1px 5px #d233dd;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading {
float: right;
padding: 0;
border-left: 1px dashed #38ccc9;
width: 100px;
text-align: center;
height: 150px;
line-height: 150px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:before {
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:after {
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-body {
margin-right: 100px;
padding: 0;
text-align: center;
height: 150px;
line-height: 150px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default {
border-radius: 5%;
box-shadow: 1px 1px 5px #d233dd;
background-color: #9e76cc;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading {
float: right;
padding: 0;
border-left: 1px dashed #38ccc9;
width: 100px;
text-align: center;
height: 150px;
line-height: 150px;
background-color: transparent;
position: relative;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:before,
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:after {
content: "";
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #69cc81;
position: absolute;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:before {
left: -8px;
top: -8px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:after {
left: -8px;
bottom: -8px;
box-shadow: 0 1px 1px inset;
}
然而，一般情况下，我们需要复制一份panel-default的样式，并自定义名zw-panel-xx,以保护panel-default
这里我就不给出代码了
