Bootstrap Tab — стиль 13

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

Демо Табов — стиль 13

Section 1

Это текст специально написан для демонстрации работы эффекта. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.

Section 2

Это текст специально написан для демонстрации работы эффекта. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.

Section 3

Это текст специально написан для демонстрации работы эффекта. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.

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

<div class="container">
<div class="row">
<div class="col-md-8">
<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"><i class="fa fa-envelope-o"></i>Section 1</a></li>
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cube"></i>Section 2</a></li>
<li role="presentation"><a href="#Section3" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-comment"></i>Section 3</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.
</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section2">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.
</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="Section3">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus purus euismod nec. Duis in lacinia neque. Etiam tellus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

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

.tab .nav-tabs > li{
margin-right: 2px;
}
.tab .nav-tabs > li > a{
border: none;
padding: 18px 25px;
color:#fff;
background:#272e38;
border-radius:0;
}
.tab .nav-tabs > li > a > i{
font-size:14px;
margin-right:10px;
}
.tab .nav-tabs > li.active > a,
.tab .nav-tabs > li.active > a:focus,
.tab .nav-tabs > li.active > a:hover{
border: none;
background: #e74c3c;
color:#fff;
transition:background 0.20s linear;
}
.tab .nav-tabs li.active:after {
content: "";
position: absolute;
bottom: -30px;
left: 37%;
border: 15px solid transparent;
border-top-color: #e74c3c ;
}
.tab .tab-content{
background: #fdfdfd;
line-height: 25px;
border: 1px solid #ddd;
border-top:5px solid #e74c3c;
border-bottom:5px solid #e74c3c;
padding:30px 25px;
}
@media only screen and (max-width: 480px){
.tab > .nav-tabs li{
width:100%;
}
.tab .nav-tabs > li > a{
padding: 20px;
}
.tab .nav-tabs > li.active:after {
border:none;
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *