Обзор

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

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

Используя скомпилированный JavaScript

bootstrap.js и bootstrap.min.js оба содержат все плагины в одном файле. Подключать только один.

Зависимость плагина

Некоторые плагины и CSS и их компоненты имеют зависимость от других плагинов. Если вы включаете плагины отдельно, просмотрите их документацию, чтобы убедиться, что вы учли их зависимость. Также заметьте, что все плагины зависят от jQuery (это означает, что jQuery должен подключаться перед файлами плагинов). Просмотрите наш файл bower.json, чтобы узнать какая версия jQuery поддерживается.

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

Вы можете использовать все 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) для пользователей, и/или добавить свои собственные откаты.

Библиотеки третьих сторон

Bootstrap неофициально поддерживает библиотеки JavaScript третьих сторон, такие как Prototype или jQuery UI. Несмотря на то, что мы предоставляем .noConflict и события с именованными пространствами, все равно могут быть проблемы совместимости, которые вам придется исправлять собственноручно.

Переходы 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

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

Несколько открытых модальных окон не поддерживается

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

Модальные размещения разметки

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

Оговорки в отношении мобильных устройств

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

Из-за как 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>

Сделайте модали доступными

Не забудьте добавить role="dialog" и aria-labelledby="...", ссылаясь на модальные название, чтобы .modal и role="document" к .modal-dialog самой себе.

Кроме этого, вы можете предоставить описание диалоговой модали при помощи aria-describedby, .modal.

Вложения видео YouTube

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

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

Модали имеют два дополнительных размера, доступные через модификаторы классов, которые будут размещены на .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,

...more buttons...
<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="".

Название Тип По умолчанию Описание
backdrop boolean or the string 'static' true Включает модально-фон элемента. Кроме того, можно указывать static для фона, которая не закрывается модальное на кнопку.
keyboard boolean true Закрывает модальное, когда клавиши ESC нажал
show boolean true Показывает модальное при инициализации.
remote path false

Этот параметр является устаревшим, начиная с версии V3.3.0 и была удалена в версии v4. вместо этого мы рекомендуем использовать шаблоны на стороне клиента или связывание данных фреймворк, или вызов на jQuery.загрузить себя.

Если удаленный URL-адрес предоставляется, контент будет загружен один раз с помощью функции jQuery load способ и вводят в .modal-content див. Если вы используете данные-API, вы можете альтернативно использовать #3 атрибута# для указания удаленного источника. Пример приведен ниже:

<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">).

Тип События Описание
show.bs.modal Это событие срабатывает во время вызова метода show. Если вызов происходит за клик, то элемент, на котором был этот клик, доступный как свойство события relatedTarget.
shown.bs.modal Эта подействует срабатывает, когда модаль будет отражена для пользователя (при этом ожидается завершение навигации CSS). Если вызов происходит за клик, то элемент, на котором был этот клик, доступный как свойство события relatedTarget.
hide.bs.modal Это событие срабатывает во время вызова метода hide.
hidden.bs.modal Это событие срабатывает, когда модаль завершит скрытие от пользователя (при этом ожидается завершение навигации CSS).
loaded.bs.modal Это событие генерируется, когда модаль загружена контент использует remote вариант.
$('#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()

data-toggle="dropdown" еще требуется

Независимо от того, вызываете вы выпадающий эффект через JavaScript или вместо этого использовуете, data-api, data-toggle="dropdown" всегда должен присутствовать на пусковом элементе в выпадающем окне.

None

$().dropdown('toggle')

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

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

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

Тип События Описание
show.bs.dropdown Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
shown.bs.dropdown Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.dropdown Это событие немедленно уволили, когда скрывать метод экземпляра называется.
hidden.bs.dropdown Это событие срабатывает, когда выпадающее меню завершит скрытие пунктов меню от пользователя (при этом ожидается завершение навигации CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // сделать что-то...
})

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

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

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

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

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

Требуется Bootstrap сча

В настоящее время Scrollspy требует использования Bootstrap компонент навигация для правильного выделения активных ссылок.

Необходимо соответствие между ID и его линку

Навигационная панель должна иметь соответствие между ID и его ссылке. Например, <a href="#home">home</a> должен иметь соответствие в DOM с <div id="home"></div>.

Номера-:visible целевые элементы игнорируются

Целевые элементы, которые не являются :visible ПО для jQuery будут проигнорированы и соответствующие им навигационные элементы никогда не будет выделен.

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

Независимо от метода реализации, 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="".

Название Тип По умолчанию Описание
offset number 10 Пикселей отступ от верхней при расчете позиции прокрутки.

События

Тип События Описание
activate.bs.scrollspy Это событие срабатывает каждый раз, когда новый элемент активируется при прокрутке.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // сделать что-то...
})

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

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

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

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Расширение навигационных вкладок

Этот плагин расширяет компонент навигационных вкладок, добавляя область переходов.

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

Включение области навигации, вкладок через 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 события не уволят.

Тип События Описание
show.bs.tab Это событие срабатывает на отображение вкладки, но перед тем, как новая вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
shown.bs.tab Это событие срабатывает на отображение вкладки, после того, как вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
hide.bs.tab Это событие возникает при открытии новой вкладки показываются (и, таким образом, предыдущую активную вкладку, чтобы быть скрыты). Используйте event.target и event.relatedTarget на цели текущей активной вкладки и новый скоро-к-быть-активной вкладки, соответственно.
hidden.bs.tab Это событие срабатывает после новой вкладке отображается (и, таким образом, предыдущую активную вкладку скрыта). Используйте event.target и event.relatedTarget Для того чтобы пристрелть предыдущую активную вкладку и новой активной вкладке, соответственно.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // новой вкладке активировать
  e.relatedTarget разделе // предыдущему активному
})

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

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

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

Примеры

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

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

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

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

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

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

Одним из способов инициализации все подсказки на странице будет выбрать их data-toggle атрибута:

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

Многолинейные ссылки

Иногда вы хотите добавить всплывающую подсказку к гиперссылке, который заключается несколько строк. По умолчанию плагина подсказка появляется в центре по горизонтали и вертикали. Добавьте white-space: nowrap; для якорей, чтобы избежать этого.

Подсказки в группы кнопок, входных групп и таблицы требует специальной настройки

При использовании подсказки по элементам внутри .btn-group или .input-group, или на стол-связанных элементов (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), Вы должны будете указать вариант container: 'body' (описана ниже), чтобы избежать нежелательных побочных эффектов (таких как элемент расширяется и/или потери его закругленные углы, когда подсказка срабатывает).

Не пытайтесь показать подсказки о скрытых элементов

Вызов $(...).tooltip('show') когда цель элемент display: none; вызовет подсказка быть неправильно установлен.

Доступны подсказки для клавиатуры и пользователей ассистивных технологий

Для пользователей навигации с клавиатуры, и в частности пользователей ассистивных технологий, необходимо только добавить подсказку с клавиатурой элементов, таких как ссылки, элементы управления формы или любой произвольный элемент с tabindex="0" атрибута.

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

Чтобы добавить подсказку элемента disabled или .disabled, вставьте элемент внутрь <div> и примените подсказку именно к этому <div>.

Параметры

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

Название Тип Предупреждение Описание
animation boolean true Применяет CSS для плавного перехода к подсказки
container string | false false

Добавляет popover на конкретный элемент. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать tooltip в потоке документа возле пускового элемента - который будет препятствовать popover от плавающей пускового элемента во время изменении размера окна.

delay number | object 0

Задержка показа и отображения информеров (ms) - не применяется для ручного типа вызова

Если указывается число, задержка применяется и для сокрытия, и для отображения

Такая Структура объекта: delay: { "show": 500, "hide": 100 }

html boolean false Вставляет HTML в подсказку. При значении false, будет использоваться метод jQuery text для вставки содержимого в DOM. Используйте текст, если побоютесь XSS атаки.
placement string | function 'top'

Как подсказка - сверху | снизу | слева | справа | авто.
когда "авто" указано, оно будет динамически переориентировать подсказке. Например, если размещение "авто слева", подсказка будет показывать налево, когда это возможно, в противном случае будет отображаться правильно.

Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В this контекст имеет значение экземпляра подсказки.

selector string false Если селектор предоставлено, объект подсказки будет делегировано для указанной цели. На практике это используется для добавления информеров при включении динамического содержимого HTML. Просмотрите это и пример.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

База HTML для использования при создании подсказку.

Всплывающие подсказки title будут введены в .tooltip-inner.

.tooltip-arrow станет стрелка всплывающей подсказке автора.

Внешний оболочкой элемент должен иметь .tooltip class.

title string | function ''

По умолчанию название значение, если атрибут title Нет.

Если дана функция, она будет вызвана с его this ссылки на элемент, что подсказка прилагается.

trigger string 'hover focus' Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. manual не может быть объединена с любой другой триггер.
viewport string | object | function { selector: 'body', padding: 0 }

Сохраняет подсказки в рамках этого элемента. Пример: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

Если дана функция, она вызывается с пусковым элементом DOM узел в качестве своего единственного аргумента. В this контекст имеет значение экземпляра подсказки.

Атрибуты данных для индивидуальных подсказок

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

Методы

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

События

Тип События Описание
show.bs.tooltip Это событие срабатывает во время вызова метода show.
shown.bs.tooltip Это событие срабатывает, когда подсказка будет отображаться для пользователя (при этом ожидается завершение навигации CSS).
hide.bs.tooltip Это событие срабатывает во время вызова метода hide.
hidden.bs.tooltip Это событие срабатывает, когда сокрытие элемента для пользователя завершится (при этом ожидается завершение навигации CSS).
inserted.bs.tooltip Это событие запускается после show.bs.tooltip событие, когда шаблон подсказка была добавлена в DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделать что-то...
})

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

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

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

Зависимость от плагинов

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

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

Одним из способов инициализации все эклеры на странице будет выбрать их data-toggle атрибута:

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

Эклеры в группы кнопок, входных групп и таблицы требует специальной настройки

При использовании эклеры на элементы внутри .btn-group или .input-group, или на стол-связанных элементов (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), Вы должны будете указать вариант container: 'body' (описана ниже), чтобы избежать нежелательных побочных эффектов (таких как элемент расширяется и/или потери его закругленные углы, когда пирог срабатывает).

Не пытайтесь показать Popovers на скрытых элементов

Вызов $(...).popover('show') когда целевой элемент display: none; вызовет диалоговое окно, чтобы быть неправильно установлен.

Информеры на заблокированных элементах нуждаются обертывание

Чтобы добавить подсказку элемента disabled или .disabled, вставьте элемент внутрь <div> и примените подсказку именно к этому <div>.

Многолинейные ссылки

Иногда вы хотите добавить информер к гиперссылке, в который заключается несколько строк. По умолчанию плагина подсказка появляется в центре по горизонтали и вертикали. Добавьте white-space: nowrap; для якорей, чтобы избежать этого.

Примеры

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

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

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Живое демо

<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> тег, не В <button> тег, и Вы также должны включать role="button" и tabindex атрибутами.

<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="".

Название Тип Предупреждение Описание
animation boolean true Применяет CSS для плавного перехода к информера
container string | false false

Добавляет popover на конкретный элемент. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать popover в потоке документа возле пускового элемента - который будет препятствовать popover от плавающей пускового элемента во время изменении размера окна.

content string | function ''

Содержимое по умолчанию значение, если data-content атрибут отсутствует

Если функция задана, она будет называться с this ссылки на элемент, к которому крепится всплывающее окно.

delay number | object 0

Задержка показа и отображения информеров (ms) - не применяется для ручного типа вызова

Если указывается число, задержка применяется и для сокрытия, и для отображения

Такая Структура объекта: delay: { "show": 500, "hide": 100 }

html boolean false Вставляет в HTML информер. При значении false, будет использоваться метод jQuery text для вставки содержимого в DOM. Используйте текст, если побоютесь XSS атаки.
placement string | function 'right'

Как пирог - верх | низ | влево | вправо | авто.
когда "авто" указано, оно будет динамически переориентировать пирог. Например, если размещение "авто слева", в всплывающем окне будет отображаться слева, когда это возможно, в противном случае будет отображаться правильно.

Когда функция используется для определения размещения, это называется с диалоговым окном DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В this контекст имеет значение экземпляра диалогового окна.

selector string false если селектор предоставлено, объект подсказки будет делегировано для указанной цели. На практике это используется для добавления информеров при включении динамического содержимого HTML. Просмотрите это и пример.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

База HTML использует при создании всплывающее окно.

The popover's title будет введен в .popover-title.

The popover's content будет введен в .popover-content.

.arrow станет стрелкой в всплывающем окне.

Внешний оболочкой элемент должен иметь .popover class.

title string | function ''

По умолчанию название значение, если атрибут title Нет.

Если функция задана, она будет называться с this ссылки на элемент, к которому крепится всплывающее окно.

trigger string 'click' Как пирог инициируется - нажмите кнопку | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. manual не может быть объединена с любой другой триггер.
viewport string | object | function { selector: 'body', padding: 0 }

Сохраняет всплывающее окно в рамках этого элемента. Пример: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

Если дана функция, она вызывается с пусковым элементом DOM узел в качестве своего единственного аргумента. В this контекст имеет значение экземпляра диалогового окна.

Атрибуты данных для индивидуальных информеров

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

Методы

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

События

Тип События Описание
show.bs.popover Это событие срабатывает во время вызова метода show.
shown.bs.popover Это событие срабатывает, когда информер будет отображаться для пользователя (при этом ожидается завершение навигации CSS).
hide.bs.popover Это событие срабатывает во время вызова метода hide.
hidden.bs.popover Это событие срабатывает, когда будет скрыто информер для пользователя (при этом ожидается завершение навигации CSS).
inserted.bs.popover Это событие запускается после show.bs.popover событие, когда шаблон диалогового окна, добавлен на DOM.
$('#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 плагин уведомлений предлагает несколько событий для предоставления уведомляющей функциональности.

Тип События Описание
close.bs.alert Это событие срабатывает во время вызова метода close.
closed.bs.alert Это событие срабатывает, когда уведомление будет закрыто (при этом ожидается завершение навигации CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // сделать что-то...
})

Кнопки button.js

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

Кросс-браузерная совместимость

В Firefox сохраняется форма контроля состояния (disabledness и checkedness) через загрузке страницы. Для решения этой проблемы использовать autocomplete="off". См. Мозилла ошибка #654072.

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

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

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

Используйте состояние вам понравится!

Ради этой демонстрации, мы используем data-loading-text и $().button('loading'), но это не только состояние Вы можете использовать. См. об этом ниже в $().button(string) документация.

<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", чтобы активировать переключение на единичном кнопке.

Предварительно переключать кнопки нужно .active и aria-pressed="true"

Для предварительного переключения кнопки, вы должны добавить .active класс и aria-pressed="true" атрибут на button себя.

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

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

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

Заранее выбранные должны быть .active

Для предварительно выбранных опций, необходимо добавить .active класс для инпутов label.

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

Если проверяемый состояние флажка кнопка обновляется без единого click событие на кнопку (например, через <input type="reset"> или через установка checked собственностью ввода), вам будет нужно переключить .active класса на ввода label себя.

<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

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

Зависимость от плагинов

Сворачивание нуждается подключенного в вашей версии Bootstrap плагина transitions.

Пример

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

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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>

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

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

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

  • Bootply
  • Один itmus facilin переменного тока
  • Второй Эрос

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

Не забудьте добавить aria-expanded элементу управления. Этот атрибут однозначно определяет ток состояние сборного элемента на экране читателей и подобных вспомогательных технологий. Если складной элемент закрыт по умолчанию, он должен иметь значение aria-expanded="false". Если вы установите складной элемент, который будет открыт по умолчанию, используя in класс, набор aria-expanded="true", а не на контроль. Плагин будет автоматически переключаться на этот атрибут, если не разборный элемент был открыт или закрыт.

Кроме того, если элемент ориентирован на один складной элемент, т. е. data-target атрибут, указывающий на id селектор – можно добавить дополнительные aria-controls атрибут в элемент, содержащий id складной элемент. Современные читатели экраном и подобных вспомогательных технологий используйте этот атрибут, чтобы предоставить пользователям дополнительные клавиши, чтобы перейти непосредственно к самой складной элемент.

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

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

  • .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="".

Название Тип По умолчанию Описание
parent selector false Если имеется селектор, потом все разборные элементы в указанной родительской будет закрыт, когда этот складной элемент отображается. (аналог традиционного поведения аккордеон - это зависит от panel класс)
toggle boolean true Переключает складной элемент на вызов

Методы

.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 для згортанння представляет несколько событий для подключения функциональности свертывания.

Тип События Описание
show.bs.collapse Это событие срабатывает во время вызова метода show.
shown.bs.collapse Это событие срабатывает, когда этот элемент отображается пользователю (при этом ожидается завершение навигации CSS).
hide.bs.collapse Это событие срабатывает во время вызова метода hide.
hidden.bs.collapse Это событие срабатывает, когда развернутый элемент защищен от пользователя (при этом ожидается завершение навигации CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // сделать что-то...
})

Карусель carousel.js

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

<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, причем содержимое будет автоматически выровнен и форматовано.

<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="".

Название Тип По умолчанию Описание
interval number 5000 Время задержки между автоматически задействуя элемент. Если false, карусели не будут автоматически цикла.
pause string | null "hover" Если задано значение "hover", приостанавливает Велоспорт карусели на mouseenter и возобновляет Велоспорт карусели на mouseleave. Если задано значение null, парящий над карусель не остановить.
wrap boolean true Будь карусели должны непрерывно цикла или жесткого упора.
keyboard boolean true Будь карусели должны реагировать на события клавиатуры.

.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">).

Тип События Описание
slide.bs.carousel Это событие срабатывает во время вызова метода slide.
slid.bs.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".

Название Тип По умолчанию Описание
offset number | function | object 10 Пикселей для смещения экрана при расчете позиции прокрутки. Если единственное число, то смещение будет применяться в обоих верхнем и Нижнем направлениях. Чтобы обеспечить уникальный, нижней и верхней смещение всего объекта offset: { top: 10 } или offset: { top: 10, bottom: 5 }. Использовать функцию, если необходимо динамически вычислить смещение.
target selector | node | jQuery element the window object Указывает конечный элемент аффикса.

Методы

.affix(options)

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

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

.affix('checkPosition')

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

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

События

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

Тип События Описание
affix.bs.affix Это событие вызывается непосредственно перед приклепленным элементом.
affixed.bs.affix Это событие возникает после того, как элемент был приклеплен.
affix-top.bs.affix Это событие вызывается непосредственно перед элементом, прикрепленному сверху.
affixed-top.bs.affix Это событие возникает после того, как элемент был приклеплен свверху.
affix-bottom.bs.affix Это событие вызывается непосредственно перед элементом, прикрепленному внизу.
affixed-bottom.bs.affix Это событие возникает после того, как элемент был приклеплен снизу.