Bootstrap Tab — стиль 36

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

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

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tab" role="tabpanel">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec. </p>
<h3>Web Development</h3>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec. </p>
<h3>Brand Building</h3>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec. </p>
<h3>Responsive Design</h3>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec. </p>
<h3>Clean & Clear Design</h3>
</div>
</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>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab .nav-tabs{
box-shadow: -1px 0 2px #6676ff;
border-bottom: 0 none;
}
.tab .nav-tabs li{
width: 25%;
}
.tab .nav-tabs li a{
display: block;
font-size: 14px;
color: #fff;
text-align: center;
border: none;
padding: 18px;
background: #272e38;
border-radius: 0;
margin: 0;
position: relative;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover{
background: #6676ff;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover{
border: none;
background: #6676ff;
color: #fff;
transition: all 0.20s ease 0s;
}
.tab .nav-tabs li.active a:after{
content: "";
position: absolute;
top: -30px;
left: 38%;
border: 15px solid transparent;
border-bottom-color: #6676ff;
}
.tab .tab-content{
font-size: 14px;
color: #fff;
background: #333;
line-height: 25px;
padding: 20px;
}
.tab .tab-content h3{
font-size: 20px;
color: #6676ff;
}
@media only screen and (max-width: 480px){
.tab .nav-tabs li{
width: 100%;
margin-bottom: 2px;
}
.tab .nav-tabs li.active a:after{
border: none;
}
}

Теги: