Bootstrap Tab — стиль 12

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

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

<div class="container">
<div class="row">
<div class="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"><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"><i class="fa fa-cube"></i>Section 2</a></li>
<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><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" id="Section1">
<h4>Section 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h4>Section 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h4>Section 3</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
</p>
</div>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
text-decoration: none;
outline: none;
}
.nav-tabs{
border-bottom:none;
margin-bottom:25px;
}
.nav-tabs > li{
border-bottom:none;
margin-right:10px;
}
.nav-tabs > li > a{
background:rgba(171, 171, 171,0.7);
padding: 10px 25px;
border-radius: 4px;
color:#fff;
border-bottom:1px solid #adadad;
transition:all 0.3s ease 0s;
}
.nav-tabs > li > a:hover{
background:#ababab;
border-bottom: 1px solid #ababab;
}
.nav-tabs > li > a > i{
margin-right: 7px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: #e74c3c;
color: #fff;
border-bottom:1px solid #e74c3c;
}
.tab-content h4{
font-weight: 600;
}
.tab-content p{
color: #717171;
}

Теги: