Twitter Bootstrap 3 — компоненты JavaScript

Во-первых, вы должны предоставить класс «выпадающий» любому родительскому элементу, который вы хотите рассматривать как выпадающий элемент. В моем случае я использовал элемент div. Вы даже можете сделать элемент li как «выпадающий». Затем вы должны поместить тег «<a>» непосредственно внутри выпадающего элемента. Добавьте новый атрибут «data-toggle» в тег ссылки и укажите значение «dropdown». Наконец добавьте список ul под тегом link. Вы должны добавить класс как «выпадающее меню» к тегу ul.

Чтобы добавить разделитель между элементами li, добавьте в список новый элемент emplty li с классом «divider».

если вам не нравятся атрибуты data- *, вы можете даже вызвать раскрывающийся список с помощью jQuery. Присвойте уникальный идентификатор элементу ссылки и вызовите выпадающий метод, как показано ниже:

 $('#myDropDown').dropdown();

ScrollSpy

ScrollSpy — интересный модуль JavaScript, добавленный в библиотеку Twitter Bootstrap. Это в основном комбинация навигационного меню и содержимого ниже. Его роль заключается в обновлении активного элемента на панели навигации при прокрутке области содержимого.

Чтобы использовать функцию ScrollSpy, необходимо добавить атрибут data-spy = «scroll» и data-target = «# top-navigation» к элементу body. Здесь # top-navigation — это идентификатор моей панели навигации. Убедитесь, что ссылки на панели навигации являются внутренними ссылками. Смотрите демонстрационную страницу для живого примера.

Вкладки

Вкладки Twitter Bootstrap 3 черпают вдохновение из традиционных вкладок jQuery. Они оба выглядят и функционируют одинаково. Чтобы использовать вкладки Bootstrap, вам нужно определить два отдельных раздела: вкладки навигации и области вкладок.

Разметка идет как ниже:

 <!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Навигация создается с использованием элемента ul с классом nav-tabs, в то время как дополнительный класс nav используется для применения стиля CSS навигации. Каждый элемент li состоит из внутренней ссылки, которая должна определять атрибут «data-toggle» как «tab». Это вызывает JavaScript-вкладки Twitter Bootstrap и отображается соответствующая область вкладок.

Что касается области вкладок, она состоит из набора элементов div. У родительского элемента div должен быть класс «tab-content», а у дочернего элемента div должен быть класс «tab-pane». Каждая вкладка должна иметь идентификатор, соответствующий внутренним ссылкам, определенным в навигации по вкладкам. В приведенном выше примере я установил класс первой панели вкладок как активный. Это делает его видимым по умолчанию.

ToolTip

ToolTip — чрезвычайно полезный плагин JavaScript, предоставляемый Twitter Bootstrap 3. Он помогает отображать тексты справки на любом элементе HTML. Он также совместим с разными браузерами!

Чтобы использовать всплывающую подсказку, разметка выглядит следующим образом:

 <button id="myButton" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>

Приведенная выше разметка отображает кнопку с функцией всплывающей подсказки. Атрибут «data-toggle» используется Bootstrap для определения, на каком элементе должна отображаться подсказка. Атрибут «data-original» используется для определения того, что происходит внутри всплывающей подсказки. Атрибут «размещение данных» используется, чтобы помочь при начальной загрузке показать подсказку.

 $('#myButton').tooltip();

 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
          Popover on left
        </button>

 <button id="myPopover" type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-html="true" data-content="<a href=\"http://www.google.com\">Go to google</a>" data-original-title="" title="">
          Popover on left
        </button>

 $('#myButton').popover();

 <div class="alert alert-warning fade in">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
      </div>