Bootstrap Tab — стиль 38

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

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

<div class="container">
<div class="row">
<div class="col-md-6">
<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 tabs">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ante a ligula laoreet pulvinar. Pellentesque gravida felis eu velit imperdiet, porttitor sagittis metus mattis. Maecenas ac luctus massa. Praesent finibus erat sed nisl malesuada, eget pretium massa iaculis. Proin pellentesque scelerisque leo eget tempor.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h3>Brand Building</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ante a ligula laoreet pulvinar. Pellentesque gravida felis eu velit imperdiet, porttitor sagittis metus mattis. Maecenas ac luctus massa. Praesent finibus erat sed nisl malesuada, eget pretium massa iaculis. Proin pellentesque scelerisque leo eget tempor.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h3>Clean & Clear Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ante a ligula laoreet pulvinar. Pellentesque gravida felis eu velit imperdiet, porttitor sagittis metus mattis. Maecenas ac luctus massa. Praesent finibus erat sed nisl malesuada, eget pretium massa iaculis. Proin pellentesque scelerisque leo eget tempor.</p>
</div>
</div>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab .nav-tabs{
background: #fff;
}
.tab .nav-tabs li{
text-align: center;
margin-right: 3px;
}
.tab .nav-tabs li a{
font-size: 15px;
font-weight: 600;
color: #22272c;
padding: 15px 25px;
background: #eee;
margin-right: 0;
border-radius: 0;
border: none;
text-transform: uppercase;
position: relative;
transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
background: #e16b47;
color: #fff;
border: none;
}
.tab .tab-content{
font-size: 15px;
color: #3d3537;
line-height: 30px;
padding: 30px 40px;
border: 3px solid #e16b47;
}
.tab .tab-content h3{
font-size: 20px;
font-weight: bold;
margin-top: 0;
}
@media only screen and (max-width: 480px){
.tab .nav-tabs li{ width: 100%; }
}

Теги: