Macaw Tabs - Вкладки / Дизайн / Плагины Bootstrap

Версия: v1.0.4

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.38 Mb

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

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

Скачать бесплатно

Посетить Демо страница

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

Скачали бесплатно: 15 раз

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

Рейтинг: 3.5 / 5 - 6 голосов

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

Авторство: https://github.com/htmlcssfreebies/macaw-tabs

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

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

Теги: вкладки, Tab, tabs, Plugin

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

Добавлено: 2023-01-16 в 17:29

Метка: 1673879381

⇄ ⇅

<!DOCTYPE html>
<html lang="en-US">
 <head>
 
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Macaw Tabs - BootstrapTema</title>
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/macaw-tabs/macaw-power-tabs-reset.css" type="text/css" media="all" />
 <link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/macaw-tabs/macaw-power-tabs.css" type="text/css" media="all" />
 </head>

<header>
 <h1>Macaw Tabs - BootstrapTema</h1>
 <p>&#1050;&#1088;&#1086;&#1096;&#1077;&#1095;&#1085;&#1099;&#1081;&#32;&#1080;&#32;&#1087;&#1088;&#1086;&#1089;&#1090;&#1086;&#1081;&#32;&#1074;&#32;&#1080;&#1089;&#1087;&#1086;&#1083;&#1100;&#1079;&#1086;&#1074;&#1072;&#1085;&#1080;&#1080;&#32;&#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#32;&#106;&#81;&#117;&#101;&#114;&#121;&#32;&#1076;&#1083;&#1103;&#32;&#1089;&#1086;&#1079;&#1076;&#1072;&#1085;&#1080;&#1103;&#32;&#1086;&#1090;&#1079;&#1099;&#1074;&#1095;&#1080;&#1074;&#1086;&#1075;&#1086;&#44;&#32;&#1076;&#1086;&#1089;&#1090;&#1091;&#1087;&#1085;&#1086;&#1075;&#1086;&#44;&#32;&#1072;&#1085;&#1080;&#1084;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1085;&#1086;&#1075;&#1086;&#44;&#32;&#1082;&#1088;&#1072;&#1089;&#1080;&#1074;&#1086;&#1075;&#1086;&#32;&#1087;&#1086;&#1083;&#1100;&#1079;&#1086;&#1074;&#1072;&#1090;&#1077;&#1083;&#1100;&#1089;&#1082;&#1086;&#1075;&#1086;&#32;&#1080;&#1085;&#1090;&#1077;&#1088;&#1092;&#1077;&#1081;&#1089;&#1072;&#32;&#1074;&#1082;&#1083;&#1072;&#1076;&#1086;&#1082;&#32;&#1085;&#1072;&#32;&#1074;&#1077;&#1073;&#45;&#1089;&#1090;&#1088;&#1072;&#1085;&#1080;&#1094;&#1077;&#46;.</p>
 <hr>
 <ul>
 <li>&#1048;&#1089;&#1087;&#1086;&#1083;&#1100;&#1079;&#1091;&#1081;&#1090;&#1077; <kbd>Arrow</kbd> &#1082;&#1083;&#1072;&#1074;&#1080;&#1096;&#1080;&#32;&#1076;&#1083;&#1103;&#32;&#1085;&#1072;&#1074;&#1080;&#1075;&#1072;&#1094;&#1080;&#1080;&#32;&#1087;&#1086;&#32;&#1074;&#1082;&#1083;&#1072;&#1076;&#1082;&#1072;&#1084;&#46;</li>
 <li>&#1054;&#1090;&#1086;&#1073;&#1088;&#1072;&#1079;&#1080;&#1090;&#1077;&#32;&#1087;&#1072;&#1085;&#1077;&#1083;&#1100;&#32;&#1074;&#1082;&#1083;&#1072;&#1076;&#1086;&#1082;&#44;&#32;&#1085;&#1072;&#1078;&#1072;&#1074; <kbd>Space</kbd> &#1080;&#1083;&#1080; <kbd>Enter</kbd>.</li>
 </ul>
 </header>

<main>
 
 <div class="macaw-tabs macaw-power-tabs">
 <div role="tablist" aria-label="Resources">
 <button role="tab" aria-selected="true" aria-controls="blog-tab" id="blog"><span class="material-icons icon">assignment</span> <span class="label">Blog</span></button>
 <button role="tab" aria-selected="false" aria-controls="events-tab" id="events" tabindex="-1"><span class="material-icons icon">settings</span> <span class="label">Events</span></button>
 <button role="tab" aria-selected="false" aria-controls="deals-tab" id="deals" tabindex="-1"><span class="material-icons icon">lock</span> <span class="label">Deals</span></button>
 <button role="tab" aria-selected="false" aria-controls="support-tab" id="support" tabindex="-1"><span class="material-icons icon">build</span> <span class="label">Support</span></button>
 </div>

<div tabindex="0" role="tabpanel" aria-labelledby="blog" id="blog-tab">
 <p>Vestibulum vitae <a href="#">feugiat quam</a>, eget porttitor lacus. Praesent blandit gravida neque at vestibulum. Nullam congue mauris massa, sit amet mattis leo fringilla nec. Quisque accumsan scelerisque leo eu laoreet. Aliquam libero tortor.</p>
 <p>Cras volutpat diam quis odio cursus accumsan. Ut tincidunt cursus sagittis. Sed lobortis luctus interdum. Proin placerat, augue non placerat egestas, mi ante sagittis nulla, vitae auctor lectus sem varius nunc. Quisque at elit non nisl molestie consectetur.</p>
 </div>
 <div tabindex="0" role="tabpanel" aria-labelledby="events" id="events-tab" hidden>
 <p>Nullam est ipsum, vestibulum non ullamcorper vitae, <a href="#">volutpat vitae enim</a>. Donec ligula libero, sodales faucibus mauris ut, aliquet interdum sem. Pellentesque fermentum mi dignissim dui rhoncus pellentesque. Quisque blandit eros vel purus suscipit, sit amet aliquet leo lobortis.</p>
 <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ullamcorper tempor lacinia. Nunc commodo elit eu feugiat bibendum. Curabitur et dapibus libero. Vestibulum at accumsan diam. Sed eget cursus ipsum, in sagittis arcu. Nulla dolor dolor.</p>
 </div>
 <div tabindex="0" role="tabpanel" aria-labelledby="deals" id="deals-tab" hidden>
 <p>Sed euismod arcu tincidunt metus dapibus ultrices. Morbi varius imperdiet tortor sit amet imperdiet. <a href="#">Donec at lacinia mi</a>. Suspendisse eget malesuada turpis. Duis sit amet velit neque. Mauris in elit purus. In nulla dui, pretium vitae feugiat a, luctus sit amet metus.</p>
 <p>Ut eget consequat augue. Aenean consectetur, diam congue viverra lobortis, velit felis molestie nulla, at iaculis mi quam ut enim. Fusce in mattis ante, a ultricies lacus. Nunc vulputate consequat tellus ut convallis. Nullam vulputate pharetra dignissim. Praesent nec posuere nisl. Sed sollicitudin et nunc nec bibendum.</p>
 </div>
 <div tabindex="0" role="tabpanel" aria-labelledby="support" id="support-tab" hidden>
 <p>Mauris semper ac <a href="#">libero ut blandit</a>. Vestibulum nec magna a tortor sodales sagittis sit amet nec lectus. Duis egestas ullamcorper nunc, vel sodales elit vestibulum non. Morbi interdum viverra elit non pharetra. Cras diam ligula, maximus in venenatis eu, varius ac urna. Fusce suscipit gravida diam, nec molestie mi facilisis eget.</p>
 <p>Ut placerat malesuada libero fringilla elementum. Etiam finibus sollicitudin nisl, quis faucibus mauris pellentesque at. Morbi condimentum quis arcu nec rhoncus. Aliquam ultricies justo sed nulla efficitur, ac pulvinar neque commodo. Aenean ac commodo mauris, eget feugiat enim.</p>
 </div>
 </div>
 
 </main>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://bootstraptema.ru/plugins/2023/macaw-tabs/macaw-tabs.js"></script>

<script>
 ( function ( $ ) {
 // Document Ready
 $( function () {
 $( '.macaw-tabs' ).macawTabs();
 } );
 } )( jQuery );
 </script>
 </body>
</html>

BootstrapTema

Macaw Tabs - Вкладки

Скриншот

Подробнее

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

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

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