Обзор

Индивидуально или сборником

Плагины могут подключаться отдельно (используя отдельные файлы Bootstrap *.js), или все за один раз (используя bootstrap.js или минимизированы bootstrap.min.js).

Атрибуты данных

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

Тем не менее, в некоторых ситуациях может быть желанным отключения этой функции. Таким образом, мы также предоставляем возможность отключить API-атрибуты, через отвязке всех событий в пространстве имен (namespaced) документа, при помощи data api. Это выглядит примерно так:

$(document).off('.data-api')

Также вы можете направить выстрела на определенный плагин, просто включив имя плагина рядом с пространством имен data api, как в примере:

$(document).off('.alert.data-api')

Программный API

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

$('.btn.danger').button('toggle').addClass('fat')

Все методы должны принимать в качестве необязательного параметра или объект, или строка, который нацелен на конкретный метод, или ничего (и таким образом просто инициализировать плагин с поведением по умолчанию):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Каждый плагин также публикует свой собственный конструктор в свойства Constructor: $.fn.popover.Constructor. Если вы хотите получить конкретный экземпляр плагина, загружайте его непосредственно из элемента: $('[rel=popover]').data('popover').

Без конфликта

Иногда необходимо использовать плагины Bootstrap с другими UI фрейморками. В таком случае иногда могут пересекаться их пространства имен. Если такое случается, вы можете вызвать .noConflict в том плагине, который должен вернуть прежнее значение.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

События

Bootstrap предоставляет пользовательские события для большинства уникальных действий плагина. Как правило, они идут в форме инфинитива или причастия - причем инфинитив (например, show) срабатывает в начале события, а форма причастия (например, shown) срабатывает по завершению действия.

По состоянию на 3.0.0, все события Bootstrap с именованными пространствами.

Все события в інфінітиві предоставляют preventDefault функциональность. Это дает возможность останавливать выполнение действий перед стартом.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Переходы transition.js

О переходах

Для простых эффектов перехода, включите transition.js рядом с другими файлами JS. Но если вы используете общую сборку bootstrap.js (или ее минимизированный вариант), этот файл нет необходимости подключать—код уже включен.

Что внутри

Transition.js является базовым помощником для событий transitionEnd, и для эмулятора переходов CSS. Он используется другими плагинами для проверки поддержки переходов CSS и для восстановления висячих переходов.

Модальные окна modal.js

Примеры

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

Пример статического окна

Создание модального окна с заголовком, основным содержанием, и перечнем действий в нижнем колонтитуле.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Название модали</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Живое демо

Модальное окно, созданное с помощью JavaScript, задействуется кликом кнопки, что внизу. Оно будет спадать вниз и уходить вверху страницы.

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Посмотреть демо
      </button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Название модали</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Дополнительные размеры

Модали имеют два дополнительных размера, доступные через модификаторы классов, которые будут размещены на .modal-dialog.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Большая модаль</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Малая модаль</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Использование

Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open к <body> для изменения поведения прокрутки по умолчанию и генерирует .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Через атрибуты данных

Активируйте модальные окна без написания JavaScript. Установите data-toggle="modal" в контроллере элемента, такого как кнопка, рядом с data-target="#foo" или href="#foo", чтобы нацелить определенную модаль для переключения.

<button type="button" data-toggle="modal" data-target="#myModal">Запустить модаль</button>

Через JavaScript

Вызывайте модаль с помощью id myModal с лаконичной записью на JavaScript:

$('#myModal').modal(options)

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. В случае передачи через атрибуты данных, добавьте приставку с названием параметра data, как в примере: data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Методы

.modal(параметры)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Ручное переключение модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')

.modal('show')

Ручное отображения модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий shown.bs.modal).

$('#myModal').modal('show')

.modal('hide')

Ручное сокрытие модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий hidden.bs.modal).

$('#myModal').modal('hide')

События

Класс для модалей в Bootstrap предоставляет несколько событий, чтобы обеспечить функциональность модали.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Выпадающее меню dropdown.js

Примеры

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

Внутри навигационной панели

Внутри навигационных кнопок

Использование

Через атрибуты данных или JavaScript, плагин ниспадающего меню переключает скрытый контент (пункты ниспадающего меню) с помощью класса .open на родительском элементе списка. Когда меню раскрыто, плагин добавляет .dropdown-в обстановке, чтобы предоставить область за пределами ниспадающего меню, при клики по которой, отменяется отображение меню. Note: The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

Через атрибуты данных

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

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Чтобы оставить URL нетронутой, используйте атрибут data-target вместо href="#".

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Через JavaScript

Вызывайте выпадающее меню через JavaScript:

$('.dropdown-toggle').dropdown()

Параметры

Отсутствуют

Методы

$().dropdown('toggle')

Переключайте выпадающее меню в навигационных панелях или навигационных вкладках.

События

Все выпадающие события сгорают при .dropdown-menu родительского элемента.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Отслеживание прокрукти scrollspy.js

Пример с навигационной панелью

Плагин ScrollSpy (переводится как Отслеживание Прокрутки) предназначен для автоматического обновления навигационного нахождения, которое базируется на позиции прокрутки страницы. В нижнем примере прокрутите область под навигационной панелью и проспостерігайте за переходом активного класса между ее пунктами. Подпункты в ниспадающем меню также будут подсвечены при прокрутке.

Использование

Через атрибуты данных

Чтобы легко добавить поведение Отслеживающей Прокрутки (ScrollSpy) к вашей верхней навигационной панели, добавьте data-spy="scroll" элемента, по которому вы хотите следить (наиболее типично - это будет <body>). Затем добавьте атрибут data-target с ID или классом родительского элемента, любого компонента Bootstrap с классом .nav.

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

Вызывайте Отслеживание Прокрутки с помощью JavaScript:

$('body').scrollspy({ target: '.navbar-example' })

Методы

.scrollspy('refresh')

При использовании Отслеживание прокрутки в сочетании с добавлением или удалением элементов из DOM, вам нужно вызвать обновляющий метод, как в примере:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data, как в примере: data offset="".

События

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Переход по вкладкам tab.js

Пример вкладок

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

Использование

Включение области навигации, вкладок через JavaScript (каждая вкладка требует индивидуальной активации):

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете индивидуально активировать вкладку несколько способов:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Разметка

Вы можете активировать вкладку или навигационную кнопку и без написания кода JavaScript, просто указав в элементе data-toggle="tab" или data-toggle="pill". Добавление классов nav и nav-tabs вкладка ul будет внедряться стиль вкладок Bootstrap, при добавлении классов nav и nav-pills будет внедряться стиль навигационных кнопок.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Главная</a></li>
  <li><a href="#profile" data-toggle="tab">Профиль</a></li>
  <li><a href="#messages" data-toggle="tab">Сообщения</a></li>
  <li><a href="#settings" data-toggle="tab">Настройки</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>

Эффект угасания

Чтобы создать эффект плавного отображения вкладок, добавьте .fade каждый .tab-pane. Первая панель вкладки должна также иметь .in для правильного плавного отображения содержимого.

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

Методы

$().tab

Включите элемент вкладки и содержимое контейнера. Вкладка должна иметь или data-targetили href адресный узел контейнера в DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">Главная</a></li>
  <li><a href="#profile" data-toggle="tab">Профиль</a></li>
  <li><a href="#messages" data-toggle="tab">Сообщения</a></li>
  <li><a href="#settings" data-toggle="tab">Настройки</a></li>
</ul>

<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>

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

События

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Подсказки tooltip.js

Примеры

Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame; Подсказки является обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

Наведите курсор мыши на ссылки текста внизу, чтобы увидеть подсказки:

Четыре направления

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Подсказка слева</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Подсказка вверху</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Подсказка внизу</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Подсказка справа</button>

Использование

Плагин подсказок генерирует содержимое и пометку по запросу, и по умолчанию размещает всплывающие подсказки после элементов, которые их вызвали.

Вызов подсказок через JavaScript:

$('#example').tooltip(options)

Разметка

Необходимые для пометки подсказок только атрибут data и title HTML-элементе, на котором вы хотите иметь подсказку. Сгенерированный макет подсказок, довольно проста, хотя и требует позиционирования (по умолчанию установлено top через плагин).

 1 <!-- HTML to write -->
 2 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 3 
 4 <!-- Generated markup by the plugin -->
 5 <div class="tooltip top">
 6   <div class="tooltip-inner">
 7     Some tooltip text!
 8   </div>
 9   <div class="tooltip-arrow"></div>
10 </div>

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием атрибута в data, как в примере: data-animation="".

Методы

$().tooltip(параметры)

Закрепите обработчик подсказки по набору элементов.

.tooltip('show')

Отображает всплывающую подсказку элемента.

$('#element').tooltip('show')

.tooltip('hide')

Скрывает подсказку элемента.

$('#element').tooltip('hide')

.tooltip('toggle')

Переключает подсказку элемента.

$('#element').tooltip('toggle')

.tooltip('destroy')

Скрывает и удаляет подсказку элемента.

$('#element').tooltip('destroy')

События

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Информеры popover.js

Примеры

Добавьте небольшие накладки содержания, вроде тех, которые показываются в iPad, в любых элементов, для размещения дополнительной информации.

Статические информеры

Доступны четыре варианта информеров: вверху, справа, внизу, и слева.

Живое демо

Четыре направления

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер слева
 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер вверху
 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер внизу
 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер справа
 </button>

Использование

Включите информеры через JavaScript:

$('#example').popover(options)

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием атрибута в data, как в примере: data-animation="".

Методы

$().popover(параметры)

Инициализация информеров для набора элементов.

.popover('show')

Отображение информера элемента.

$('#element').popover('show')

.popover('hide')

Сокрытие информера элемента.

$('#element').popover('hide')

.popover('toggle')

Переключение информера элемента.

$('#element').popover('toggle')

.popover('destroy')

Скрытие и удаление информера элемента.

$('#element').popover('destroy')

События

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Уведомления alert.js

Пример уведомлений

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

Использование

Включите возможность закрытия уведомлений через JavaScript:

$(".alert").alert()

Разметка

Просто добавьте data-dismiss="alert", чтобы ваша кнопка закрытия автоматически получала функциональность для закрытия.

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

Методы

$().alert()

Оберните все уведомления с функциональностью закрытия. Чтобы анимировать ваши уведомления после закрытия, убедитесь, что к ним уже применен класса .fade и .in.

.alert('close')

Закрывает уведомления.

$(".alert").alert('close')

События

Bootstrap класс уведомлений предлагает несколько событий для предоставления уведомляющей функциональности.

$('#my-alert').bind('closed.bs.alert', function () {
  // do something…
})

Кнопки button.js

Пример использования

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

Состояние загрузки

Добавьте data-loading-text="Загружается...", чтобы использовать состояние загрузки на кнопке.

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
        Состояние загрузки
      </button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Единичное переключение

Добавьте data-toggle="button", чтобы активировать переключение на единичном кнопке.

<button type="button" class="btn btn-primary" data-toggle="button">Единичное переключение</button>

Галочки

Добавьте data-toggle="buttons" группы галочек, для их стилизации в виде кнопок.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
          <input type="checkbox"> Параметр 1
        </label>
  <label class="btn btn-primary">
          <input type="checkbox"> Параметр 2
        </label>
  <label class="btn btn-primary">
          <input type="checkbox"> Параметр 3
        </label>
</div>

Переключатели

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
          <input type="radio" name="options" id="option1"> Параметр 1
        </label>
  <label class="btn btn-primary">
          <input type="radio" name="options" id="option2"> Параметр 2
        </label>
  <label class="btn btn-primary">
          <input type="radio" name="options" id="option3"> Параметр 3
        </label>
</div>

Использование

Включите кнопки через JavaScript:

$('.btn').button()

Разметка

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

Параметры

Отсутствуют

Методы

$().button('toggle')

Переключите состояние кнопки. Предоставьте кнопки вид, как будто ее активировано.

<button type="button" class="btn btn-primary" data-toggle="button">...</button>

$().button('loading')

Установите кнопки состояние загрузки - заблокируйте ее и измените текст, для случая загрузки. Этот текст должен быть указан в элементе кнопки, используя атрибуты данных data-loading-text.

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

$().button('reset')

Сброс состояния кнопки - изменение текста на первоначальный текст.

$().button(string)

Сброс состояния кнопки - изменение текста на любой указанный текст состояния.

<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

Сворачивание collapse.js

Ознакомление

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

Пример свертывания

Используя плагин свертывания, мы создаем простой акордион посредством расширения компоненты панели.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Пункт Группы Свертывания #1
              </a>
            </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Пункт Группы Свертывания #2
              </a>
            </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                Пункт Группы Свертывания #3
              </a>
            </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

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

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in">...</div>

Использование

Плагин свертывания использует несколько классов для обеспечения плавного подъема:

• .collapse сокрытие содержимого
• .collapse.in отображение содержимого
• .collapsing добавляется в начале перехода, и удаляется после его завершения

Эти классы можно найти в component-animations.less.

Через атрибуты данных

Просто добавьте data-toggle="collapse" и data-target элемента, для автоматического установления контроля над элементами свертывания. Атрибут data-target принимает селектор CSS для применения свертывания. Убедитесь, что добавили класс collapse элементов для свертывания. Если вы хотите, чтобы по умолчанию элемент был открытым, добавьте еще класс in.

Чтобы до группы элементов, которые могут сворачиваться, добавить управления, похоже на аккордеон, добавьте атрибут данных data-parent="#selector". Посмотрите демонстрацию (выше), чтобы увидеть это в действии.

Через JavaScript

Ручное включение с:

$('.collapse').collapse()

Параметры

параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку названия параметра data, как в примере: data-parent="".

Методы

.collapse(параметры)

Активирует свой ??контент как складной элемента. Принимает необязательные параметры object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Переключает складной элемент, чтобы его отобразить или скрыть.

.collapse('show')

Отражает складной элемент.

.collapse('hide')

Скрывает складной элемент.

События

Класс Bootstrap для згортанння представляет несколько событий для подключения функциональности свертывания.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Карусель carousel.js

Примеры

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Дополнительная подпись

Добавлять подпись в ваших слайдов становится легким делом благодаря элементу .carousel-caption внутри любых .item. Это место почти для любого дополнительного HTML, причем содержимое будет автоматически выровнен и форматовано.

Ярлык первого слайда

Здесь произвольный текст. Nulla vitae elit libero, a pharetra augue mollis interdum.

Ярлык второго слайда

Здесь произвольный текст. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ярлык третьего слайда

Здесь произвольный текст. Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<div class="item active">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Использование

Несколько каруселей

Карусели требуют использования id на самой внешнем контейнере, .carousel, для ее управления, и функционости. При добавлении нескольких каруселей, или при изменении карусели id, не забудьте обновить соответствующие элементы управления.

Через атрибуты данных

Используйте атрибуты данных, чтобы легко контролировать позиционирование карусели. data-slide принимает ключевые слова prev или next, которые меняют позицию слайда относительно его текущей позиции. Также вы можете использовать data-slide-to для передачи исходного индекса слайда для карусели data-slide-to="2", который смещает позицию слайда до определенного индекса начиная от 0.

Атрибут data-ride="carousel" используется для обозначения карусели как анимации, в начале загрузки страницы.

Через JavaScript

Вызывайте карусель вручную с:

$('.carousel').carousel()

Параметры

параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data, как в примере: data-interval="".

Методы

.carousel(параметры)

Инициализирует карусель с необязательным параметром типа объект, и начинает цикл прокруток элементов.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Прокрутки элементов карусели слева на право.

.carousel('pause')

Прекращения прокрутки элементов карусели.

.carousel(число)

Прокрутки карусели до определенного кадра (начиная с 0, подобно массиву).

.carousel('prev')

Перейти к предыдущему элементу.

.carousel('next')

Перейти к следующему элементу.

События

Предоставленный Bootstrap класс карусели представляет два события для включения функциональности карусели.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Позиционирование Affix affix.js

Пример

Субнавигация справа является живым примером работы плагина affix.

Использование

Используйте плагин affix с помощью атрибутов данных, или напишите свой собственный JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования содержимого.

Позиционирование через CSS

Плагин affix переключается между тремя классами, каждый из которых соответствует определенному состоянию: .affix, .affix-topи .affix-bottom. Вы должны самостоятельно создать стили для этих классов (независимо от этого плагина), для обработки текущей позиции.

Вот как работает плагин affix:

1. Сначала, плагин добавляет .affix-top для обозначения элемента, находящегося выше. На данный момент позиционирования через CSS не требуется.
2. Прокрутки мимо элемент, который вы хотите закрепить, должно актуализировать закрепления. Это тот момент, когда .affix заменяет .affix-top и устанавливает position: fixed; (обеспеченное кодом Bootstrap CSS).
3. Если нижнее смещение определено, прокрутки вниз должен заменить .affix, .affix-bottom. Поскольку смещение является необязательным, вам необходимо установить соответствующие CSS. В данном случае, добавьте position: absolute;, когда это необходимо. Плагин использует атрибуты данных или параметры JavaScript для определения позиции элемента.

Следуйте вышеуказанным шагам, чтобы в дальнейшем установить CSS для любого использования опций.

Через атрибуты данных

Можно легко предоставить поведение affix любому элементу, просто добавив data-spy="affix" к элементу, по которому вы хотите следить. Используйте смещение для определения, когда следует отключать плагин для заданного элемента.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Через JavaScript

Вызов плагина affix через JavaScript:

  $('#my-affix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data, как в примере: data offset-top="200".

События

Bootstrap класс affix предоставляет несколько событий для подключения в функциональности.