Bootstrap Tab — стиль 16

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

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

<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- 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" class="blue"><i class="fa fa-envelope-o"></i>Section 1</a></li>
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" class="orange"><i class="fa fa-cube"></i>Section 2</a></li>
<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" class="pink"><i class="fa fa-comment"></i>Section 3</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active blue" id="Section1">
<h4>Section 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel malesuada ipsum. Nam commodo, est nec dictum bibendum.
</p>
</div>
<div role="tabpanel" class="tab-pane fade orange" id="Section2">
<h4>Section 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel malesuada ipsum. Nam commodo, est nec dictum bibendum.
</p>
</div>
<div role="tabpanel" class="tab-pane fade pink" id="Section3">
<h4>Section 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel malesuada ipsum. Nam commodo, est nec dictum bibendum.
</p>
</div>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
text-decoration: none;
outline: none;
}
.nav-tabs{
border-bottom:none;
margin-bottom:15px;
}
.nav-tabs > li{
border-bottom:none;
margin-right:10px;
}
.nav-tabs li .blue,
.nav-tabs li .orange,
.nav-tabs li .pink{
padding: 10px 22px;
border-radius:0;
color:#fff;
}
.nav-tabs li a > i,
.nav-tabs li a > i,
.nav-tabs li a > i {
text-align:center;
display:block;
font-size: 25px;
margin-bottom:10px;
}
.nav-tabs li .blue{
background:#727cb6;
transition:all 0.3s ease 0s;
}
.nav-tabs li .blue:hover{
background:#727cb6;
box-shadow:0 0 8px #727cb6;
border:1px solid #727cb6;
}
.nav-tabs li.active .blue,
.nav-tabs li.active .blue:hover,
.nav-tabs li.active .blue:focus {
background:#727cb6;
color: #fff;
border:1px solid #727cb6;
}
.nav-tabs li .orange{
background:#e67e22;
transition:all 0.3s ease 0s;
}
.nav-tabs li .orange:hover{
background:#e67e22;
box-shadow:0 0 8px #e67e22;
border:1px solid #e67e22;
}
.nav-tabs li.active .orange,
.nav-tabs li.active .orange:hover,
.nav-tabs li.active .orange:focus{
background:#e67e22;
color: #fff;
border:1px solid #e67e22;
}
.nav-tabs li .pink{
background:#ed687c;
transition:all 0.3s ease 0s;
}
.nav-tabs li .pink:hover{
background:#ed687c;
box-shadow:0 0 8px #ed687c;
border:1px solid #ed687c;
}
.nav-tabs li.active .pink,
.nav-tabs li.active .pink:hover,
.nav-tabs li.active .pink:focus{
background:#ed687c;
color: #fff;
border:1px solid #ed687c;
}
.tab-content .blue{
background:#727cb6;
padding:15px;
}
.tab-content .orange{
background:#e67e22;
padding:15px;
}
.tab-content .pink{
background:#ed687c;
padding:15px;
}
.tab-content h4{
font-weight: 600;
margin:0 0 10px 0;
text-transform:uppercase;
color:#fff;
}
.tab-content p{
color:#fff;
margin:0 0 10px;
}
@media only screen and (max-width: 480px) {
.nav-tabs > li{
width:100%;
text-align:center;
margin-bottom:1px;
}
}

Теги: