Bootstrap Tab — стиль 11

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

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

<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div>
<!-- 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>
<li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h3>section 1</h3>
<p>
1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus ut nibh non eleifend. Etiam non ligula sit amet nunc convallis feugiat sit amet sit amet mauris. Nunc varius vehicula pharetra. Proin sollicitudin imperdiet lorem, nec rutrum lorem posuere ut.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<h3>section 2</h3>
<p>
2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum turpis vel sapien luctus, nec laoreet felis vehicula. Integer nec justo odio. Sed posuere nec quam ut semper. Vestibulum malesuada ut sem sagittis gravida. Phasellus porta vitae sem ut euismod. Suspendisse potenti. Phasellus et condimentum nibh, nec sodales lorem. Maecenas.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<h3>section 3</h3>
<p>
3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus ut nibh non eleifend. Etiam non ligula sit amet nunc convallis feugiat sit amet sit amet mauris. Nunc varius vehicula pharetra. Proin sollicitudin imperdiet lorem, nec rutrum lorem posuere ut.
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section4">
<h3>section 4</h3>
<p>
4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum turpis vel sapien luctus, nec laoreet felis vehicula. Integer nec justo odio. Sed posuere nec quam ut semper. Vestibulum malesuada ut sem sagittis gravida. Phasellus porta vitae sem ut euismod. Suspendisse potenti. Phasellus et condimentum nibh, nec sodales lorem. Maecenas.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
text-decoration: none;
outline: none;
}
.nav-tabs {
border-bottom: 1px solid #8e44ad;
display: inline-block;
background: #fff;
}
.nav-tabs > li{
padding: 5px;
border-right:1px solid #8e44ad;
}
.nav-tabs > li > a{
border-radius: 0px;
margin-right: 0px;
padding: 15px 30px;
color: #7a7979;
font-weight: bold;
transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child{
border-right:0px none;
}
.nav-tabs > li > a:hover{
background: #8e44ad;
color: #fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background: #8e44ad;
color:#fff;
}
.tab-content{
margin-top: -5px;
background: #fff;
}
.tab-content > .tab-pane{
padding: 20px;
line-height: 22px;
color:#7a7979;
}
.tab-content > .tab-pane > h3{
margin-top: 0;
text-transform: capitalize;
}

Теги: