Обзор

Индивидуальные или скомпилированные

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

Использование скомпилированного JavaScript

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

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

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

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

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

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

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

В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:

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

Только один плагин на элемент через атрибуты данных

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

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

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

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

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

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

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

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

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

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Нет конфликта

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

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

События

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

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

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

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

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

Доступ к версии каждого плагина 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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Живая демонстрация

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<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-describedbyon .modal.

Встраивание видео с YouTube

Для встраивания видео с YouTube в модальные окна требуется дополнительный JavaScript, не входящий в Bootstrap, для автоматической остановки воспроизведения и т. д. См. этот полезный пост о переполнении стека для получения дополнительной информации.

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

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

<!-- Large modal -->
<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>

<!-- Small modal -->
<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 в модальном окне, просто вложите .rows в , .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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

У вас есть куча кнопок, которые вызывают одно и то же модальное окно, но с немного разным содержимым? Используйте атрибутыevent.relatedTarget и HTMLdata-* (возможно, через 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) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  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область щелчка для закрытия отображаемых модальных окон при нажатии вне модального окна.

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

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

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

Опции

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

Имя тип дефолт описание
фон логическое значение или строка'static' истинный Включает элемент модального фона. В качестве альтернативы укажите staticфон, который не закрывает модальное окно при нажатии.
клавиатура логический истинный Закрывает модальное окно при нажатии клавиши escape
показывать логический истинный Показывает модальное окно при инициализации.
удаленный дорожка ЛОЖЬ

Эта опция устарела, начиная с версии 3.3.0, и была удалена в версии 4. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или структуру привязки данных или вызывать jQuery.load самостоятельно.

Если указан удаленный URL-адрес, содержимое будет загружено один раз с помощью loadметода jQuery и введено в .modal-contentdiv. Если вы используете data-api, вы также можете использовать hrefатрибут для указания удаленного источника. Пример этого показан ниже:

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

Методы

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

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

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

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

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

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

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

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

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

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

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

События

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

Все модальные события запускаются в самом модальном окне (т.е. в <div class="modal">).

Тип события Описание
показать.bs.modal Это событие срабатывает сразу же при showвызове метода экземпляра. Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTargetсвойство события.
показанный.bs.modal Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов CSS). Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTargetсвойство события.
скрыть.bs.modal Это событие запускается сразу после hideвызова метода экземпляра.
скрытый.bs.modal Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов CSS).
загруженный.bs.modal Это событие запускается, когда модальное окно загрузило контент с помощью remoteпараметра.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Выпадающие списки 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"он всегда должен присутствовать в элементе триггера раскрывающегося списка.

Никто

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

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

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

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

ScrollSpy scrollspy.js

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

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

@толстый

Рекламные леггинсы Keytar, бранч ID Art Party Dolor Labore. Pitchfork yr enim lo-fi до того, как они были распроданы. Права на велосипед от фермы к столу в Tumblr на что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit Seitan McSweeney 3 wolf moon irure. Свитер Cosby, джинсы-ломо, джинсовые шорты, минималистичная толстовка с капюшоном Williamsburg, о которой вы, вероятно, не слышали, и кардиган трастового фонда culpa biodiesel Wes Anderson, эстетика. Nihil татуированный accusamus, cred ирония биодизель куфия ремесленник ullamco consequat.

@мдо

Скейтборд с усами Veniam marfa, борода с вилами adipisicing fugiat velit. Борода Фригана, также известная как купидат Максуини. Cupidatat четыре loko nisi, ea Helvetica nulla carles. Татуированный фургончик с едой в свитере косби, винил McSweeney's quis non freegan. Ло-фай Уэс Андерсон +1 портной. Carles неэстетическое упражнение quis gentrify. Бруклинское крафтовое пиво

один

Occaecat commodo aliqua delectus. Fap крафтовое пиво десантируется на скейтборде. Ломо велосипедные права adipisicing banh mi, velit ea sunt next level locavore кофе одного происхождения в больших количествах. Высококачественный винил id, эхо-парк, созданный с помощью вил. Vero VHS предназначен для чтения. Создайте мини-сумку своими руками. Cred ex in, устойчивое создание поясной сумки iphone.

два

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 what delectus food truck. Предполагается, что Sapiente synth ID. Ирония клише Locavore sed Helvetica, громовые коты, о которых вы, вероятно, не слышали, conequat hoodie без глютена lo-fi fap aliquip. Labore elit placeat прежде, чем они были распроданы, Terry Richardson proident brunch nesciunt quis cosby свитер pariatur keffiyeh ut Helvetica artisan. Джемпер крафтовый пивной сейтан готовый велит. VHS Chambray Laboris Tempor Veniam. Anim mollit minim commodo ullamco Thundercats.

Применение

Требуется навигация Bootstrap

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

Требуются разрешимые цели ID

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

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

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

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

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

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

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

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

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

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

Опции

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

Имя тип дефолт описание
компенсировать количество 10 Пиксели для смещения сверху при расчете положения прокрутки.

События

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

Переключаемые вкладки tab.js

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

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

Raw denim вы, наверное, не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очищения ретро-синтеза. Усы клише временные, Уильямсбург Карлес веганский Helvetica. Reprehenderit мясник ретро кефия ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure Terry Richardson ex squid. Место Aliquip на шалфее для iPhone. Seitan aliquip quis кардиган американская одежда, мясник 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') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Разметка

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

<div>

  <!-- Nav tabs -->
  <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>

  <!-- Tab panes -->
  <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

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо a, data-targetлибо hrefцелевой узел контейнера в DOM. В приведенных выше примерах вкладки — это <a>s с 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не будут запущены.

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

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

Вдохновленный превосходным плагином jQuery.tipsy, написанным Джейсоном Фреймом; Всплывающие подсказки — это обновленная версия, которая не использует изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков.

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

Примеры

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

Узкие штаны следующего уровня куфии , вы, наверное , о них не слышали. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney's Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По-настоящему ироничный ремесленник , какой бы кейтар ни был, сценастер с фермы на стол, Бэнкси Остин, Твиттер, ручка , Фриган Кред, сырой деним, вирусный кофе одного происхождения.

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

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

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

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

Возможность подписки

По соображениям производительности API-интерфейсы данных Tooltip и Popover являются опциональными, то есть вы должны инициализировать их самостоятельно .

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

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

Применение

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

Запустите всплывающую подсказку через JavaScript:

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

Разметка

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

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Многострочные ссылки

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

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

При использовании всплывающих подсказок для элементов внутри a .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="".

Имя Тип По умолчанию Описание
анимация логический истинный Применить CSS-переход затухания к всплывающей подсказке
контейнер строка | ЛОЖЬ ЛОЖЬ

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

задерживать номер | объект 0

Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера.

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

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

HTML логический ЛОЖЬ Вставьте HTML во всплывающую подсказку. Если false, textметод jQuery будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение строка | функция 'Топ'

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

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

селектор нить ЛОЖЬ Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих подсказок в динамический HTML-контент. См. это и информативный пример .
шаблон нить '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

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

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

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

Самый внешний элемент-оболочка должен иметь .tooltipкласс.

заглавие строка | функция ''

Значение заголовка по умолчанию, если titleатрибут отсутствует.

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

курок нить «наведение фокуса» Как срабатывает всплывающая подсказка - нажмите | наведите | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. manualнельзя комбинировать ни с каким другим триггером.
окно просмотра строка | объект | функция {селектор: 'тело', заполнение: 0}

Удерживает всплывающую подсказку в границах этого элемента. Пример: viewport: '#viewport'или{ "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вызове метода экземпляра.
показанная.bs.подсказка Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (будет ожидать завершения переходов CSS).
hide.bs.подсказка Это событие запускается сразу после hideвызова метода экземпляра.
скрытая.bs.подсказка Это событие запускается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ждать завершения переходов CSS).
вставленная.bs.подсказка Это событие запускается после show.bs.tooltipсобытия, когда шаблон всплывающей подсказки был добавлен в DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Всплывающие окна popover.js

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

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

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

Всплывающие окна требуют, чтобы плагин всплывающей подсказки был включен в вашу версию Bootstrap.

Возможность подписки

По соображениям производительности API-интерфейсы данных Tooltip и Popover являются опциональными, то есть вы должны инициализировать их самостоятельно .

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

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

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

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

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

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

Всплывающие окна на отключенных элементах требуют элементов-оболочек

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

Многострочные ссылки

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

Примеры

Статическое всплывающее окно

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

Поповер сверху

Sed posuere consectetur est at lobortis. Энейский eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер справа

Sed posuere consectetur est at lobortis. Энейский eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер внизу

Sed posuere consectetur est at lobortis. Энейский eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер слева

Sed posuere consectetur est at lobortis. Энейский 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триггер, чтобы закрыть всплывающие окна при следующем щелчке пользователя.

Для закрытия при следующем щелчке требуется специальная разметка.

Для правильного кросс-браузерного и кросс-платформенного поведения вы должны использовать <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="".

Имя Тип По умолчанию Описание
анимация логический истинный Применить CSS-переход затухания к поповеру
контейнер строка | ЛОЖЬ ЛОЖЬ

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

содержание строка | функция ''

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

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

задерживать номер | объект 0

Задержка показа и скрытия всплывающего окна (мс) — не относится к ручному типу триггера.

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

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

HTML логический ЛОЖЬ Вставьте HTML во всплывающее окно. Если false, textметод jQuery будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение строка | функция 'Правильно'

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

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

селектор нить ЛОЖЬ Если предоставлен селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон в динамический HTML-контент. См. это и информативный пример .
шаблон нить '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

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

Поповеры titleбудут внедрены в файл .popover-title.

Поповеры contentбудут внедрены в файл .popover-content.

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

Самый внешний элемент-оболочка должен иметь .popoverкласс.

заглавие строка | функция ''

Значение заголовка по умолчанию, если titleатрибут отсутствует.

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

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

Удерживает всплывающее окно в пределах границ этого элемента. Пример: viewport: '#viewport'или{ "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')

События

Тип события Описание
показать.bs.popover Это событие срабатывает сразу же при showвызове метода экземпляра.
показанный.bs.popover Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ждать завершения переходов CSS).
скрыть.bs.popover Это событие запускается сразу после hideвызова метода экземпляра.
hidden.bs.popover Это событие запускается, когда всплывающее окно перестает быть скрытым от пользователя (будет ждать завершения переходов CSS).
вставленный.bs.popover Это событие запускается после show.bs.popoverсобытия, когда шаблон всплывающего окна был добавлен в DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Предупреждающие сообщения 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"атрибут. (Не требуется при использовании автоинициализации data-api.)

$().alert('close')

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

События

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

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

Кнопки button.js

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

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

Firefox сохраняет состояния контроля формы (отключение и проверка) при загрузке страницы . Обходной путь для этого заключается в использовании autocomplete="off". См. ошибку Mozilla № 654072 .

с сохранением состояния

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

Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4.

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

Для этой демонстрации мы используем 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')
    // business logic...
    $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') // button text will be "finished!"
  })
</script>

Свернуть _

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

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

Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap.

Пример

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

  • .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 скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus Labore, устойчивый VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. 3 wolf moon officia aute, non cupidatat скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus Labore, устойчивый VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. 3 wolf moon officia aute, non cupidatat скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus Labore, устойчивый 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-bodys на .list-groups.

  • Bootply
  • Один itmus ac facilin
  • Второй эрос

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

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

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

Применение

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

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

Имя тип дефолт описание
родитель селектор ЛОЖЬ Если предоставлен селектор, то все сворачиваемые элементы под указанным родительским элементом будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению аккордеона - это зависит от panelкласса)
переключать логический истинный Переключает сворачиваемый элемент при вызове

Методы

.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вызове метода экземпляра.
показан.bs.свернуть Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов CSS).
скрыть.bs.collapse Это событие запускается сразу после вызова hideметода.
скрытый.bs.коллапс Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Карусель carousel.js

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

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" 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>

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

Имя тип дефолт описание
интервал количество 5000 Количество времени задержки между автоматическим циклом элемента. Если false, карусель не будет автоматически циклироваться.
Пауза строка | нулевой "парить" Если установлено значение "hover", приостанавливает циклирование карусели mouseenterи возобновляет циклическое движение карусели при включении mouseleave. Если установлено значение null, наведение курсора на карусель не приостановит ее.
сворачивать логический истинный Должна ли карусель вращаться непрерывно или делать резкие остановки.
клавиатура логический истинный Должна ли карусель реагировать на события клавиатуры.

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

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

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

Запрещает карусели циклически перемещаться по элементам.

Циклически перемещает карусель к определенному кадру (на основе 0, подобно массиву).

Переход к предыдущему элементу.

Переход к следующему элементу.

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

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

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

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

Тип события Описание
слайд.бс.карусель Это событие срабатывает немедленно при slideвызове метода экземпляра.
slid.bs.карусель Это событие запускается, когда карусель завершила переход слайдов.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Аффикс affix.js

Пример

Плагин аффикса включается position: fixed;и выключается, имитируя эффект, обнаруженный с помощью position: sticky;. Вложенная навигация справа — это живая демонстрация плагина аффикса.


Применение

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

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

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

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

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

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

Выполните описанные выше шаги, чтобы настроить CSS для любого из приведенных ниже вариантов использования.

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

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

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

Через JavaScript

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

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

Опции

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

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

Методы

.affix(options)

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

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

.affix('checkPosition')

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

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

События

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

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