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

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

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

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

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

$ ( 'тело' ). выключено ( '.data-api' )

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

$ ( 'тело' ). выключено ( '.alert.data-api' )

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

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

$ ( ".btn.danger" ). кнопка ( "переключить" ). addClass ( "жирный" )

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

$ ( "#myModal" ). modal () // инициализируется значениями по умолчанию                       
$ ( "#myModal" ). modal ({ keyboard : false }) // инициализируется без клавиатуры     
$ ( "#myModal" ). modal ( 'show' ) // инициализирует и немедленно вызывает show                

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

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

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

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

События

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

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

$ ( '#myModal' ). на ( 'показать' , функция ( е ) {   
    если (! данные ) вернуть e . preventDefault () // останавливает показ модального окна   
})

О переходах

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

Сценарии использования

Несколько примеров плагина перехода:

• Скольжение или затухание в модальных окнах
• Исчезающие вкладки
• Затухающие оповещения
• Скользящие карусельные панели

Примеры

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

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

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

<div class = "модальное скрытие и исчезновение" > 
  <div класс = "модальный заголовок" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </кнопка>    
    <h3> Модальный заголовок </h3>
  </div>
  <div class = "модальное тело" > 
    <p> Одно прекрасное тело… </p>
  </div>
  <div class = "модальный нижний колонтитул" > 
    <a href = "#" class = "btn" > Закрыть </a>  
    <a href = "#" class = "btn btn-primary" > Сохранить изменения </a>  
  </div>
</div>

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

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

<!-- Кнопка для запуска модального окна -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Запустить демонстрационное модальное окно </a>    
 
<!-- Модальный -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div класс = "модальный заголовок" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Модальный заголовок </h3> 
  </div>
  <div class = "модальное тело" > 
    <p> Одно прекрасное тело… </p>
  </div>
  <div class = "модальный нижний колонтитул" > 
    <button class = "btn" data- dismiss = "modal" aria-hidden = "true" > Закрыть </button>   
    <button class = "btn btn-primary" > Сохранить изменения </button> 
  </div>
</div>

Применение

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

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

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

Через JavaScript

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

$ ( '#myModal' ). модальный ( варианты )

Опции

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

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

Методы

.modal(варианты)

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

$ ( '#myModal' ). модальный ({
  клавиатура : ложь 
})

.modal('переключить')

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

$ ( '#myModal' ). модальный ( «переключить» )

.modal('показать')

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

$ ( '#myModal' ). модальный ( «показать» )

.modal('скрыть')

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

$ ( '#myModal' ). модальный ( «скрыть» )

События

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

$ ( '#myModal' ). на ( 'скрытый' , функция () {   
  // сделай что-нибудь…
})

Примеры

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

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

Внутри вкладок

Применение

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

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

<div class = "раскрывающийся список" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Триггер раскрывающегося списка </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = "раскрывающийся список" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Падать
    <b class = "вставка" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >   
    ...
  </ul>
</div>

Через JavaScript

Вызовите раскрывающиеся списки через JavaScript:

$ ( '.dropdown-toggle' ). раскрывающийся список ()

Опции

Никто

Методы

$().выпадающий('переключатель')

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

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

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

Применение

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

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

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

Через JavaScript

Вызов scrollspy через JavaScript:

$ ( '#navbar' ). прокрутка ()

Методы

.scrollspy('обновить')

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

$ ( '[data-spy="scroll"]' ). каждый ( функция () {  
  var $spy = $ ( это ). прокрутка ( «обновить» )
});

Опции

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

События

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

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

Применение

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

$ ( '#myTab а' ). нажмите ( функция ( e ) {  
  э . предотвратить дефолт ();
  $ ( это ). вкладка ( «показать» );
})

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

$ ( '#myTab a[href="#profile"]' ). вкладка ( «показать» ); // Выбираем вкладку по названию 
$ ( '#myTab a:first' ). вкладка ( «показать» ); // Выбираем первую вкладку 
$ ( '#myTab a:последняя' ). вкладка ( «показать» ); // Выбираем последнюю вкладку 
$ ( '#myTab li:eq(2) a' ). вкладка ( «показать» ); // Выбираем третью вкладку (с индексом 0) 

Разметка

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

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

Методы

$(). вкладка

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Домашняя страница </a></li>  
  <li><a href = "#profile" > Профиль </a></li> 
  <li><a href = "#messages" > Сообщения </a></li> 
  <li><a href = "#settings" > Настройки </a></li> 
</ul>
 
<div класс = "контент вкладки" > 
  <div class = "активная вкладка" 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>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a:последняя' ). вкладка ( «показать» );
  })
</скрипт>

События

$ ( 'a[data-toggle="tab"]' ). на ( 'показано' , функция ( e ) {   
  э . цель // активированная вкладка
  э . relatedTarget // предыдущая вкладка
})

Примеры

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

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

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

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

Подсказки в группах ввода

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

Применение

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

$ ( '#пример' ). подсказка ( варианты )

Опции

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

Разметка

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > наведите курсор на меня </a>   

Методы

$(). всплывающая подсказка (параметры)

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

.тултип('показать')

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

$ ( '#элемент' ). всплывающая подсказка ( «показать» )

.тултип('скрыть')

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

$ ( '#элемент' ). всплывающая подсказка ( «скрыть» )

.tooltip('переключить')

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

$ ( '#элемент' ). всплывающая подсказка ( «переключить» )

.tooltip('уничтожить')

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

$ ( '#элемент' ). всплывающая подсказка ( "уничтожить" )

Примеры

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

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

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

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

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

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

Применение

Включить всплывающие окна через JavaScript:

$ ( '#пример' ). всплывающее окно ( варианты )

Опции

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

Разметка

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

Методы

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

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

.popover('показать')

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

$ ( '#элемент' ). всплывающее окно ( «показать» )

.popover('скрыть')

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

$ ( '#элемент' ). всплывающее окно ( «скрыть» )

.popover('переключить')

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

$ ( '#элемент' ). всплывающее окно ( «переключение» )

.popover('уничтожить')

Скрывает и уничтожает всплывающее окно элемента.

$ ( '#элемент' ). поповер ( «уничтожить» )

Примеры оповещений

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

Применение

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

$ ( ".алерт" ). предупреждение ()

Разметка

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

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Методы

$().оповещение()

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

.алерт('закрыть')

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

$ ( ".алерт" ). предупреждение ( «закрыть» )

События

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

$ ( '#мое-предупреждение' ). привязать ( 'закрыто' , функция () {   
  // сделай что-нибудь…
})

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

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

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

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

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Состояние загрузки </button>   

Один переключатель

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

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Одиночный переключатель </button>   

Флажок

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

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Средний </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Радио

Добавлено data-toggle="buttons-radio"переключение стиля радио на btn-group.

<div class = "btn-group" data-toggle = "кнопки-радио" >  
  <button type = "button" class = "btn btn-primary" > Left </button>  
  <button type = "button" class = "btn btn-primary" > Средний </button>  
  <button type = "button" class = "btn btn-primary" > Right </button>  
</div>

Применение

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

$ ( '.nav-tabs' ). кнопка ()

Разметка

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

Опции

Никто

Методы

$().кнопка('переключить')

Переключает состояние нажатия. Создает впечатление, что кнопка активирована.

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

$().кнопка('загрузка')

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

<button type = "button" class = "btn" data-loading-text = "загрузка материала..." > ... </button>    

$().кнопка('сброс')

Сбрасывает состояние кнопки — меняет текст на исходный текст.

$().кнопка(строка)

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

<button type = "button" class = "btn" data-complete-text = "finished!" > ... </кнопка>    
<скрипт>
  $ ( '.btn' ). кнопка ( «завершить» )
</скрипт>

О

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

* Требуется наличие плагина Transitions.

Пример аккордеона

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

<div class = "accordion" id = "accordion2" >  
  <div класс = "аккордеон-группа" > 
    <div class = "аккордеон-заголовок" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Сворачиваемая группа Элемент № 1
      </a>
    </div>
    <div id = "collapseOne" class = "корпус аккордеона схлопывается" >  
      <div класс = "внутренний аккордеон" > 
        Анимационное клише...
      </div>
    </div>
  </div>
  <div класс = "аккордеон-группа" > 
    <div class = "аккордеон-заголовок" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Сворачиваемая группа Элемент № 2
      </a>
    </div>
    <div id = "collapseTwo" class = "свернуть корпус аккордеона" >  
      <div класс = "внутренний аккордеон" > 
        Анимационное клише...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  простой складной
</кнопка>
 
<div id = "demo" class = "collapse in" > … </div>  

Применение

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

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

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

Через JavaScript

Включить вручную с помощью:

$ ( ".collapse" ). коллапс ()

Опции

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

Методы

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

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

$ ( '#myCollapsible' ). коллапс ({
  переключить : ложь 
})

.collapse('переключить')

Отображает или скрывает сворачиваемый элемент.

.collapse('показать')

Показывает разборный элемент.

.collapse('скрыть')

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

События

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

$ ( '#myCollapsible' ). на ( 'скрытый' , функция () {   
  // сделай что-нибудь…
})

Пример карусели

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

Ярлык первого эскиза

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "карусельный слайд" >  
  <ol class = "карусель-индикаторы" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Элементы карусели -->
  <div class = "carousel-inner" > 
    <div class = "активный элемент" > … </div> 
    <div класс = "элемент" > … </div> 
    <div класс = "элемент" > … </div> 
  </div>
  <!-- Карусельная навигация -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Применение

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

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

Через JavaScript

Вызвать карусель вручную с помощью:

$ ( '.карусель' ). карусель ()

Опции

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

Методы

.карусель(варианты)

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

$ ( '.карусель' ). карусель ({
  интервал : 2000 
})

.карусель('цикл')

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

.карусель('пауза')

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

.карусель(число)

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

.карусель('предыдущая')

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

.карусель('следующий')

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

События

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

Пример

Базовый, легко расширяемый плагин для быстрого создания элегантных шрифтов с любой формой ввода текста.

<input type = "text" data-provide = "typeahead" >  

Вы захотите настроить autocomplete="off"так, чтобы меню браузера по умолчанию не появлялись в раскрывающемся списке Bootstrap.

Применение

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

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

Через JavaScript

Вызовите ввод вручную с помощью:

$ ( '.typeahead' ). печатать вперед ()

Опции

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

Методы

.typeahead(варианты)

Инициализирует ввод с опережающим вводом.

Пример

Вложенная навигация слева — это живая демонстрация плагина аффикса.

Применение

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

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

<div data-spy = "аффикс" data-offset-top = "200" > ... </div>  

Через JavaScript

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

$ ( '#navbar' ). аффикс ()

Опции

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