Bootstrap Tab Tooltip Style / Элементы / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 1102

Количество символов:

Посмотрели: 2484 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/D8SANx

Информация: Пользователям

Информация: Правообладателям

Теги: Tab, подсказка таб, Bootstrap, tooltip, таб

Поделился: BootstrapТема

Добавлено: 2016-06-08 в 21:23

Метка: 1581146979

⇄ ⇅

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;
 }
}
</style>

<ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a href="#s1" aria-controls="home" role="tab" data-toggle="tab">Вкладка 1</a></li>
 <li role="presentation"><a href="#s2" aria-controls="profile" role="tab" data-toggle="tab">Вкладка 2</a></li>
 <li role="presentation"><a href="#s3" aria-controls="messages" role="tab" data-toggle="tab">Вкладка 3</a></li>
 </ul>

<div class="tab-content">
 <div role="tabpanel" class="tab-pane fade in active" id="s1">
 <p>1 - Здесь находится содержимое таб панели, это демо текст для отображения работы адаптивного элемента, переключите вкладку чтобы посмотреть содержимое соседней секции.</p>
 </div>
 <div role="tabpanel" class="tab-pane fade" id="s2">
 <p>
<img src="http://drawings-girls.ucoz.net/2015/07/fentezy-devushka-s-krilyami-i-rogami.jpg" class="img-responsive" alt="demo image" />
</p>
 </div>
 <div role="tabpanel" class="tab-pane fade" id="s3">
 <p>3 - Здесь находится содержимое таб панели, это демо текст для отображения работы адаптивного элемента, переключите вкладку чтобы посмотреть содержимое соседней секции.</p>
 </div>
 </div>

</div>

</div>

</div>
 </div>

BootstrapTema

Bootstrap Tab Tooltip Style

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0