JavaScript

Оживите компоненты Bootstrap — теперь с помощью 13 настраиваемых плагинов jQuery.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

События

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

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

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

О переходах

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

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

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

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

Примеры

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

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

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

  1. <div class = "модальное скрытие и исчезновение" >
  2. <div класс = "модальный заголовок" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </кнопка>
  4. <h3> Модальный заголовок </h3>
  5. </div>
  6. <div class = "модальное тело" >
  7. <p> Одно прекрасное тело… </p>
  8. </div>
  9. <div class = "модальный нижний колонтитул" >
  10. <a href = "#" class = "btn" > Закрыть </a>
  11. <a href = "#" class = "btn btn-primary" > Сохранить изменения </a>
  12. </div>
  13. </div>

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

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

  1. <!-- Кнопка для запуска модального окна -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Запустить демонстрационное модальное окно </a>
  3.  
  4. <!-- Модальный -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div класс = "модальный заголовок" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Модальный заголовок </h3>
  9. </div>
  10. <div class = "модальное тело" >
  11. <p> Одно прекрасное тело… </p>
  12. </div>
  13. <div class = "модальный нижний колонтитул" >
  14. <button class = "btn" data- dismiss = "modal" aria-hidden = "true" > Закрыть </button>
  15. <button class = "btn btn-primary" > Сохранить изменения </button>
  16. </div>
  17. </div>

Применение

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

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

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

Через JavaScript

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

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

Опции

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

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

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

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

Методы

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

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

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

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

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

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

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

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

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

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

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

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

События

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

Мероприятие Описание
показывать Это событие срабатывает сразу же при showвызове метода экземпляра.
показано Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов css).
Спрятать Это событие запускается сразу после hideвызова метода экземпляра.
скрытый Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов css).
  1. $ ( '#myModal' ). на ( 'скрытый' , функция () {
  2. // сделай что-нибудь…
  3. })

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

Плагин 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, эстетика Уэса Андерсона. 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.


Применение

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

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

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

Через JavaScript

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

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

Методы

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

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

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

Опции

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

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

События

Мероприятие Описание
активировать Это событие срабатывает каждый раз, когда новый элемент активируется scrollspy.

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

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

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 (каждая вкладка должна быть активирована отдельно):

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

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

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

Разметка

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

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

Методы

$(). вкладка

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Домашняя страница </a></li>
  3. <li><a href = "#profile" > Профиль </a></li>
  4. <li><a href = "#messages" > Сообщения </a></li>
  5. <li><a href = "#settings" > Настройки </a></li>
  6. </ul>
  7.  
  8. <div класс = "контент вкладки" >
  9. <div class = "активная вкладка" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функция () {
  17. $ ( '#myTab a:последняя' ). вкладка ( «показать» );
  18. })
  19. </скрипт>

События

Мероприятие Описание
показывать Это событие срабатывает при показе вкладки, но до того, как будет показана новая вкладка. Используйте event.targetи event.relatedTargetдля выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно.
показано Это событие срабатывает при показе вкладки после того, как вкладка была показана. Используйте event.targetи event.relatedTargetдля выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно.
  1. $ ( 'a[data-toggle="tab"]' ). на ( 'показано' , функция ( e ) {
  2. э . цель // активированная вкладка
  3. э . relatedTarget // предыдущая вкладка
  4. })

Примеры

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

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

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

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

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

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

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


Применение

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

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

Опции

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

Имя тип дефолт описание
анимация логический истинный применить переход css затухания к всплывающей подсказке
HTML логический ЛОЖЬ Вставьте html во всплывающую подсказку. Если false, textметод jquery будет использоваться для вставки содержимого в dom. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение строка | функция 'Топ' как расположить всплывающую подсказку - сверху | дно | слева | Правильно
селектор нить ЛОЖЬ Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям.
заглавие строка | функция '' значение заголовка по умолчанию, если тег `title` отсутствует
курок нить «наведение фокуса» как срабатывает всплывающая подсказка - нажмите | парить | фокус | руководство. Обратите внимание, что вы пропускаете несколько триггеров, разделенных пробелами, типы триггеров.
задерживать номер | объект 0

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

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

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

контейнер строка | ЛОЖЬ ЛОЖЬ

Добавляет всплывающую подсказку к определенному элементуcontainer: 'body'

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

Разметка

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

Методы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

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

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

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

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.

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

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

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


Применение

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

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

Опции

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

Имя тип дефолт описание
анимация логический истинный применить переход css затухания к всплывающей подсказке
HTML логический ЛОЖЬ Вставьте html в поповер. Если false, textметод jquery будет использоваться для вставки содержимого в dom. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение строка | функция 'Правильно' как расположить всплывающее окно - сверху | дно | слева | Правильно
селектор нить ЛОЖЬ если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям
курок нить 'щелкнуть' как запускается всплывающее окно - нажмите | парить | фокус | руководство
заглавие строка | функция '' значение заголовка по умолчанию, если атрибут `title` отсутствует
содержание строка | функция '' значение содержимого по умолчанию, если атрибут `data-content` отсутствует
задерживать номер | объект 0

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

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

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

контейнер строка | ЛОЖЬ ЛОЖЬ

Добавляет всплывающее окно к определенному элементуcontainer: 'body'

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

Разметка

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

Методы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Святой гуакамоле! Лучше проверь себя, ты выглядишь не слишком хорошо.

О хват! У тебя ошибка!

Измените это и это и повторите попытку. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Выполните это действие Или сделать это


Применение

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

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

Разметка

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

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

Методы

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

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

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

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

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

События

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

Мероприятие Описание
Закрыть Это событие срабатывает сразу же при closeвызове метода экземпляра.
закрыто Это событие запускается, когда оповещение было закрыто (будет ждать завершения переходов css).
  1. $ ( '#мое-предупреждение' ). привязать ( 'закрыто' , функция () {
  2. // сделай что-нибудь…
  3. })

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

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

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

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

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

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

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

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

Флажок

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

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

Радио

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

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

Применение

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

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

Разметка

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

Опции

Никто

Методы

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

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

Берегись! Вы можете включить автоматическое переключение кнопки с помощью data-toggleатрибута.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

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

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

  1. <button type = "button" class = "btn" data-loading-text = "загрузка материала..." > ... </button>
Берегись! Firefox сохраняет отключенное состояние при загрузке страницы . Обходной путь для этого заключается в использовании autocomplete="off".

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

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

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

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

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

О

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

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

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

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

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.
  1. <div class = "accordion" id = "accordion2" >
  2. <div класс = "аккордеон-группа" >
  3. <div class = "аккордеон-заголовок" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Сворачиваемая группа Элемент № 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "корпус аккордеона схлопывается" >
  9. <div класс = "внутренний аккордеон" >
  10. Анимационное клише...
  11. </div>
  12. </div>
  13. </div>
  14. <div класс = "аккордеон-группа" >
  15. <div class = "аккордеон-заголовок" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Сворачиваемая группа Элемент № 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "свернуть корпус аккордеона" >
  21. <div класс = "внутренний аккордеон" >
  22. Анимационное клише...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

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

Применение

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

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

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

Через JavaScript

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

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

Опции

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

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

Методы

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

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

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

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

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

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

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

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

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

События

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

Мероприятие Описание
показывать Это событие срабатывает сразу же при showвызове метода экземпляра.
показано Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов css).
Спрятать Это событие запускается сразу после вызова hideметода.
скрытый Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов css).
  1. $ ( '#myCollapsible' ). на ( 'скрытый' , функция () {
  2. // сделай что-нибудь…
  3. })

Пример

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

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

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


Применение

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

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

Через JavaScript

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

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

Опции

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

Имя тип дефолт описание
источник массив, функция [ ] Источник данных для запроса. Может быть массивом строк или функцией. В функцию передаются два аргумента, queryзначение в поле ввода и processобратный вызов. Функцию можно использовать синхронно, возвращая источник данных напрямую или асинхронно через processединственный аргумент обратного вызова.
Предметы количество 8 Максимальное количество элементов для отображения в раскрывающемся списке.
минДлина количество 1 Минимальная длина символа, необходимая для запуска предложений автозаполнения.
сопоставитель функция без учета регистра Метод, используемый для определения соответствия запроса элементу. Принимает один аргумент, itemпротив которого проверяется запрос. Получите доступ к текущему запросу с помощью this.query. Возвращает логическое значение true, если запрос соответствует.
сортировщик функция точное совпадение,
с учетом регистра,
без учета регистра
Метод, используемый для сортировки результатов автозаполнения. Принимает один аргумент itemsи имеет область действия экземпляра typeahead. Ссылка на текущий запрос с помощью this.query.
программа обновления функция возвращает выбранный элемент Метод, используемый для возврата выбранного элемента. Принимает один аргумент, itemи имеет область видимости экземпляра typeahead.
маркер функция выделяет все совпадения по умолчанию Метод, используемый для выделения результатов автозаполнения. Принимает один аргумент itemи имеет область действия экземпляра typeahead. Должен вернуть html.

Методы

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

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

Пример

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


Применение

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

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

  1. <div data-spy = "аффикс" data-offset-top = "200" > ... </div>
Берегись! Вы должны управлять положением закрепленного элемента и поведением его непосредственного родителя. Положение контролируется affix, affix-topи affix-bottom. Не забудьте проверить наличие потенциально свернутого родителя, когда аффикс срабатывает, поскольку он удаляет контент из нормального потока страницы.

Через JavaScript

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

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

Опции

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

Имя тип дефолт описание
компенсировать номер | функция | объект 10 Пиксели для смещения от экрана при расчете положения прокрутки. Если указано одно число, смещение будет применяться как в верхнем, так и в левом направлениях. Чтобы прослушивать одно направление или несколько уникальных смещений, просто предоставьте объект offset: { x: 10 }. Используйте функцию, когда вам нужно динамически предоставить смещение (полезно для некоторых адаптивных дизайнов).