Bootstrap Tab — стиль 34

Подробное описание и демонстрация работы вкладок для сайта под номером №34 для библиотеки 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>
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum ornare nibh, nec placerat mauris ultricies quis. Vestibulum quis elit vestibulum, tincidunt sem a, blandit purus. Nullam et ullamcorper velit, eget porta felis. Vivamus hendrerit nisl eu ante tincidunt sodales. Sed nibh tellus, feugiat ac egestas sed, convallis id metus.
</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section2">
<h3>Section 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum ornare nibh, nec placerat mauris ultricies quis. Vestibulum quis elit vestibulum, tincidunt sem a, blandit purus. Nullam et ullamcorper velit, eget porta felis. Vivamus hendrerit nisl eu ante tincidunt sodales. Sed nibh tellus, feugiat ac egestas sed, convallis id metus.
</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section3">
<h3>Section 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum ornare nibh, nec placerat mauris ultricies quis. Vestibulum quis elit vestibulum, tincidunt sem a, blandit purus. Nullam et ullamcorper velit, eget porta felis. Vivamus hendrerit nisl eu ante tincidunt sodales. Sed nibh tellus, feugiat ac egestas sed, convallis id metus.
</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section4">
<h3>Section 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum ornare nibh, nec placerat mauris ultricies quis. Vestibulum quis elit vestibulum, tincidunt sem a, blandit purus. Nullam et ullamcorper velit, eget porta felis. Vivamus hendrerit nisl eu ante tincidunt sodales. Sed nibh tellus, feugiat ac egestas sed, convallis id metus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab .nav-tabs{
border-bottom: none;
}
.tab .nav-tabs li a{
font-size: 14px;
color: #333;
background: #eee;
border-radius: 0;
border: none;
border-left: 5px solid #807979;
margin: 0;
padding: 9px 15px;
text-transform: uppercase;
position: relative;
}
.tab .nav-tabs li a:hover{
background: #fff;
color: #333;
border-left-color: #807979;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover{
background: #fff;
color: #333;
border: none;
border-left: 5px solid #fe9040;
}
.tab .tab-content{
font-size: 14px;
color: #7e828a;
line-height: 24px;
background: #fff;
border: none;
padding: 15px;
}
.tab .tab-content h3{
font-size: 24px;
}
@media screen and (max-width: 480px){
.tab .nav-tabs li{ width:100%; }
}

Теги: