Bootstrap Tab — стиль 21

Подробное описание и демонстрация работы вкладок для сайта под номером №21 для библиотеки Bootstrap. Html и CSS код для реализации tab’ов на сайте как на изображении.

html разметка для реализации вкладок

<div class="container">
<div class="row">
<div class="col-md-8">
<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">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h4>Section-1</h4>
<p>1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam augue urna, dictum eu sapien vitae, ultricies dignissim leo. In vehicula sapien enim, et malesuada nunc vestibulum sed. Integer non ante a urna dictum.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h4>Section-2</h4>
<p>2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam augue urna, dictum eu sapien vitae, ultricies dignissim leo. In vehicula sapien enim, et malesuada nunc vestibulum sed. Integer non ante a urna dictum.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h4>Section-3</h4>
<p>3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam augue urna, dictum eu sapien vitae, ultricies dignissim leo. In vehicula sapien enim, et malesuada nunc vestibulum sed. Integer non ante a urna dictum.</p>
</div>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации вкладок

.tab .nav-tabs{
padding:10px 0;
position: relative;
border-bottom:0 none;
}
.tab .nav-tabs li{
margin:0 41px 0 0;
}
.tab .nav-tabs li:after{
content: "";
border: 2px solid #fff;
position: absolute;
right: -31%;
top: 44%;
width: 31%;
}
.tab .nav-tabs li:last-child:after{
content:"";
border:0 none;
}
.tab .nav-tabs li a{
outline:none;
margin-right:0;
padding:20px 30px;
background:#fff;
text-transform:uppercase;
}
.tab .nav-tabs li.active a{
color:#fff;
background: #333;
text-transform:uppercase;
border:none;
}
.tab .nav-tabs  li.active a:before {
content: "";
position: absolute;
top:100%;
left:50%;
border-top: 14px solid #333;
border-right: 14px solid transparent;
border-left: 14px solid transparent;
margin-left: -13px;
}
.tab .tab-content{
color:#fff;
background:#333;
margin-top:5px;
line-height:26px;
padding:20px 30px;
}
@media only screen and (max-width: 1280px) {
.tab .nav-tabs li a{
padding:15px 11px;
}
.tab .nav-tabs li:after{
right: -45%;
width: 45%;
}
}
@media only screen and (max-width: 500px) {
.tab .nav-tabs li{
width:100%;
text-align:center;
margin-bottom:2px;
}
.tab .nav-tabs li:after,
.tab .nav-tabs li.active a:before{
content:"";
border:0 none;
}
}

Теги: