JavaScript
Оживите компоненты Bootstrap с помощью более дюжины пользовательских плагинов jQuery. Легко включить их все, или один за другим.
Оживите компоненты Bootstrap с помощью более дюжины пользовательских плагинов jQuery. Легко включить их все, или один за другим.
Плагины можно включать по отдельности (используя отдельные *.js
файлы Bootstrap) или все сразу (используя bootstrap.js
или минимизированные файлы bootstrap.min.js
).
Оба bootstrap.js
и bootstrap.min.js
содержат все плагины в одном файле. Включить только один.
Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагинов). Проконсультируйтесь с намиbower.json
, чтобы узнать, какие версии jQuery поддерживаются.
Вы можете использовать все плагины Bootstrap исключительно через API разметки, не написав ни единой строки JavaScript. Это первоклассный API Bootstrap, и его следует учитывать в первую очередь при использовании плагина.
Тем не менее, в некоторых ситуациях может быть желательно отключить эту функцию. Поэтому мы также предоставляем возможность отключить API атрибутов данных, отменив привязку всех событий в документе с пространством имен data-api
. Это выглядит так:
В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:
Не используйте атрибуты данных из нескольких плагинов для одного и того же элемента. Например, кнопка не может одновременно иметь всплывающую подсказку и переключать модальное окно. Для этого используйте элемент обертки.
Мы также считаем, что вы должны иметь возможность использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы представляют собой отдельные методы с возможностью цепочки и возвращают коллекцию, над которой действуют.
Все методы должны принимать необязательный объект параметров, строку, предназначенную для определенного метода, или ничего (что запускает плагин с поведением по умолчанию):
Каждый плагин также предоставляет свой необработанный конструктор для Constructor
свойства: $.fn.popover.Constructor
. Если вы хотите получить конкретный экземпляр плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover')
.
Вы можете изменить настройки по умолчанию для плагина, изменив Constructor.DEFAULTS
объект плагина:
Иногда необходимо использовать плагины Bootstrap с другими UI-фреймворками. В этих обстоятельствах иногда могут возникать конфликты пространств имен. Если это произойдет, вы можете вызвать .noConflict
плагин, для которого хотите восстановить значение.
Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени, где инфинитив (например show
, ) запускается в начале события, а его форма причастия прошедшего времени (например shown
, ) запускается после завершения действия.
Начиная с версии 3.0.0 все события Bootstrap имеют пространство имен.
Все инфинитивные события обеспечивают preventDefault
функциональность. Это дает возможность остановить выполнение действия до его начала.
Доступ к версии каждого плагина Bootstrap jQuery можно получить через VERSION
свойство конструктора плагина. Например, для плагина всплывающей подсказки:
Плагины Bootstrap не очень изящно отступают, когда JavaScript отключен. Если вам небезразличен пользовательский интерфейс в этом случае, используйте <noscript>
для объяснения ситуации (и того, как повторно включить JavaScript) своим пользователям и/или добавьте собственные резервные варианты.
Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI. Несмотря на .noConflict
события, связанные с пространством имен, могут возникнуть проблемы совместимости, которые вам необходимо исправить самостоятельно.
Для простых эффектов перехода включите transition.js
один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минимизированный) bootstrap.js
, нет необходимости включать это — оно уже есть.
Transition.js — это базовый помощник для transitionEnd
событий, а также эмулятор перехода CSS. Он используется другими подключаемыми модулями для проверки поддержки переходов CSS и обнаружения зависших переходов.
Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен появиться после transition.js
(или bootstrap.js
или bootstrap.min.js
, в зависимости от обстоятельств) загрузки:
Модальные окна — это оптимизированные, но гибкие диалоговые подсказки с минимальной необходимой функциональностью и умными настройками по умолчанию.
Не открывайте модальное окно, пока другое все еще видно. Для одновременного отображения более одного модального окна требуется собственный код.
Всегда старайтесь размещать HTML-код модального окна на верхнем уровне документа, чтобы другие компоненты не влияли на внешний вид и/или функциональность модального окна.
Есть некоторые предостережения относительно использования модальных окон на мобильных устройствах. Для получения подробной информации см. нашу документацию по поддержке браузера .
Из-за того, как HTML5 определяет свою семантику, autofocus
атрибут HTML не влияет на модальные окна Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:
Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.
Переключите модальное окно с помощью JavaScript, нажав кнопку ниже. Он будет скользить вниз и исчезать в верхней части страницы.
Обязательно добавьте role="dialog"
и aria-labelledby="..."
, ссылаясь на модальное название, на .modal
и role="document"
на .modal-dialog
себя.
Кроме того, вы можете дать описание своего модального диалога с помощью aria-describedby
on .modal
.
Для встраивания видео с YouTube в модальные окна требуется дополнительный JavaScript, не входящий в Bootstrap, для автоматической остановки воспроизведения и т. д. См. этот полезный пост о переполнении стека для получения дополнительной информации.
Модальные окна имеют два дополнительных размера, доступных через классы модификаторов для размещения в файле .modal-dialog
.
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите .fade
класс из модальной разметки.
Чтобы воспользоваться системой сетки Bootstrap в модальном окне, просто вложите .row
s в , .modal-body
а затем используйте обычные классы системы сетки.
У вас есть куча кнопок, которые вызывают одно и то же модальное окно, но с немного разным содержимым? Используйте атрибутыevent.relatedTarget
и HTMLdata-*
(возможно, через jQuery ), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. Подробную информацию о модальных событиях см. в документации по модальным событиям relatedTarget
.
Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open
к <body>
переопределению поведения прокрутки по умолчанию и создает .modal-backdrop
область щелчка для закрытия отображаемых модальных окон при нажатии вне модального окна.
Активируйте модальное окно без написания JavaScript. Установите data-toggle="modal"
элемент контроллера, например кнопку, вместе с data-target="#foo"
или href="#foo"
, чтобы настроить конкретное модальное окно для переключения.
Вызов модального окна с идентификатором myModal
с помощью одной строки JavaScript:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-backdrop=""
.
Имя | тип | дефолт | описание |
---|---|---|---|
фон | логическое значение или строка'static' |
истинный | Включает элемент модального фона. В качестве альтернативы укажите static фон, который не закрывает модальное окно при нажатии. |
клавиатура | логический | истинный | Закрывает модальное окно при нажатии клавиши escape |
показывать | логический | истинный | Показывает модальное окно при инициализации. |
удаленный | дорожка | ЛОЖЬ | Эта опция устарела, начиная с версии 3.3.0, и была удалена в версии 4. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или структуру привязки данных или вызывать jQuery.load самостоятельно. Если указан удаленный URL-адрес, содержимое будет загружено один раз с помощью |
.modal(options)
Активирует ваш контент как модальный. Принимает необязательные параметры object
.
.modal('toggle')
Вручную переключает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно было показано или скрыто (т. е. до того, как произошло событие shown.bs.modal
или ).hidden.bs.modal
.modal('show')
Вручную открывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно будет показано (т. е. до того , как shown.bs.modal
произойдет событие).
.modal('hide')
Вручную скрывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно будет фактически скрыто (т. е. до того , как hidden.bs.modal
произойдет событие).
.modal('handleUpdate')
Изменяет положение модального окна, чтобы противодействовать полосе прокрутки в случае ее появления, что заставит модальное перейти влево.
Требуется только тогда, когда высота модального окна изменяется, когда оно открыто.
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям.
Все модальные события запускаются в самом модальном окне (т.е. в <div class="modal">
).
Тип события | Описание |
---|---|
показать.bs.modal | Это событие срабатывает сразу же при show вызове метода экземпляра. Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTarget свойство события. |
показанный.bs.modal | Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов CSS). Если это вызвано щелчком, элемент, по которому щелкнули, доступен как relatedTarget свойство события. |
скрыть.bs.modal | Это событие запускается сразу после hide вызова метода экземпляра. |
скрытый.bs.modal | Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов CSS). |
загруженный.bs.modal | Это событие запускается, когда модальное окно загрузило контент с помощью remote параметра. |
С помощью этого простого плагина добавьте выпадающие меню практически ко всему, включая панель навигации, вкладки и планшеты.
С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (выпадающие меню), переключая .open
класс в элементе родительского списка.
На мобильных устройствах при открытии раскрывающегося списка добавляется .dropdown-backdrop
область касания для закрытия раскрывающихся меню при касании за пределами меню, что является требованием для надлежащей поддержки iOS. Это означает, что для переключения из открытого выпадающего меню в другое выпадающее меню требуется дополнительное нажатие на мобильном устройстве.
Примечание. Этот data-toggle="dropdown"
атрибут используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.
Добавьте data-toggle="dropdown"
к ссылке или кнопке, чтобы переключить раскрывающийся список.
Чтобы сохранить URL-адреса без изменений с кнопками ссылок, используйте data-target
атрибут вместо href="#"
.
Вызовите раскрывающиеся списки через JavaScript:
data-toggle="dropdown"
все еще требуетсяНезависимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle="dropdown"
он всегда должен присутствовать в элементе триггера раскрывающегося списка.
Никто
$().dropdown('toggle')
Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
Все события раскрывающегося списка запускаются в .dropdown-menu
родительском элементе.
Все выпадающие события имеют relatedTarget
свойство, значением которого является переключаемый элемент привязки.
Тип события | Описание |
---|---|
показать.bs.выпадающий | Это событие срабатывает немедленно при вызове метода экземпляра show. |
показанный.bs.выпадающий список | Это событие запускается, когда раскрывающийся список становится видимым для пользователя (будет ожидать завершения переходов CSS). |
скрыть.bs.выпадающий список | Это событие запускается сразу после вызова метода скрытия экземпляра. |
скрытый.bs.выпадающий список | Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ждать завершения переходов CSS). |
Плагин 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.
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.
Ссылки панели навигации должны иметь разрешимые целевые идентификаторы. Например, <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.
После добавления position: relative;
CSS вызовите scrollspy через JavaScript:
.scrollspy('refresh')
При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM вам нужно будет вызвать метод обновления следующим образом:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-offset=""
.
Имя | тип | дефолт | описание |
---|---|---|---|
компенсировать | количество | 10 | Пиксели для смещения сверху при расчете положения прокрутки. |
Тип события | Описание |
---|---|
активировать.bs.scrollspy | Это событие срабатывает каждый раз, когда новый элемент активируется 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Этот плагин расширяет компонент навигации с вкладками , добавляя области с вкладками.
Включите вкладки с вкладками через JavaScript (каждая вкладка должна быть активирована отдельно):
Вы можете активировать отдельные вкладки несколькими способами:
Вы можете активировать вкладку или панель навигации без написания JavaScript, просто указав data-toggle="tab"
или data-toggle="pill"
на элементе. Добавление классов и на вкладку nav
применит стиль вкладки Bootstrap , а добавление классов и применит стиль пилюли .nav-tabs
ul
nav
nav-pills
Чтобы вкладки исчезали, добавьте .fade
к каждому файлу .tab-pane
. Первая панель вкладок также должна .in
отображать начальное содержимое.
$().tab
Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо a, data-target
либо href
целевой узел контейнера в DOM. В приведенных выше примерах вкладки — это <a>
s с data-toggle="tab"
атрибутами.
.tab('show')
Выбирает данную вкладку и показывает связанное с ней содержимое. Любая другая вкладка, которая была ранее выбрана, становится невыбранной, а связанное с ней содержимое скрывается. Возвращает вызывающему объекту до фактического отображения панели вкладок (т. е. до shown.bs.tab
возникновения события).
При отображении новой вкладки события запускаются в следующем порядке:
hide.bs.tab
(на текущей активной вкладке)show.bs.tab
(на вкладке "Показать")hidden.bs.tab
(на предыдущей активной вкладке, той же, что и для hide.bs.tab
события)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 для выбора предыдущей активной вкладки и новой активной вкладки соответственно. |
Вдохновленный превосходным плагином jQuery.tipsy, написанным Джейсоном Фреймом; Всплывающие подсказки — это обновленная версия, которая не использует изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков.
Подсказки с заголовками нулевой длины никогда не отображаются.
Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:
Узкие штаны следующего уровня куфии , вы, наверное , о них не слышали. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney's Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По-настоящему ироничный ремесленник , какой бы кейтар ни был, сценастер с фермы на стол, Бэнкси Остин, Твиттер, ручка , Фриган Кред, сырой деним, вирусный кофе одного происхождения.
Доступны четыре варианта: выравнивание по верхнему, правому, нижнему и левому краю.
По соображениям производительности API-интерфейсы данных Tooltip и Popover являются опциональными, то есть вы должны инициализировать их самостоятельно .
Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по их data-toggle
атрибуту:
Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию размещает всплывающие подсказки после их триггерного элемента.
Запустите всплывающую подсказку через JavaScript:
Необходимая разметка для всплывающей подсказки — это только data
атрибут и title
элемент HTML, в котором вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию, установленная top
плагином).
Иногда вы хотите добавить всплывающую подсказку к гиперссылке, которая переносит несколько строк. По умолчанию плагин всплывающей подсказки центрирует его по горизонтали и вертикали. Добавьте white-space: nowrap;
к своим якорям, чтобы избежать этого.
При использовании всплывающих подсказок для элементов внутри a .btn-group
или .input-group
, или для элементов, связанных с таблицей ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), вам нужно будет указать параметр container: 'body'
(задокументированный ниже), чтобы избежать нежелательных побочных эффектов (таких как увеличение ширины элемента и/ или потеря закругленных углов при срабатывании всплывающей подсказки).
Пользователям, осуществляющим навигацию с помощью клавиатуры, и, в частности, пользователям вспомогательных технологий, следует добавлять всплывающие подсказки только к элементам, на которые можно сфокусироваться с помощью клавиатуры, таким как ссылки, элементы управления формы или любой произвольный элемент с tabindex="0"
атрибутом.
Чтобы добавить всплывающую подсказку к элементу disabled
или .disabled
, поместите элемент внутрь элемента и вместо этого <div>
примените всплывающую подсказку к нему.<div>
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-animation=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
анимация | логический | истинный | Применить CSS-переход затухания к всплывающей подсказке |
контейнер | строка | ЛОЖЬ | ЛОЖЬ | Добавляет всплывающую подсказку к определенному элементу. Пример: |
задерживать | номер | объект | 0 | Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера. Если указано число, задержка применяется как к скрытию, так и к показу. Структура объекта: |
HTML | логический | ЛОЖЬ | Вставьте HTML во всплывающую подсказку. Если false, text метод jQuery будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках. |
размещение | строка | функция | 'Топ' | Как расположить всплывающую подсказку - вверху | дно | слева | право | авто. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст |
селектор | нить | ЛОЖЬ | Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих подсказок в динамический HTML-контент. См. это и информативный пример . |
шаблон | нить | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Базовый HTML для использования при создании всплывающей подсказки. Всплывающая подсказка
Самый внешний элемент-оболочка должен иметь |
заглавие | строка | функция | '' | Значение заголовка по умолчанию, если Если задана функция, она будет вызываться со |
курок | нить | «наведение фокуса» | Как срабатывает всплывающая подсказка - нажмите | наведите | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. manual нельзя комбинировать ни с каким другим триггером. |
окно просмотра | строка | объект | функция | {селектор: 'тело', заполнение: 0} | Удерживает всплывающую подсказку в границах этого элемента. Пример: Если задана функция, она вызывается с узлом DOM инициирующего элемента в качестве единственного аргумента. Контекст |
В качестве альтернативы параметры для отдельных всплывающих подсказок можно указать с помощью атрибутов данных, как описано выше.
$().tooltip(options)
Присоединяет обработчик всплывающей подсказки к коллекции элементов.
.tooltip('show')
Отображает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка действительно будет показана (т. е. до того , как shown.bs.tooltip
произойдет событие). Это считается "ручным" запуском всплывающей подсказки. Подсказки с заголовками нулевой длины никогда не отображаются.
.tooltip('hide')
Скрывает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка будет фактически скрыта (т. е. до того , как hidden.bs.tooltip
произойдет событие). Это считается "ручным" запуском всплывающей подсказки.
.tooltip('toggle')
Переключает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка действительно была показана или скрыта (т. е. до того, как произошло событие shown.bs.tooltip
или ). hidden.bs.tooltip
Это считается "ручным" запуском всплывающей подсказки.
.tooltip('destroy')
Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (создаваемые с помощью параметра selector
) , не могут быть уничтожены по отдельности в дочерних элементах триггера.
Тип события | Описание |
---|---|
show.bs.tooltip | Это событие срабатывает сразу же при show вызове метода экземпляра. |
показанная.bs.подсказка | Это событие запускается, когда всплывающая подсказка становится видимой для пользователя (будет ожидать завершения переходов CSS). |
hide.bs.подсказка | Это событие запускается сразу после hide вызова метода экземпляра. |
скрытая.bs.подсказка | Это событие запускается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ждать завершения переходов CSS). |
вставленная.bs.подсказка | Это событие запускается после show.bs.tooltip события, когда шаблон всплывающей подсказки был добавлен в DOM. |
Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации.
Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.
Всплывающие окна требуют, чтобы плагин всплывающей подсказки был включен в вашу версию Bootstrap.
По соображениям производительности API-интерфейсы данных Tooltip и Popover являются опциональными, то есть вы должны инициализировать их самостоятельно .
Один из способов инициализировать все всплывающие окна на странице — выбрать их по их data-toggle
атрибуту:
При использовании всплывающих окон для элементов внутри a .btn-group
или .input-group
, или для элементов, связанных с таблицей ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), вам нужно будет указать параметр container: 'body'
(задокументированный ниже), чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и/ или потеря закругленных углов при срабатывании всплывающего окна).
Чтобы добавить всплывающее окно к элементу 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.
Используйте focus
триггер, чтобы закрыть всплывающие окна при следующем щелчке пользователя.
Для правильного кросс-браузерного и кросс-платформенного поведения вы должны использовать <a>
тег, а не тег <button>
, а также должны включать атрибуты role="button"
и .tabindex
Включить всплывающие окна через JavaScript:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-animation=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
анимация | логический | истинный | Применить CSS-переход затухания к поповеру |
контейнер | строка | ЛОЖЬ | ЛОЖЬ | Добавляет всплывающее окно к определенному элементу. Пример: |
содержание | строка | функция | '' | Значение содержимого по умолчанию, если Если задана функция, она будет вызываться со |
задерживать | номер | объект | 0 | Задержка показа и скрытия всплывающего окна (мс) — не относится к ручному типу триггера. Если указано число, задержка применяется как к скрытию, так и к показу. Структура объекта: |
HTML | логический | ЛОЖЬ | Вставьте HTML во всплывающее окно. Если false, text метод jQuery будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках. |
размещение | строка | функция | 'Правильно' | Как расположить всплывающее окно - сверху | дно | слева | право | авто. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающего окна в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст |
селектор | нить | ЛОЖЬ | Если предоставлен селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это используется для включения всплывающих окон в динамический HTML-контент. См. это и информативный пример . |
шаблон | нить | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Базовый HTML для использования при создании всплывающего окна. Поповеры Поповеры
Самый внешний элемент-оболочка должен иметь |
заглавие | строка | функция | '' | Значение заголовка по умолчанию, если Если задана функция, она будет вызываться со |
курок | нить | 'щелкнуть' | Как срабатывает всплывающее окно - нажмите | наведите | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. manual нельзя комбинировать ни с каким другим триггером. |
окно просмотра | строка | объект | функция | {селектор: 'тело', заполнение: 0} | Удерживает всплывающее окно в пределах границ этого элемента. Пример: Если задана функция, она вызывается с узлом DOM инициирующего элемента в качестве единственного аргумента. Контекст |
В качестве альтернативы параметры для отдельных всплывающих окон можно указать с помощью атрибутов данных, как описано выше.
$().popover(options)
Инициализирует всплывающие окна для коллекции элементов.
.popover('show')
Отображает всплывающее окно элемента. Возвращает вызывающему объекту до фактического отображения всплывающего окна (т. е. до того , как shown.bs.popover
произойдет событие). Это считается "ручным" запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.
.popover('hide')
Скрывает всплывающее окно элемента. Возвращает вызывающему объекту до того, как всплывающее окно будет фактически скрыто (т. е. до того , как hidden.bs.popover
произойдет событие). Это считается "ручным" запуском всплывающего окна.
.popover('toggle')
Переключает всплывающее окно элемента. Возвращает вызывающему объекту до того, как всплывающее окно было действительно показано или скрыто (т. е. до того, как произошло событие shown.bs.popover
или ). hidden.bs.popover
Это считается "ручным" запуском всплывающего окна.
.popover('destroy')
Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (созданные с использованием параметра selector
) , не могут быть уничтожены по отдельности в элементах-триггерах-потомках.
Тип события | Описание |
---|---|
показать.bs.popover | Это событие срабатывает сразу же при show вызове метода экземпляра. |
показанный.bs.popover | Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ждать завершения переходов CSS). |
скрыть.bs.popover | Это событие запускается сразу после hide вызова метода экземпляра. |
hidden.bs.popover | Это событие запускается, когда всплывающее окно перестает быть скрытым от пользователя (будет ждать завершения переходов CSS). |
вставленный.bs.popover | Это событие запускается после show.bs.popover события, когда шаблон всплывающего окна был добавлен в DOM. |
Добавьте функцию отклонения ко всем предупреждающим сообщениям с помощью этого плагина.
При использовании .close
кнопки она должна быть первым дочерним элементом, .alert-dismissible
и перед ней не должно быть текстового содержимого в разметке.
Измените это и это и повторите попытку. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Просто добавьте data-dismiss="alert"
к своей кнопке закрытия, чтобы автоматически дать предупреждение о закрытии. Закрытие оповещения удаляет его из DOM.
Чтобы ваши оповещения использовали анимацию при закрытии, убедитесь, что они имеют .fade
и.in
к ним уже применены классы
$().alert()
Делает оповещение прослушиванием событий щелчка на элементах-потомках, которые имеют data-dismiss="alert"
атрибут. (Не требуется при использовании автоинициализации data-api.)
$().alert('close')
Закрывает оповещение, удаляя его из DOM. Если классы .fade
и .in
присутствуют в элементе, оповещение исчезнет, прежде чем оно будет удалено.
Плагин предупреждений Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.
Тип события | Описание |
---|---|
close.bs.alert | Это событие срабатывает сразу же при close вызове метода экземпляра. |
закрытое.bs.предупреждение | Это событие запускается, когда оповещение закрыто (будет ожидать завершения переходов CSS). |
Делайте больше с кнопками. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.
Firefox сохраняет состояния контроля формы (отключение и проверка) при загрузке страницы . Обходной путь для этого заключается в использовании autocomplete="off"
. См. ошибку Mozilla № 654072 .
Добавьте data-loading-text="Loading..."
, чтобы использовать состояние загрузки на кнопке.
Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4.
Для этой демонстрации мы используем data-loading-text
и $().button('loading')
, но это не единственное состояние, которое вы можете использовать. Подробнее об этом смотрите ниже в $().button(string)
документации .
Добавить data-toggle="button"
, чтобы активировать переключение на одну кнопку.
.active
иaria-pressed="true"
Для кнопок с предварительным переключением вы должны добавить .active
класс и aria-pressed="true"
атрибут к button
себе.
Добавьте data-toggle="buttons"
к .btn-group
содержащемуся флажку или переключателям, чтобы включить переключение в соответствующих стилях.
.active
Для предварительно выбранных параметров вы должны добавить .active
класс к входным данным label
самостоятельно.
Если проверенное состояние кнопки-флажка обновляется без запуска click
события на кнопке (например, с помощью <input type="reset">
или с помощью установки checked
свойства ввода), вам нужно будет переключить .active
класс на входе label
самостоятельно.
$().button('toggle')
Переключает состояние нажатия. Создает впечатление, что кнопка активирована.
$().button('reset')
Сбрасывает состояние кнопки — меняет текст на исходный текст. Этот метод является асинхронным и возвращает значение до фактического завершения сброса.
$().button(string)
Заменяет текст на любое текстовое состояние, определенное данными.
Гибкий плагин, который использует несколько классов для простого переключения поведения.
Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap.
Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
.collapse
скрывает содержимое.collapsing
применяется во время переходов.collapse.in
показывает содержимоеВы можете использовать ссылку с href
атрибутом или кнопку с data-target
атрибутом. В обоих случаях data-toggle="collapse"
требуется .
Расширьте поведение свертывания по умолчанию, чтобы создать аккордеон с компонентом панели.
Также можно поменять местами .panel-body
s на .list-group
s.
Обязательно добавьте aria-expanded
в элемент управления. Этот атрибут явно определяет текущее состояние сворачиваемого элемента для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, он должен иметь значение aria-expanded="false"
. Если вы настроили раскрывающийся элемент по умолчанию с помощью in
класса, aria-expanded="true"
вместо этого установите его в элементе управления. Плагин будет автоматически переключать этот атрибут в зависимости от того, был ли складной элемент открыт или закрыт.
Кроме того, если ваш элемент управления нацелен на один сворачиваемый элемент, т. е. data-target
атрибут указывает на селектор, вы можете добавить к элементу управления id
дополнительный атрибут, содержащий свойство сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.aria-controls
id
Плагин сворачивания использует несколько классов для выполнения тяжелой работы:
.collapse
скрывает содержимое.collapse.in
показывает содержимое.collapsing
добавляется, когда начинается переход, и удаляется, когда он заканчиваетсяЭти классы можно найти в component-animations.less
.
Просто добавьте data-toggle="collapse"
и data-target
к элементу, чтобы автоматически назначить управление складным элементом. Атрибут data-target
принимает селектор CSS, к которому применяется свертывание. Обязательно добавьте класс collapse
к складному элементу. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс in
.
Чтобы добавить к сворачиваемому элементу управления групповое управление в стиле аккордеона, добавьте атрибут данных data-parent="#selector"
. Обратитесь к демо, чтобы увидеть это в действии.
Включить вручную с помощью:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-parent=""
.
Имя | тип | дефолт | описание |
---|---|---|---|
родитель | селектор | ЛОЖЬ | Если предоставлен селектор, то все сворачиваемые элементы под указанным родительским элементом будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению аккордеона - это зависит от panel класса) |
переключать | логический | истинный | Переключает сворачиваемый элемент при вызове |
.collapse(options)
Активирует ваш контент как складной элемент. Принимает необязательные параметры object
.
.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). |
Компонент слайд-шоу для циклического просмотра элементов, таких как карусель. Вложенные карусели не поддерживаются.
Компонент карусели обычно не соответствует стандартам доступности. Если вам нужно соответствовать требованиям, рассмотрите другие варианты представления вашего контента.
Bootstrap использует исключительно CSS3 для своих анимаций, но Internet Explorer 8 и 9 не поддерживают необходимые свойства CSS. Таким образом, при использовании этих браузеров отсутствует анимация перехода между слайдами. Мы намеренно решили не включать резервные копии на основе jQuery для переходов.
Класс .active
нужно добавить на один из слайдов. В противном случае карусель не будет видна.
Классы .glyphicon .glyphicon-chevron-left
и .glyphicon .glyphicon-chevron-right
не обязательно нужны для элементов управления. Bootstrap предоставляет .icon-prev
и .icon-next
как простые альтернативы Unicode.
Легко добавляйте подписи к слайдам с помощью .carousel-caption
элемента в любом файле .item
. Поместите туда любой необязательный HTML-код, и он будет автоматически выровнен и отформатирован.
Карусели требуют использования id
на самом внешнем контейнере ( .carousel
) для правильного функционирования элементов управления каруселями. При добавлении нескольких каруселей или при изменении карусели id
обязательно обновите соответствующие элементы управления.
Используйте атрибуты данных, чтобы легко управлять положением карусели. data-slide
принимает ключевые слова prev
или next
, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-to
для передачи необработанного индекса слайда в карусель data-slide-to="2"
, который сдвигает положение слайда на определенный индекс, начинающийся с 0
.
Атрибут data-ride="carousel"
используется, чтобы пометить карусель как анимацию, начиная с загрузки страницы. Его нельзя использовать в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.
Вызвать карусель вручную с помощью:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-interval=""
.
Имя | тип | дефолт | описание |
---|---|---|---|
интервал | количество | 5000 | Количество времени задержки между автоматическим циклом элемента. Если false, карусель не будет автоматически циклироваться. |
Пауза | строка | нулевой | "парить" | Если установлено значение "hover" , приостанавливает циклирование карусели mouseenter и возобновляет циклическое движение карусели при включении mouseleave . Если установлено значение null , наведение курсора на карусель не приостановит ее. |
сворачивать | логический | истинный | Должна ли карусель вращаться непрерывно или делать резкие остановки. |
клавиатура | логический | истинный | Должна ли карусель реагировать на события клавиатуры. |
.carousel(options)
Инициализирует карусель с дополнительными параметрами object
и начинает циклически перемещаться по элементам.
.carousel('cycle')
Перебирает элементы карусели слева направо.
.carousel('pause')
Запрещает карусели циклически перемещаться по элементам.
.carousel(number)
Циклически перемещает карусель к определенному кадру (на основе 0, подобно массиву).
.carousel('prev')
Переход к предыдущему элементу.
.carousel('next')
Переход к следующему элементу.
Класс карусели Bootstrap предоставляет два события для подключения к функциям карусели.
Оба события имеют следующие дополнительные свойства:
direction
: направление, в котором движется карусель ( "left"
или "right"
).relatedTarget
: элемент DOM, который вставляется на место в качестве активного элемента.Все события карусели запускаются в самой карусели (т.е. в <div class="carousel">
).
Тип события | Описание |
---|---|
слайд.бс.карусель | Это событие срабатывает немедленно при slide вызове метода экземпляра. |
slid.bs.карусель | Это событие запускается, когда карусель завершила переход слайдов. |
Плагин аффикса включается position: fixed;
и выключается, имитируя эффект, обнаруженный с помощью position: sticky;
. Вложенная навигация справа — это живая демонстрация плагина аффикса.
Используйте плагин аффикса через атрибуты данных или вручную с помощью собственного JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования и ширины прикрепленного контента.
Примечание. Не используйте подключаемый модуль аффикса для элемента, содержащегося в относительно позиционированном элементе, таком как вытягиваемый или выдвигаемый столбец, из-за ошибки рендеринга Safari .
Плагин аффикса переключается между тремя классами, каждый из которых представляет определенное состояние: .affix
, .affix-top
и .affix-bottom
. Вы должны предоставить стили, за исключением position: fixed;
on .affix
, для этих классов самостоятельно (независимо от этого плагина), чтобы обрабатывать фактические позиции.
Вот как работает плагин аффикса:
.affix-top
, чтобы указать, что элемент находится в самой верхней позиции. На данный момент позиционирование CSS не требуется..affix
заменяет .affix-top
и устанавливает position: fixed;
(предоставляет CSS Bootstrap)..affix
на .affix-bottom
. Поскольку смещения являются необязательными, для их установки необходимо установить соответствующий CSS. В этом случае добавляйте position: absolute;
по мере необходимости. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где расположить элемент оттуда.Выполните описанные выше шаги, чтобы настроить CSS для любого из приведенных ниже вариантов использования.
Чтобы легко добавить поведение аффикса к любому элементу, просто добавьте data-spy="affix"
его к элементу, за которым хотите следить. Используйте смещения, чтобы определить, когда следует переключать закрепление элемента.
Вызов плагина аффикса через JavaScript:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-offset-top="200"
.
Имя | тип | дефолт | описание |
---|---|---|---|
компенсировать | номер | функция | объект | 10 | Пиксели для смещения от экрана при расчете положения прокрутки. Если указано одно число, смещение будет применяться как в верхнем, так и в нижнем направлениях. Чтобы обеспечить уникальное нижнее и верхнее смещение, просто укажите объект offset: { top: 10 } или файл offset: { top: 10, bottom: 5 } . Используйте функцию, когда вам нужно динамически вычислить смещение. |
цель | селектор | узел | элемент jQuery | window объект _ |
Определяет целевой элемент аффикса. |
.affix(options)
Активирует ваш контент как прикрепленный контент. Принимает необязательные параметры object
.
.affix('checkPosition')
Пересчитывает состояние аффикса на основе размеров, положения и положения прокрутки соответствующих элементов. Классы .affix
, .affix-top
и .affix-bottom
добавляются или удаляются из прикрепленного содержимого в соответствии с новым состоянием. Этот метод необходимо вызывать всякий раз, когда изменяются размеры прикрепленного содержимого или целевого элемента, чтобы обеспечить правильное позиционирование прикрепленного содержимого.
Плагин аффикса Bootstrap предоставляет несколько событий для подключения к функциональности аффикса.
Тип события | Описание |
---|---|
аффикс.bs.аффикс | Это событие срабатывает непосредственно перед прикреплением элемента. |
прикрепленный.bs.аффикс | Это событие запускается после прикрепления элемента. |
аффикс-top.bs.аффикс | Это событие срабатывает непосредственно перед тем, как элемент будет прикреплен сверху. |
аффикс-top.bs.аффикс | Это событие запускается после того, как элемент был добавлен сверху. |
аффикс-bottom.bs.аффикс | Это событие срабатывает непосредственно перед тем, как элемент будет прикреплен снизу. |
прикрепленный-нижний.bs.аффикс | Это событие запускается после того, как элемент был прикреплен снизу. |