Bootstrap Tab — стиль 9

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

<div class="container">
<div class="row">
<div class="col-md-6">
<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>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
1-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper id neque non egestas. Curabitur dapibus interdum mi, in faucibus neque elementum sed. Vivamus rutrum tristique libero ac aliquam. Nam vitae velit non libero sodales posuere ut vel quam. Proin.
</div>
<div role="tabpanel" class="tab-pane fade" id="Section2">
2-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dapibus ante. In hac habitasse platea dictumst. Aenean nulla dui, viverra quis lobortis at, aliquet vitae dolor. Cras ut nisl lorem. Aenean a sodales turpis, ac semper quam. In a massa purus. Phasellus efficitur nec purus sed tincidunt. Vestibulum ante.
</div>
<div role="tabpanel" class="tab-pane fade" id="Section3">
3-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl dapibus, dignissim purus id, dapibus justo. Duis a ante a erat porta vehicula sed a tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mauris lorem, sodales sit amet magna vel, euismod pulvinar nunc. Sed porttitor efficitur est at sodales. Quisque in lorem.
</div>
</div>
</div>
</div>
</div>
</div>

a:hover,a:focus{
text-decoration: none;
outline: none;
}
.nav-tabs {
border-bottom: 1px solid #e4e4e4;
}
.nav-tabs > li > a{
border-radius: 0px;
border: 1px solid #e4e4e4;
border-right: 0px none;
margin-right: 0px;
padding: 8px 17px;
color:#222222;
transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child{
border-right:1px solid #e4e4e4;
}
.nav-tabs > li > a{
padding: 15px 20px;
}
.nav-tabs > li > a:hover{
border: 1px solid #ea5e50;
border-right: 0px none;
background: #ea5e50;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
border-top: 1px solid #ea5e50;
border-right: 0px none;
color: #ea5e50;
}
.tab-content > .tab-pane{
border: 1px solid #e4e4e4;
border-top: 0px none;
padding: 20px;
line-height: 22px;
color: #7e828a;
}