Bootstrap Tab — стиль 18

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

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

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab">
<!-- 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">Section 1</a></li>
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" class="orange">Section 2</a></li>
<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" class="pink">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. 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" 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" 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>
</div>

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

.nav-tabs {
list-style: none;
padding-left: 0;
}
.nav-tabs li{
color: #fff;
cursor: pointer;
margin-right: 10px;
display: inline-block;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(330deg);
transition: background 0.2s, color 0.2s, transform 0.5s, margin 0.4s;
}
.nav-tabs li:hover {
margin-right: 30px;
}
.nav-tabs li.active {
color: #3498db;
background: #f2f2f2;
transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg) skewX(330deg);
transition: all 0.8s ease 0s;
}
.nav-tabs li a{
border:none;
outline:none;
padding: 14px 28px;
color:#fff;
background: #3498db;
}
.nav-tabs li a:hover{
color:#333;
}
.tab .tab-content h4{
color:#3498db;
}
@media only screen and (max-width: 480px) {
.nav-tabs li{
width:100%;
margin:0 0 10px 0;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg);
}
.nav-tabs li.active {
border-bottom:1px solid #D3D3D3;
transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg) skewX(0deg);
}
}

Теги: