Bootstrap Tab — стиль 29

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

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

1 — Это текст специально написан для демонстрации работы эффекта. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.

2 — Это текст специально написан для демонстрации работы эффекта. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.

3 — Это текст специально написан для демонстрации работы эффекта. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.

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>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
<p>1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
<p>2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
<p>3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis. </p>
</div>
</div>
</div>
</div>
</div>
</div>

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

a:hover,a:focus{
text-decoration: none;
outline: none;
}
.tab .nav-tabs{
border-bottom: 0 none;
background: transparent;
}
.tab .nav-tabs li a{
font-size: 16px;
color: #333;
background: transparent;
border: none;
padding: 12px 22px;
border-radius: 30px;
position: relative;
}
.tab .nav-tabs li.active a{
border: 0 none;
background: #fa6e6f;
color: #fff;
}
.tab .nav-tabs li.active a:after{
content: "";
position: absolute;
left: 45%;
bottom: -14px;
border: 7px solid transparent;
border-top: 7px solid #fa6e6f;
}
.tab .tab-content{
padding: 12px;
font-size: 14px;
color: #5a5c5d;
line-height: 24px;
margin-top: 20px;
background: #fff;
border-bottom: 3px solid #fa6e6f;
}
@media only screen and (max-width: 480px) {
.tab .nav-tabs li{
width: 100%;
margin-bottom: 10px;
}
.tab .nav-tabs li a{
border: 1px solid #d3d3d3;
}
.tab .nav-tabs li.active a:after{
border:none;
}
}



Теги:
0

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

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