Обзор

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

Плагины могут подключаться отдельно (используя отдельные файлы 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()                      // инициализируется по умолчанию
$('#myModal').modal({ keyboard: false })   // инициализируется без клавиатуры
$('#myModal').modal('show')                // инициализирует и сразу показывает

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

Настройки по умолчанию

Вы можете изменить параметры по умолчанию для плагина путем изменения плагина Constructor.DEFAULTS объект:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // по умолчанию для изменения модального плагина `клавиатура` опцию в false

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

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

var bootstrapButton = $.fn.button.noConflict() // возврат $.ФН.кнопку на ранее присвоенное значение
$.fn.bootstrapBtn = bootstrapButton            // даем $().bootstrapBtn в Bootstrap функциональности

События

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

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

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // остановок модальное к показу
})

Номера версий

В версии Bootstrap'ы плагины jQuery, которые могут быть доступны через VERSION собственность плагина конструктор. Например, для плагина подсказка:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Никаких специальных откаты, когда JavaScript отключены

Bootstrap с плагинами не падают обратно особенно изящно, когда JavaScript отключена. Если вы заботитесь об опыте пользователя, в этом случае используйте <noscript>, чтобы объяснить ситуацию (и как включить JavaScript) для пользователей, и/или добавить свои собственные откаты.

Переходы transition.js

О переходах

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

Что внутри

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

Отключение переходы

Переходы можно глобально отключить, используя следующие JavaScript фрагментов, которые должны наступить после transition.js (или bootstrap.js или bootstrap.min.js, Как случай может быть) Загрузил:

$.support.transition = false

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

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

Из-за как HTML5 и определяет его семантики, autofocus HTML-атрибут не влияет на Bootstrap модальные глаголы. Чтобы добиться такого же эффекта, используя пользовательские JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Примеры

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

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.модал-контент -->
  </div><!-- /.модальное окно -->
</div><!-- /.модальные -->

Живое демо

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

<!-- Триггер кнопка модали-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Модаль -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

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

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

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

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

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

Удаление анимации

Для модальности, которые просто появляются, а не исчезают в просмотреть, удалить .fade класс модальные разметки.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

С помощью блочной системы

Чтобы воспользоваться преимуществами Bootstrap блочная система в течение модал, просто гнездо .row с .modal-body, а затем использовать нормальную блочную систему классов.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.модал-контент -->
  </div><!-- /.модальное окно -->
</div><!-- /.модальные -->

Различные модальные содержание, основанное на кнопку пуска

Есть куча кнопок, вызывает модальный, просто с немного разным содержимым? Используйте event.relatedTarget и Сообщение: data-* атрибуты (возможно через jQuery) чтобы разнообразить содержимое модального в зависимости от того, какая кнопка была нажата. Смотрите модальные событий документам подробные сведения о relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Кнопка, которая срабатывает модал
  var recipient = button.data('whatever') // Извлечение информации из данных-* атрибутов
  // Если необходимо, вы могли бы начать здесь AJAX-запрос (и выполните обновление в обратного вызова).
  // Обновление содержания модального по. Мы будем использовать jQuery здесь, но вместо него можно использовать привязки данных библиотеки или других методов.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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

Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или 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">Launch modal</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(options)

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

$('#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')

.modal('handleUpdate')

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

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

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

События

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

Все модальные событий в самой модальной (т. е. <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // сделать что-то...
})

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

Примеры

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

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

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

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

Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

На мобильных устройствах, открывая выпадающие элементы добавляется .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню при нажатии снаружи, необходимое условие правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.

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

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

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

Через JavaScript

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

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

Параметры

None

Методы

$().dropdown('toggle')

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

События

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

Все выпадающие события relatedTarget свойство, значением которого является переключение элемента привязки.

$('#myDropdown').on('show.bs.dropdown', function () {
  // сделать что-то...
})

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

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

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

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

Требуется относительное позиционирование

Независимо от метода реализации, scrollspy требует использования position: relative; на элемент, который вы шпионите за. В большинстве случаев это <body>. Когда scrollspying на другие элементы, помимо <body>, Для height Set и overflow-y: scroll; применены.

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

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

body {
  position: relative;
}

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

Через JavaScript

После добавления position: relative; в вашу CSS, вызвать scrollspy через 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 () {
  // сделать что-то...
})

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

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

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

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

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

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

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

$('#myTabs a[href="#profile"]').tab('show') Разделе // выбрать по имени
$('#myTabs a:first').tab('show') Разделе // выбрать первые
$('#myTabs a:last').tab('show') Вкладка // выбора в прошлом
$('#myTabs li:eq(2) a').tab('show') Вкладка // выбрать третий (в 0-индексации)

Разметка

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

<div>

  <!-- Навигационные вкладки -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Вкладки панелей -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

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

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

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

Методы

$().tab

Активирует вкладку элемент и содержимого контейнера. Вкладка должна иметь либо data-target или href таргетинг узла контейнера на DOM. В приведенных выше примерах, вкладки <a>с data-toggle="tab" атрибутами.

.tab('show')

Выбирает вкладку и показывает его содержимое. Любой другой вкладке, что ранее был выбран снимается и его содержимое скрыто. Возвращает абоненту до панели вкладки фактически доказано (т. е. shown.bs.tab события).

$('#someTab').tab('show')

События

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

1. hide.bs.tab (текущей активной вкладки)
2. show.bs.tab (В К-быть-показано вкладке)
3. hidden.bs.tab (на предыдущей активной вкладки, тот же, что для hide.bs.tab событие)
4. shown.bs.tab (на Ново-активный просто-показано, тот же, что и для show.bs.tab событие)

Если вкладка не активная, то hide.bs.tab hidden.bs.tab события не уволят.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // новой вкладке активировать
  e.relatedTarget разделе // предыдущему активному
})

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

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

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

Примеры

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

Статические подсказки

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

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

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

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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

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

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

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

Разметка

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

<!-- Написать HTML -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Создание разметки с помощью плагина -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Параметры

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

Методы

$().tooltip(options)

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

.tooltip('show')

Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip события). Это считается "ручного" срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.

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

.tooltip('hide')

Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip события). Это считается "ручного" срабатывания подсказке.

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

.tooltip('toggle')

Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip или hidden.bs.tooltip события). Это считается "ручного" срабатывания подсказке.

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

.tooltip('destroy')

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

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

События

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделать что-то...
})

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

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

Эклеры, как название и содержание нулевой длины не отображаются.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Примеры

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

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

Живое демо

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

<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.">
  Popover on left
</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.">
  Popover on top
</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.">
  Popover on bottom
</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.">
  Popover on right
</button>

Прекращать по следующему клику

Используйте focus триггера чтобы прекратить popovers следующим кликом, что делает пользователь.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

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

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

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

Параметры

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

Методы

$().popover(options)

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

.popover('show')

Открывает диалоговое окно элемента. Возвращает вызывающему перед диалоговым окном было показано (т. е. shown.bs.popover события). Это считается "ручного" срабатывания пирог. Эклеры, как название и содержание нулевой длины не отображаются.

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

.popover('hide')

Скрытие диалогового окна элемента. Возвращает абоненту до пирог на самом деле был скрытым (т. е. hidden.bs.popover события). Это считается "ручного" срабатывания пирог.

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

.popover('toggle')

Переключение диалогового окна элемента. Возвращает вызывающему абоненту перед диалоговым окном был виден или скрыт (т. е. shown.bs.popover или hidden.bs.popover события). Это считается "ручного" срабатывания пирог.

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

.popover('destroy')

Скрывает и уничтожает диалогового окна элемента. Эклеры, которые используют делегации (которые создаются с помощью в selector опция) не может быть индивидуально уничтожен потомок триггерных элементов.

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

События

$('#myPopover').on('hidden.bs.popover', function () {
  // сделать что-то...
})

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

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

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

При использовании .close кнопка, это должен быть первый ребенок .alert-dismissible и текстового Контента может прийти в разметке.

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

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

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

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

Методы

$().alert()

Делает оповещение, прослушивание события щелчка на дочерние элементы, которые имеют атрибут data-dismiss="alert". (Не требуется при использовании данных API для автоматической инициализации.)

$().alert('close')

Закрывается предупреждение, удалив его из DOM. Если .fade и .in классы присутствуют на элемент, предупреждение исчезнет, прежде чем он будет удален.

События

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

$('#myAlert').on('closed.bs.alert', function () {
  // сделать что-то...
})

Кнопки button.js

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

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

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

Данная функция является устаревшей начиная с V3.3.5 и была удалена в версии v4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // код, выполняемый при нажатии кнопки...
    $btn.button('reset')
  })
</script>

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

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Флажок / Радио

Добавить data-toggle="buttons" на .btn-group содержащий флажок или радио входов для включения переключения в соответствующих стилях.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Методы

$().button('toggle')

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

$().button('reset')

Кнопка сброс состояние - свопы текста в исходном тексте. Этот метод является асинхронным и возвращает до переустановки фактически завершена.

$().button(string)

Изменение текста на любой указанный текст состояния.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') //кнопка текст будет "закончен!"
  })
</script>

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

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

Пример

Нажмите на ссылку ниже, чтобы показать и скрыть другой элемент через изменения класса:

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

Вы можете использовать ссылку с href атрибут, или кнопка с атрибутом data-target. В обоих случаях data-toggle="collapse" необходима.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Пример гармонь

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

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <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" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <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" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <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>

Его также можно заменить .panel-body .list-group.

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

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

• .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(options)

Активирует ваш Контент как разборный элемент. Принимает необязательный варианты object.

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

.collapse('toggle')

Переключает складной элемент показаны или скрыты. Возвращает вызывающему перед складной элемент фактически было показано или скрыто (т. е. shown.bs.collapse или hidden.bs.collapse события).

.collapse('show')

Показывает складной элемент. Возвращается к абоненту до складной элемент фактически было показано (т. е. shown.bs.collapse события).

.collapse('hide')

Скрывает складной элемент. Возвращает вызывающему перед складной элемент был скрыт (т. е. hidden.bs.collapse события).

События

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // сделать что-то...
})

Карусель carousel.js

Компонент слайдшоу для перебора элементов, как карусель. Вложенные карусели не поддерживаются.

Примеры

Previous Next

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Показатели -->
  <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>

  <!-- Обертка для слайдов -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Элементы управления -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

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

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

<div class="item">
  <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 инициализация той же карусели.

Через JavaScript

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

$('.carousel').carousel()

Параметры

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

Методы

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

События

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

Оба события имеют следующие дополнительные свойства:

• direction: Направление, в котором движится карусель (или "left" или "right").
• relatedTarget: Элемент DOM, что в настоящее время встал на место в качестве активного элемента.

Все события карусель выстрелил в себя карусели (т. е. <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // сделать что-то...
})

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

Пример

Аффикс плагин переключает position: fixed; включение и выключение, эмуляция эффектов нашли с position: sticky;. Меню справа-демо аффикс плагин.

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

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

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

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

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

Вот как работает плагин 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:

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

Параметры

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

Методы

.affix(options)

Активирует ваш Контент как прикрепленный контент. Принимает необязательный варианты object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

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

$('#myAffix').affix('checkPosition')

События

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