Bootstrap вкладки, выпадающие и динамические пункты меню. Нет ничего проще

Приветствую всех гостей обучающего блога и конечно же моих любимых подписчиков. В сегодняшней публикации мы будем учиться с вами создавать Bootstrap вкладки. Это очень полезный элемент, без которого не может обойтись ни одно веб-приложение или сайт.

Именно поэтому я расскажу вам обо всех способах создания различных видов вкладок как с помощью только фреймворка, так и с помощью JS, покажу как реализуются динамические вкладки и конечно же к каждому ключевому моменту прикреплю конкретный пример. Пришло время разбирать новый материал!

Несколько слов о назначении вкладок

Любой даже самый простой сайт включает в себя навигационную панель или проще говоря меню. Обычно оно реализуется при помощи простого маркированного списка <ul> ну или если пользоваться инструментами html5, то в таком случае тегом <menu>. Однако после указания на странице, что данный блок относится к меню, нам нужно к нему приписать соответствующие стилевые характеристики.

Запустите данный код и вы увидите, что отобразится на странице:

<menu>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Продукция</a></li>
  <li><a href="#">Акции</a></li>
  <li><a href="#">Контакты</a></li>
</menu>

В изучаемом фреймворке стилизация блоков уже реализована. При чем в нескольких вариантах. Поэтому разработчику остается только прописать выбранные классы, подкорректировать внешний вид навигационной панели и наслаждаться проделанной работой.

Далее я пошагово расскажу вам про все варианты реализации вкладок и про используемые для этого классы в Bootstrap 3.

Tabs

Начнем с самого простого. Для начала нам нужно видоизменить представленный выше кусочек кода, чтобы подготовить его для работы с Бутстрапом. Для этого перепишите его следующим образом:

<ul class="nav">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Продукция</a></li>
  <li><a href="#">Акции</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

Класс nav указывает, что это меню.

Во фреймворке предусмотрен такой класс, как nav-tabs. Он как раз и реализует простой вид вкладок. Добавьте к классу еще одно наименование:

<ul class="nav nav-tabs">

и запустите пример. Как видите благодаря табам названия пунктов аккуратно расположилось сверху слева страницы с определенным отступом и определением выбранной вкладки.

Tabs and Dropdown Menu

Сразу же покажу как благодаря табу реализовывается выпадающий список пунктов в навигационной панели. Для этого необходимо добавить такие классы, как dropdown для указания, что в этом месте будет расположен выпадающий список, dropdown- menu, для определения пунктов меню, а также атрибут data-toggle="dropdown".

<ul class="nav nav-tabs">
  <li><a href="#">Главная</a></li>
 <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Продукция<span class="caret"></span></a>
 <ul class="dropdown-menu">
      <li><a href="#">Диваны</a></li>
      <li><a href="#">Кровати</a></li>
      <li><a href="#">Кресла</a></li> 
    </ul>
</li>
  <li><a href="#">Акции</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

Pills

Помимо Tabs существует и другой элемент для создания вкладок, который несколько отличается своим внешним видом. Это nav-pills. Сравните результаты выполнения приложений.

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
 <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Продукция<span class="caret"></span></a>
 <ul class="dropdown-menu">
      <li><a href="#">Диваны</a></li>
      <li><a href="#">Кровати</a></li>
      <li><a href="#">Кресла</a></li> 
    </ul>
</li>
  <li><a href="#">Акции</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

Динамические вкладки

На данный момент у вас есть базовый набор инструментов для создания простеньких вложений. Однако набор станет полным, если вы научитесь создавать динамические вкладки.

В этом случае созданные табы и пилы становятся переключаемыми, то есть происходит переход к якорю на другой вкладке. Для начала рассмотрим случай с Tabs.

Dynamic /Toggleable Tabs and Pills

Для того чтобы вкладки стали динамическими, нужно к каждой ссылке добавить атрибут data-toggle="tab".

Далее в блоках укажите уникальные идентификаторы и добавьте класс tab-pane.

При этом все переключаемые блоки должны быть помещены в общий класс tab-content.

В качестве дополнительного стилевого оформления я добавил классы fade, который реализует плавный переход, и nav-justified, благодаря которому пункты меню будут располагаться по центру практически на весь экран.

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a data-toggle="tab" href="#home">Главная</a></li>
    <li><a data-toggle="tab" href="#prod">Продукция</a></li>
    <li><a data-toggle="tab" href="#sale">Акции</a></li>
    <li><a data-toggle="tab" href="#cont">Контакты</a></li>
  </ul>
 
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>Главная</h3>
      <p>Описание преимуществ компании.</p>
    </div>
    <div id="prod" class="tab-pane fade">
      <h3>Продукция</h3>
      <p>Каталоги имеющейся продукции.</p>
    </div>
    <div id="sale" class="tab-pane fade">
      <h3>Акции2</h3>
      <p>Список действующих акций.</p>
    </div>
    <div id="cont" class="tab-pane fade">
      <h3>Контакты</h3>
      <p>Наши контакты</p>
    </div>
  </div>

Чтобы данный код подогнать под Pills, необходимо выполнить изменение всего лишь одного атрибута:

везде вместо data-toggle="tab" прописать data-toggle="pill"

Реализация динамических вкладок с помощью JavaScript

В некоторых случаях для реализации переключаемых вкладок используется JavaScript, который определяет выбранный пункт и показывает его. Для этого не нужно прописывать дополнительных атрибутов.

<ul class="nav nav-pills nav-justified">
    <li class="active"><a data-toggle="tab" href="#home">Главная</a></li>
    <li><a  href="#prod">Продукция</a></li>
    <li><a  href="#sale">Акции</a></li>
    <li><a  href="#cont">Контакты</a></li>
  </ul>
 
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>Главная</h3>
      <p>Описание преимуществ компании.</p>
    </div>
    <div id="prod" class="tab-pane fade">
      <h3>Продукция</h3>
      <p>Каталоги имеющейся продукции.</p>
    </div>
    <div id="sale" class="tab-pane fade">
      <h3>Акции2</h3>
      <p>Список действующих акций.</p>
    </div>
    <div id="cont" class="tab-pane fade">
      <h3>Контакты</h3>
      <p>Наши контакты</p>
    </div>
  </div>
/*Скрипт для переключения вкладок*/
<script>
$(document).ready(function(){
    $(".nav-pills a").click(function(){
        $(this).tab('show');
    });
});
</script>

Как видите всего лишь два основных класса и несколько атрибутов помогают создать красивые вкладки навигационной панели.

Если вам понравилась моя статья, то обязательно подписывайтесь на обновления моего блога. Впереди еще много всего интересного. И не жадничайте, а делитесь ссылкой с коллегами и друзьями. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1477 раз