Отдельно или с компиляцией

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

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

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

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

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

В качестве альтернативы, указания специфического плагина, просто включите имя плагина как неймспейс вместе дата эй-пи-ай неймспейс:

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

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

Мы также считаем, вы должны быть в состоянии использовать все JavaScript плагины чисто через Bootstrap 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</p>

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

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

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

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

События

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

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

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

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

О переходах

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

Что внутри

Transition.js это базовый хелпер для transitionEnd событий как эмуляция CSS переходов. Его используют другие плагины для проверки поддержки ЦСС переходов и перехвата событий перехода.

Дополнительные шаблоны

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

Статический пример

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

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">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 -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->span>
</div><!-- /.modal -->

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

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

Активируйте модальное окно без написания 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=""

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

Методы

.modal(options)

Активизирует ваше содержание как модаль. Принимает функциональную опцию object.

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

.modal('toggle')

Вручную переключает модаль.

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

.modal('show')

Вручную открывает модаль.

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

.modal('hide')

Вручную скрывает модаль.

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

События

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

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

Дополнительные шаблоны

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

В пределах навигатора

В пределах вкладки

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

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

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

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

Сохранить URLs в неизменном состоянии, используйте data-target атрибут вместо href="#"..

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

Через JavaScript

Вызовите выпадения через JavaScript:

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

Опции

Отсутствуют

Методы

$().dropdown('toggle')

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

События

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

Пример в навигаторе

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

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

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

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

<body data-spy="scroll" data-target="#navbar-example">
  ...
</body>

Через JavaScript

Вызовите прокрутку слежения через JavaScript:

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

Методы

.scrollspy('refresh')

Когда используете "скроллспай" в объединение с добавление или удалением элементов из ДОМа, вам нужно вызвать метод обновления как показано здесь:

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

Опции

Опции могут быть переданы с помощью атрибутивных данных или JavaScript. Для атрибутивных данных, добавьте опцию имя к data-, также как и к data-offset=""

События

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

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

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

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

Разрешите вкладочные вкладки с помощью JavaScript (каждая вкладка должна быть активирована индивидуально):

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

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

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

Разметка

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

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

Чтобы создать постепенное появление вкладок, добавьте .fade к каждому .tab-pane.

Методы

$().tab

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

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

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

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

События

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

Дополнительные шаблоны

Вдохновленное замечательным плагином JQuery.tipsy написанным Джейсоном Фреймом; "Подсказки" обновленная версия, которая не зависит от изображений, использует ЦСС3 для анимации, и дата-атрибуты для локального хранения заголовка.

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

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

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

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

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

Опции

Опции могут быть переданы с помощью атрибутивных данных или JavaScript. Для атрибутивных данных, добавьте опцию имя к data-, также как и к data-animation=""

Разметка

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Методы

$().tooltip(options)

Прилагает обработчик подсказки к элементу коллекции.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

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

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

События

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

Дополнительные шаблоны

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

Статичный вспомогательный экран

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

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

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

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

Отключить вспомогательные экраны с помощью JavaScript:

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

Опции

Опции могут быть переданы с помощью атрибутивных данных или JavaScript. Для атрибутивных данных, добавьте опцию имя к data-, также как и к data-animation=""

Разметка

По причинам производительности, подсказка и вспомогательный экран прикладных интерфейсов сопоставимы. Если вы хотите использовать их, просто укажите селектор опции.

Методы

$().popover(options)

Запускает вспомогательные экраны для элемента коллекции.

.popover('show')

Показывает элементы вспомогательного экрана.

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

.popover('hide')

Скрывает элементы вспомогательного экрана.

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

.popover('toggle')

Переключает элементы вспомогательного экрана.

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

.popover('destroy')

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

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

События

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

Пример оповещения

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

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

Отключить отклонение оповещения через JavaScript:

$(".alert").alert()

Разметка

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

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

Методы

$().alert()

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

.alert('close')

Закрывает все оповещения.

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

События

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

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

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

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

Установочный

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

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

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

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

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

Флажок

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Радио

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

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

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

$('.nav-tabs').button()

Разметка

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

Опции

Отсутствуют

Методы

$().button('toggle')

Переключает состояние нажатия. Дает кнопке впечатление, что он был активирован.

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

$().button('loading')

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

<button type="button" class="btn" data-loading-text="loading stuff...">...</button>

$().button('reset')

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

$().button(string)

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

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

Об этом

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

Пример гармошки

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

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

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

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

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

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

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

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

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

Через JavaScript

Включить вручную с:

$(".collapse").collapse()

Опции

Опции могут быть переданы с помощью атрибутивных данных или JavaScript. Для атрибутивных данных, добавьте опцию имя к data-, также как и к data-parent=""

Методы

.collapse(options)

Активирует ваше содержание в виде свернутого элемента. Принимает дополнительные опции object.

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

.collapse('toggle')

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

.collapse('show')

Показывает элемент коллапса.

.collapse('hide')

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

События

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

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

Дополнительные шаблоны

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

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

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

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

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

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

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

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

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

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

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

Через JavaScript

Назовите карусель вручную с:

$('.carousel').carousel()

Опции

Опции могут быть переданы с помощью атрибутивных данных или JavaScript. Для атрибутивных данных, добавьте опцию имя к data-, также как и к data-interval=""

Методы

.carousel(options)

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

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

.carousel('cycle')

Вращает с помощью элементов карусели слева направо.

.carousel('pause')

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

.carousel(number)

Вращает карусель к конкретной рамке (начиная с 0, похоже на матрицу)

.carousel('prev')

Вращает к предыдущему элементу.

.carousel('next')

Вращает к следующему элементу.

События

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

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

Пример

Поднавигация слева является живым демо affix плагина.

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

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

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

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

Через JavaScript

Назовите affix плагин с помощью JavaScript

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

Опции

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