Подсказки · Bootstrap на русском
Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.
Содержание
Обзор
Что нужно знать при использовании плагин всплывающей подсказки:
- Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
- Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
- Подсказки с нулевой длины названия не отображаются.
- Укажите
container: 'body'
чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.). - Вызывая подсказки на скрытые элементы не будут работать.
- Подсказки для
.disabled
или
элементы должны быть вызваны на элемент оболочки. - При срабатывании из гиперссылок, которые охватывают несколько строк, подсказки будут центрироваться. Используйте
white-space: nowrap;
на<a>
, чтобы избежать этого поведения.
Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.
Одним из способов инициализации все подсказки на странице будет выбрать их data-toggle
атрибута:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Примеры
Наведите курсор на ссылки ниже, чтобы посмотреть подсказки:
Статические демо
Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.
Интерактивная демо-версия
Наведите курсор на подписи, чтобы увидеть подсказки.
<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Использование
Плагин всплывающей подсказки генерирует контент и разметки по требованию, а по умолчанию места подсказки после запуска элемента.
Вызвать подсказку через JavaScript:
$('#example').tooltip(options)
Разметки
Требуемая разметка для подсказки только data
атрибут title
на HTML элемент, который вы хотите иметь подсказку. Созданный разметки подсказки достаточно проста, хотя и требует установки (по умолчанию значение top
плагином).
Делая подсказки для работы клавиатуры и пользователей ассистивных технологий
Следует только добавить всплывающие подсказки для элементов HTML, которые традиционно клавиатурой и интерактивным (например, ссылки или элементы управления формы). Хотя произвольный HTML-элементы (такие как <span>
) может быть сделан фокус на добавление tabindex="0"
атрибута, это может Добавить закладку раздражает и смущает останавливается на неинтерактивные элементы для пользователей клавиатуры. Кроме того, большинство технологий, в настоящее время не озвучит подсказки в этой ситуации.
<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Сгенерированной разметке плагин -->
<div role="tooltip">
<div></div>
<div>
Some tooltip text!
</div>
</div>
Варианты
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-
, а на data-animation=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
animation | boolean | true | Нанесите CSS плавного перехода к подсказке |
container | string | false | false |
Добавляет всплывающую подсказку к конкретному элементу. Пример: |
delay | number | object | 0 |
Задержка отображения и скрытия подсказки (мс) — не применяется к ручной запуск Тип Если номер указан, задержка применяется как скрыть/показать Структура объекта: |
html | boolean | false | Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак. |
placement | string | function | ‘top’ |
Как подсказка — сверху | снизу | слева | справа | авто. Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В |
selector | string | false | Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример. |
template | string | '<div role="tooltip"><div></div><div></div></div>' |
Базовый HTML-для использования при создании всплывающей подсказки. Подсказки
Элемент внешней оболочки должен иметь |
title | string | element | function | » |
По умолчанию название значение, если атрибут Если дана функция, она будет вызвана с его |
trigger | string | ‘hover focus’ | Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. «вручную» не может сочетаться с любой другой триггер. |
constraints | Array | [] | Множество препятствий — прошел на Tether. Дополнительные сведения см. в разделе Tether’ы ограничение документы. |
offset | string | ‘0 0’ | Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether’ы смещение документы. |
Атрибуты данных для отдельных подсказки
Варианты индивидуальных подсказки также может быть задан с помощью атрибутов данных, как описано выше.
Методы
$().tooltip(options)
Присоединяет обработчик подсказки к коллекции элементов.
.tooltip('show')
Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip
события). Это считается “ручного” срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.
$('#element').tooltip('show')
.tooltip('hide')
Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip
события). Это считается “ручного” срабатывания подсказке.
$('#element').tooltip('hide')
.tooltip('toggle')
Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip
или hidden.bs.tooltip
события). Это считается “ручного” срабатывания подсказке.
$('#element').tooltip('toggle')
.tooltip('dispose')
Скрывает и уничтожает всплывающей подсказки элемента. Подсказки, что использовать делегирование (которые создаются с помощью
опция) не может быть индивидуально уничтожен потомок триггерных элементов.
$('#element').tooltip('dispose')
События
Тип События | Описание |
---|---|
show.bs.tooltip | Это событие возникает сразу же, когда show вызывается способ экземпляра. |
shown.bs.tooltip | Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения). |
hide.bs.tooltip | Это событие сразу же уволили, когда hide метод экземпляра называется. |
hidden.bs.tooltip |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// сделать что-то...
})
Tooltip CSS уроки для начинающих академия
Создание всплывающих подсказок с помощью CSS.
Демонстрация: примеры подсказок
Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент:
Базовая подсказка
Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:
Пример
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div>Hover
over me
<span>Tooltip
text</span>
</div>
Пример объяснено
HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip"
. Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.
Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext"
.
CSS: Класс tooltip
использует position:relative
, который необходим для размещения текста подсказки ( position:absolute
).
Примечание: Ниже приведены примеры размещения всплывающей подсказки.
Класс tooltiptext
содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.
Свойство CSS border-radius
используется для добавления скругленных углов в текст подсказки.
Селектор :hover
используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с class="tooltip"
.
Размещение всплывающих подсказок
В этом примере подсказка помещается справа ( left:105%
) «парящего» текста (<div>). Также обратите внимание, что top:-5px
используется для размещения его в середине его элемента контейнера.
Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top
, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.
Подсказка справа
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Result:
Hover over me Tooltip text
Левая подсказка
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Result:
Hover over me Tooltip text
Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left
со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).
Верхняя подсказка
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Result:
Hover over me Tooltip text
Нижняя подсказка
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Result:
Hover over me Tooltip text
Стрелки подсказки
Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after
вместе со свойством content
. Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.
В этом примере показано, как добавить стрелку в нижнюю часть подсказки:
Нижняя стрелка
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Result:
Hover over me Tooltip text
Пример объяснено
Поместите стрелку в подсказку: top: 100%
будет размещать стрелку в нижней части всплывающей подсказки. left: 50%
будет центрировать стрелку.
Примечание: Свойство border-width
определяет размер стрелки. При изменении этого параметра также измените значение margin-left
. Это будет держать стрелку в центре.
border-color
используется для преобразования содержимого в стрелку. Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.
В этом примере демонстрируется добавление стрелки в верхнюю часть всплывающей подсказки. Обратите внимание, что на этот раз мы установили нижний цвет границы:
Верхняя стрелка
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Result:
Hover over me Tooltip text
В этом примере показано, как добавить стрелку слева от подсказки:
Стрелка влево
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Result:
Hover over me Tooltip text
В этом примере показано, как добавить стрелку справа от подсказки:
Стрелка вправо
.tooltip .tooltiptext::after {
content: » «;
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Result:
Hover over me Tooltip text
Исчезать в подсказках (анимация)
Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition
свойство вместе с opacity
свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :
Пример
.tooltip .tooltiptext {opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}
Использование атрибута aria-describedby — Доступность
Описание
Атрибут aria-describedby
используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на aria-labelledby: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.
Атрибут aria-describedby
используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе Examples ниже приведено больше информации о том как использовать атрибут в этих случаях.
Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена ARIA role
.
Значение
разделенный пробелами список ID элементов
Возможные последствия для пользовательских агентов и вспомогательных технологийP
Примечание: Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.
Примеры
Пример 1: Связвание приложения и описания
В примере ниже, вводный параграф описывает приложение календаря. aria-describedby
используется для связывания параграфа с контейнером приложения.
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h2>Calendar</h2>
<p>
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Пример 2: Кнопка закрытия
В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.
<button aria-label="Close" aria-describedby="descriptionClose"
>X</button>
...
<div>Closing this window will discard any information entered and
return you back to the main page</div>
Рабочие примеры:
Примечания
- Атрибут
aria-describedby
не предназначен для ссылки, описывающей внешний ресурс — так как это ID, он должен ссылаться на элемент в том же документе DOM.
Использование ARIA ролей
все элементы базовой разметки
Связанные ARIA методы
Совместимость
Дополнительные ресурсы
javascript — всплывающая подсказка Bootstrap не работает в моем веб-проекте
На самом деле я нахожусь в очень странной ситуации и почему-то не могу понять, что со мной происходит. Ситуация заключается в том, что я на самом деле отлично реализую свою всплывающую подсказку для начальной загрузки, и я проверил ее на JsFiddle
, он тоже работает нормально, однако после многих усилий он не реализуется в веб-проекте, я не не знаю почему.
Это буквально очень странно.Вот моя реализация, которая отлично работает с JsFiddle.
<раздел>
Легкость
каждому дому
А для решений я много чего сделал, но, к сожалению, все не сработало.
-
С учетом названия класса
-
Чтобы использовать элемент body для нацеливания на переключатель данных:
-
Чтобы использовать контейнер как тело и сфокусироваться на секции:
Это то, что я получаю в своем веб-проекте:
Не поймите меня неправильно, я действительно не понимаю, почему этого не происходит, ведь все в порядке. Любые идеи будут оценены, я новичок, и я знаю, что вы, ребята, можете мне в этом помочь.
РЕДАКТИРОВАТЬ
Я проверил консоль и получил сообщение об ошибке .всплывающая подсказка не является функцией :
Всплывающие подсказки · Bootstrap
Документация и примеры для добавления пользовательских всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранилища заголовков.
Обзор
Что нужно знать при использовании плагина всплывающей подсказки:
- Всплывающие подсказки полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед загрузкой.js или используйте
bootstrap.bundle.min.js
/bootstrap.bundle.js
, который содержит Popper.js, чтобы всплывающие подсказки работали! - Если вы создаете наш JavaScript из исходного кода, для него требуется
util.js
. - Всплывающие подсказки включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
- Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
- Укажите контейнер
: 'body'
, чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т. Д.). - Всплывающие подсказки для скрытых элементов не работают.
- Всплывающие подсказки для
.disabled
илиdisabled
элементов должны запускаться для элемента оболочки. - При запуске из гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы. Используйте пробел
: nowrap;
на ваших - Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.
Поняли? Отлично, давайте посмотрим, как они работают, на некоторых примерах.
Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по их атрибуту data-toggle
:
$ (function () {
$ ('[data-toggle = "tooltip"]'). tooltip ()
})
Примеры
Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:
Наведите указатель мыши на кнопки ниже, чтобы увидеть четыре направления подсказок: вверх, вправо, внизу и влево.
И с добавлением собственного HTML:
Использование
Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента.
Запуск всплывающей подсказки через JavaScript:
$ ('# example'). Tooltip (параметры)
Переполнение
авто
и прокрутка
Позиция всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: auto
или overflow: прокрутите
, как наш .table-responsive
, но по-прежнему сохраняет исходное расположение размещения. Чтобы решить эту проблему, установите для параметра border
любое значение, отличное от значения по умолчанию, 'scrollParent'
, например 'window'
:
$ ('# пример').всплывающая подсказка ({граница: 'окно'})
Разметка
Требуемая разметка для всплывающей подсказки — это только атрибутов данных
и заголовка
в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top
).
Обеспечение работы всплывающих подсказок для пользователей клавиатуры и вспомогательных технологий
Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы).Хотя произвольные элементы HTML (например,
s) можно сделать доступными для фокусировки, добавив атрибут tabindex = "0"
, это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство вспомогательных технологий в настоящее время не выводят всплывающую подсказку в этой ситуации.
Кроме того, не полагайтесь исключительно на hover
в качестве триггера для всплывающей подсказки, так как это сделает невозможным запуск всплывающих подсказок для пользователей клавиатуры.
Наведите указатель мыши на меня
Текст всплывающей подсказки!
Отключенные элементы
Элементы с отключенным атрибутом Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к Добавляет всплывающую подсказку к определенному элементу.Пример: Задержка показа и скрытия всплывающей подсказки (мс) — не относится к ручному типу запуска Если указан номер, задержка применяется к скрытию / отображению Структура объекта: Разрешить HTML во всплывающей подсказке. Если true, теги HTML в заголовке Используйте текст, если вас беспокоят XSS-атаки. Как разместить всплывающую подсказку — авто | наверх | внизу | слева | верно. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM инициирующего элемента в качестве второго. Базовый HTML-код для использования при создании всплывающей подсказки. Заголовок Самый внешний элемент оболочки должен иметь Значение заголовка по умолчанию, если атрибут Если функция задана, она будет вызываться со своей ссылкой Как запускается всплывающая подсказка — щелкните | зависать | фокус | руководство.Вы можете передать несколько триггеров; разделите их пробелом. Опции для отдельных всплывающих подсказок можно также указать с помощью атрибутов данных, как описано выше. Все методы API являются асинхронными и запускают переход .Они возвращаются к вызывающей стороне, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован . См. Нашу документацию по JavaScript для получения дополнительной информации. Присоединяет обработчик всплывающей подсказки к коллекции элементов. Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка будет отображена на самом деле (т.е.е. до того, как произойдет событие Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (т.е. до того, как произойдет событие Скрывает и уничтожает всплывающую подсказку элемента.Всплывающие подсказки, использующие делегирование (которые создаются с использованием опции селектора Позволяет отображать всплывающую подсказку элемента. Подсказки включены по умолчанию. Удаляет возможность отображения всплывающей подсказки элемента.Всплывающая подсказка будет отображаться только в том случае, если она будет повторно включена. Переключает возможность отображения или скрытия всплывающей подсказки элемента. Обновляет положение всплывающей подсказки элемента.
Добавляет всплывающую подсказку к определенному элементу.Пример:
Добавляйте классы в всплывающую подсказку, когда она отображается.Обратите внимание, что эти классы будут добавлены в
дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите
их с пробелами:
Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные
имена классов.
Задержка показа и скрытия всплывающей подсказки (мс) - не относится к ручному типу запуска Если указан номер, задержка применяется к скрытию / отображению Структура объекта: Разрешить HTML во всплывающей подсказке.
Если true, HTML-теги в заголовке Используйте текст, если вас беспокоят XSS-атаки.
Как разместить всплывающую подсказку - авто | наверх | внизу | слева | верно.
Когда функция используется для определения размещения, она вызывается с помощью DOM всплывающей подсказки.
node в качестве первого аргумента, а DOM-узел триггерного элемента - в качестве второго. В
Базовый HTML-код для использования при создании всплывающей подсказки.
Заголовок
Самый внешний элемент оболочки должен иметь
Значение заголовка по умолчанию, если атрибут
Если задана функция, она будет вызываться со своим
Как запускается всплывающая подсказка - щелкните | зависать | фокус | руководство. Вы можете пройти несколько
триггеры; разделите их пробелом.
Смещение всплывающей подсказки относительно цели.
Когда функция используется для определения смещения, она вызывается с объектом
содержащий данные смещения в качестве первого аргумента. Функция должна возвращать объект
с такой же структурой.Узел DOM запускающего элемента передается как второй
аргумент.
Для получения дополнительной информации обратитесь к Поппера
офсетные документы.
Иногда, особенно на рабочем столе, полезно иметь уточненную выноску вместе с некоторыми подсказками, появляющимися, когда посетитель наводит указатель мыши на элемент.Таким образом, мы уверены, что наиболее подходящая информация, безусловно, была предоставлена в нужное время и, мы надеемся, повысила удобство и комфорт посетителей сайта при использовании наших веб-страниц. Об этой деятельности заботится элемент всплывающей подсказки, который, в свою очередь, имеет отличный и регулярный внешний вид для всего дизайна фреймворка в новейшей версии Bootstrap 4, и, безусловно, их очень легко включить и настроить - почему бы нам не увидеть, как это получается выполнила . Подробности, которые нужно изучить при использовании класса всплывающей подсказки Bootstrap: - Всплывающие подсказки Bootstrap используют для настройки стороннюю библиотеку Tether.Вам необходимо предоставить tether.min.js перед bootstrap.js, чтобы всплывающие подсказки работали! - Всплывающие подсказки действительно зависят от факторов производительности, поэтому вы должны инициализировать их самостоятельно. - Всплывающая подсказка Bootstrap с заголовками нулевой длины никогда не отображается. - Укажите контейнер элемента (например, группы ввода, группы кнопок и т. Д.). - Активация всплывающих подсказок для скрытых компонентов определенно не работает. - всплывающие подсказки для - При срабатывании ссылки на веб-странице, занимающей множество строк, всплывающие подсказки будут сосредоточены. Примените Понятно? Отлично, почему бы нам не посмотреть, как они работают, на нескольких примерах. Прежде всего, чтобы использовать производительность всплывающих подсказок, мы действительно должны разрешить это, потому что в Bootstrap эти элементы не включены по умолчанию и требуют инициализации.Чтобы выполнить это, включите практическую функцию Как интерфейсный разработчик, я видел множество UI-библиотек для всплывающих подсказок и всплывающих окон, но я никогда не чувствовал себя удовлетворенным ни одной из них.Может быть сложно заставить всплывающие подсказки соответствовать адаптивному дизайну с таким маленьким пространством на небольших окнах просмотра. Библиотеки, которые я пробовал до сих пор, либо не справляются с обработкой крайних случаев, либо требуют тяжелой работы в JavaScript для динамического позиционирования вспомогательного элемента. Вместо этого я решил создать веб-компонент с нуля, чтобы удовлетворить свои потребности простым подходом. Если вы просто хотите увидеть демонстрацию и код, сразу переходите к CodePen. 💅 Я использовал веб-компоненты, чтобы упростить повторное использование шаблона пользовательского интерфейса и извлечь выгоду из предлагаемых ими обратных вызовов жизненного цикла.Позже в этом посте я продемонстрирую другие преимущества этого выбора. Структура HTML очень проста, всплывающая подсказка включает в себя 2 элемента контейнера для метки и раскрывающегося списка. Это позволит им обоим содержать богатый контент, а не просто текст. Моя первоначальная идея - максимально использовать преимущества CSS. Мы можем легко создать всплывающую подсказку для экранов рабочего стола, используя псевдокласс Обработка событий CSS CSS, необходимый для этого подхода, минимален. Идея состоит в том, чтобы установить контейнер с Чтобы открыть всплывающую подсказку, мы используем класс с модификатором (после БЭМ) С точки зрения JavaScript, использование веб-компонентов позволяет нам использовать синтаксис класса из ES6, который улучшает читаемость кода. Мы можем использовать Вдобавок ко всему, чтобы убедиться, что всплывающие подсказки закрываются, когда пользователь нажимает где-нибудь на экране после его открытия, мы используем прослушиватель событий в документе Основная проблема всплывающих подсказок в мире адаптивного дизайна заключается в том, что мы никогда не можем предсказать, где будет размещена метка. В идеале всплывающая подсказка может запускаться из любого элемента, включая слово в абзаце, который является плавным элементом в зависимости от размера его контейнера. Обычно это плохо заканчивается тем, что всплывающие подсказки исчезают с экрана и обрезается контент, что вызывает разочарование у пользователей. Существуют умные решения для управления динамическим позиционированием, чтобы элементы всегда оставались видимыми на экранах, например Popper.js. Однако ~ 6 КБ уменьшенного и сжатого с помощью сжатия кода JavaScript - это довольно много, чтобы просто разместить небольшой блок текста на экране. Учитывая стоимость использования МБ JS для пользователей в наши дни, я бы предпочел более легкий подход. Чтобы найти простое решение, я сократил все, что мне было нужно, до самого простого варианта. Если раскрывающийся список выходит из нижней части метки, а не из любого положения (слева, справа, вверху слева и т. Д.), Это означает, что раскрывающийся список может переполняться только с горизонтальных сторон. Чтобы предотвратить переполнение, мне нужно только проверить открытое событие, чтобы позиция элемента не превышала левый и правый пределы экрана.В этой ситуации простой перевод элемента с помощью CSS В ситуации, когда метка размещается в левом или правом конце экрана, раскрывающееся меню всплывающей подсказки будет зафиксировано сбоку от сетки веб-сайта. Единственная оставшаяся ситуация, когда всплывающая подсказка может выйти за пределы экрана, - это если элемент находится внизу страницы, когда пользователь нажимает на него. Пользователи по-прежнему могут настраивать его, прокручивая страницу вниз, чтобы можно было просматривать содержимое.Я не ожидаю, что эта ситуация будет достаточно проблематичной, чтобы ввести больше кода JS для ее программного решения. Веб-компоненты были отличным кандидатом для создания всплывающих подсказок из-за простоты их использования как части систем проектирования. Возможность использовать шаблон пользовательского интерфейса просто путем добавления настраиваемого HTML-элемента на страницу и не беспокоиться о вызове любого JS-кода вручную - это довольно удобно. Более сильным аргументом в пользу веб-компонентов было то, как они взаимодействуют с виртуальной DOM. В carwow мы используем Elm, когда нам нужно управление состоянием в частях веб-сайта с высокой интерактивностью на стороне клиента.Обратной стороной встроенного приложения, использующего виртуальную модель DOM на веб-странице, является то, что у него нет прямого доступа к объекту К счастью, мы нашли альтернативное решение с использованием пользовательских элементов внутри Elm, которое позволяет ассоциированному JS работать так, как ожидалось. Для получения дополнительной информации о возможностях, которые он предлагает, я бы порекомендовал этот доклад Люка Вестби на Elm Europe 2018. Посмотрите на CodePen ниже или на компонент нашей прекрасной дизайн-системы. Если у вас есть какие-либо вопросы или мысли по поводу нашего подхода, мы будем рады их услышать! могут быть включены индивидуально (с использованием отдельных файлов Bootstrap Оба файла Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина). Проконсультируйтесь с нашим Вы можете использовать все плагины Bootstrap только через API разметки, не написав ни одной строчки JavaScript. Это первоклассный API Bootstrap, и вы должны в первую очередь учитывать его при использовании плагина. Тем не менее, в некоторых ситуациях может потребоваться отключить эту функцию. Поэтому мы также предоставляем возможность отключить API атрибутов данных, отключив все события в документе с пространством имен В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api, например: Не используйте атрибуты данных из нескольких плагинов в одном элементе. Например, кнопка не может одновременно иметь всплывающую подсказку и переключать модальное окно.Для этого используйте оборачивающий элемент. Мы также считаем, что вы сможете использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую были выполнены действия. Все методы должны принимать необязательный объект параметров, строку, нацеленную на конкретный метод, или ничего (что запускает плагин с поведением по умолчанию): Каждый плагин также предоставляет свой необработанный конструктор в свойстве Вы можете изменить настройки по умолчанию для плагина, изменив его конструктор Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен.Если это произойдет, вы можете позвонить по номеру Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени - где инфинитив (напр. Начиная с 3.0.0, все события Bootstrap имеют пространство имен. Все инфинитивные события обеспечивают функциональность Доступ к версии каждого из подключаемых модулей jQuery Bootstrap можно получить через свойство Bootstrap не особо изящно отключаются, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на Для простых эффектов перехода включите Transition.js - это базовый помощник для событий Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен появиться после загрузки Модальные окна - это упрощенные, но гибкие диалоговые окна с минимально необходимой функциональностью и интеллектуальными настройками по умолчанию. Не открывайте модальное окно, пока другое все еще видно. Для одновременного отображения нескольких модальных окон требуется специальный код. Всегда старайтесь размещать HTML-код модального окна на верхнем уровне в вашем документе, чтобы другие компоненты не влияли на внешний вид и / или функциональность модального окна. Из-за того, как HTML5 определяет свою семантику, атрибут Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле. Одно прекрасное тело & hellip; Переключите модальное окно с помощью JavaScript, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы. Duis mollis, est nonmodo luctus, nisi erat porttitor ligula. Эта кнопка должна вызывать всплывающее окно при нажатии. Эта ссылка и эта ссылка должны иметь всплывающие подсказки при наведении курсора. Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros. Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Запустить демонстрационный модальный режим
Не забудьте добавить Кроме того, вы можете дать описание вашего модального диалога с помощью Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д. См. Этот полезный пост о переполнении стека для получения дополнительной информации. имеют два дополнительных размера, доступных через классы модификаторов, которые можно разместить на
Большой модальный
Малый модальный
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-2 .col-md-offset-4 .col-md-6 .col-md-offset-3
Уровень 2: .col-XS-8 .col-sm-6
Уровень 2: .col-xs-4 .col-sm-6
Запустить демонстрационный модальный режим
У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержанием? Используйте атрибуты Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет Активировать модальное окно без написания JavaScript.Установите Вызов модального окна с идентификатором Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к Эта опция устарела, начиная с версии v3.3.0 и был удален в v4. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или структуру привязки данных или вызывать jQuery.load самостоятельно. Если предоставлен удаленный URL-адрес, содержимое будет загружено один раз с помощью метода jQuery Активирует ваш контент как модальный. Принимает необязательные параметры Переключает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т.е. перед событием Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т.е. до того, как произойдет событие Вручную скрывает модальное окно. Возврат к вызывающей стороне до фактического скрытия модального окна (т.е. до того, как произойдет событие Изменяет положение модального окна для противодействия полосе прокрутки в случае, если она должна появиться, что приведет к переходу модального окна влево. Требуется только при изменении высоты модального окна, когда оно открыто. Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (то есть в Добавляйте раскрывающиеся меню практически ко всему с помощью этого простого плагина, включая панель навигации, вкладки и таблетки. С помощью атрибутов данных или JavaScript подключаемый модуль раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения класса На мобильных устройствах открытие раскрывающегося списка добавляет Примечание. Атрибут Добавьте Чтобы URL-адреса оставались неизменными с помощью кнопок ссылок, используйте атрибут Вызов раскрывающихся списков с помощью JavaScript: Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, Нет Переключает раскрывающееся меню данной панели навигации или навигации с вкладками. Все события dropdown запускаются в родительском элементе Все раскрывающиеся события имеют свойство Плагин ScrollSpy предназначен для автоматического обновления навигационных целей в зависимости от положения прокрутки. Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Подпункты раскрывающегося списка также будут выделены. Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui.Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона. Нихил татуированный акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват. Veniam marfa, скейтборд с усами, жирная борода с вилами. Freegan борода aliqua cupidatat mcsweeney's vero.Cupidatat four loko nisi, ea helvetica nulla carles. Татуированный свитер с косби, фургон с едой, винил mcsweeney's quis non freegan. Lo-fi wes anderson +1 портной. Карлес неэстетическое упражнение quis jentrify. Brooklyn adipisicing Craft Beer Vice Keytar deserunt. Occaecat Commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore, кофе одного происхождения в magna veniam. Виниловая пластинка High Life, Echo Park Concequat Quis Aliquip Banh Mi Willy.Vero VHS очень популярный. Сумка-мессенджер Consectetur nisi «сделай сам». Cred ex in, прочная сумка на пояс delectus Conctetur для iphone. В парке Incididunt Echo, видный мастер службы deserunt mcsweeney очищает thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel Laborum craft beer. Кофе-путники одного происхождения irure four loko, cupidatat terry richardson master cleanse. Предположим, вы, вероятно, не слышали о них: поясная сумка для арт-вечеринки, временная реклама татуированного кардигана nulla.Proident wolf nesciunt sartorial keffiyeh eu banh mi устойчивый. Элитный волк сладострастный, lo-fi ea portland, прежде чем они продали четыре локо. Locavore enim nostrud mlkshk brooklyn nesciunt. Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui. Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона.Нихил татуированный акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват. Keytar twee blog, сумка-мессенджер culpa marfa something delectus food truck. Sapiente synth id предположительно. Locavore sed helvetica клише ирония, громовые кошки, о которых вы, вероятно, не слышали, консервируют толстовку с капюшоном lo-fi fap aliquip без глютена. Элитное место работы перед распродажей, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Кардиган крафтовый пивной сейтан готовый велит.VHS chambray labouris tempor veniam. Anim mollit Minimum Commodo Ullamco Thundercats.
Независимо от метода реализации, scrollspy требует использования Чтобы легко добавить поведение прокрутки к вашей навигации на верхней панели, добавьте После добавления При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM вам необходимо вызвать метод обновления следующим образом: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к Добавьте быстрые динамические вкладки для перехода между панелями локального контента, даже через раскрывающиеся меню. Вложенные вкладки не поддерживаются. Необработанный деним Вы наверняка не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очистки ретро-синтезатора. Усы cliche tempor, williamsburg carles vegan helvetica. Репрезендерит мясник ретро кефиех ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure terry richardson ex squid. Аликвип плац для шалфея cillum iphone. Кардиган Seitan aliquip quis американская одежда, мясник сладострастный nisi qui. Food truck fixie locavore, кофейный кальмар одного происхождения accusamus mcsweeney's marfa nulla. Exercitation +1 labore velit, блог портняжные леггинсы PBR следующего уровня wes anderson artisan four loko от фермы до стола крафтовый пивной тви. Qui photo booth высокой печати, коммодо enim craft пиво млкшк аликвип джинсовые шорты ullamco ad винил cillum PBR. Homo nostrud organic, предположительно, работает эстетическая magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.Vegan fanny pack odio cillum wes anderson 8-битные экологически чистые джинсовые шорты с бородами, этическая вина Терри Ричардсон, биодизель, сделанная своими руками. Art party sceneter stumptown, tumblr butcher vero sint qui sapiente accusamus татуированный эхо-парк. Etsy mixtape wayfarers, этичный тофу уэса андерсона до того, как они распродали органический ломо-ретро фанни-пакет от mcsweeney в готовом виде. Сумка-мессенджер с татуировкой в виде вилок для крафтового пива, iphone skateboard locavore carles etsy salvia banksy с капюшоном helvetica.DIY synth PBR Банки ирония. Поножи джентрификации кальмара 8-битный кредит вилами. Williamsburg banh mi без глютена, карлес вилы биодизель fixie etsy retro mlkshk Vice blog. Вы, наверное, никогда о них не слышали, блог о крафтовом пиве, виниловом пиве, stumptown. Вилы из экологически чистого тофу, синтезатор, шамбре г. трастовый фонд seitan высокой печати, keytar raw denim keffiyeh etsy art party перед распродажей свитера master cleanse без глютена с кальмарами.Fanny pack portland seitan DIY, арт-вечеринка locavore волк клише светская жизнь эхо-парк в Остине. Кред винил keffiyeh DIY salvia PBR, banh mi до того, как они распродали свитер VHS с вирусным locavore cosby. Lomo wolf viral, готовые усы thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan. Включить вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно): Активировать отдельные вкладки можно несколькими способами: Вы можете активировать навигацию по вкладкам или таблеткам без написания кода JavaScript, просто указав Чтобы вкладки постепенно появлялись, добавьте
Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо Выбирает данную вкладку и показывает связанное с ней содержимое. Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанное с ней содержимое скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (т.е. до того, как произойдет событие При отображении новой вкладки события запускаются в следующем порядке: Если ни одна вкладка еще не была активной, то события На основе отличного jQuery.пьяный плагин, написанный Jason Frame; Всплывающие подсказки - это обновленная версия, которая не полагается на изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются. Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки: Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента. Запуск всплывающей подсказки через JavaScript: Требуемая разметка для всплывающей подсказки - это только Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к Добавляет всплывающую подсказку к определенному элементу.Пример: Задержка показа и скрытия всплывающей подсказки (мс) - не относится к ручному типу запуска Если указан номер, задержка применяется к скрытию / отображению Структура объекта: Как разместить всплывающую подсказку - вверху | внизу | слева | право | авто. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM инициирующего элемента в качестве второго. Базовый HTML-код для использования при создании всплывающей подсказки. Заголовок Самый внешний элемент оболочки должен иметь класс Значение заголовка по умолчанию, если атрибут Если функция задана, она будет вызываться со своей ссылкой Сохраняет всплывающую подсказку в пределах этого элемента.Пример: Если функция задана, она вызывается с запускающим элементом DOM-узлом в качестве единственного аргумента. Присоединяет обработчик всплывающей подсказки к коллекции элементов. Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка будет фактически показана (то есть до того, как произойдет событие Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е.е. до того, как произойдет событие Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (т.е. до того, как произойдет событие Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с использованием опции селектора Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации. всплывающих окон, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются. По соображениям производительности API данных всплывающей подсказки и всплывающего окна являются необязательными, то есть вы должны инициализировать их самостоятельно. . Один из способов инициализировать все всплывающие окна на странице - выбрать их с помощью атрибута При использовании всплывающих окон на элементах в пределах Вызов Чтобы добавить всплывающее окно к элементу Иногда вы хотите добавить всплывающее окно к гиперссылке, которая переносит несколько строк.По умолчанию плагин popover центрирует его по горизонтали и вертикали. Добавьте Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Sed posuere consctetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consctetur est at lobortis.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consctetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consctetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Нажмите, чтобы переключить всплывающее окно
Всплывающее окно справа
Поповер сверху
Поповер внизу
Поповер слева
Используйте триггер Для правильного кроссбраузерного и кроссплатформенного поведения необходимо использовать тег Включить всплывающие окна через JavaScript: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к Добавляет всплывающее окно к определенному элементу.Пример: Значение содержимого по умолчанию, если атрибут Если задана функция, она будет вызываться со своей ссылкой Задержка показа и скрытия всплывающего окна (мс) - не относится к ручному типу запуска Если указан номер, задержка применяется к скрытию / отображению Структура объекта: Как разместить всплывающее окно - вверху | внизу | слева | право | авто. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающего окна в качестве первого аргумента и узла DOM элемента запуска в качестве второго. Базовый HTML-код для использования при создании всплывающего окна. Заголовок Содержимое Самый внешний элемент оболочки должен иметь класс Значение заголовка по умолчанию, если атрибут Если задана функция, она будет вызываться со своей ссылкой Сохраняет всплывающее окно в пределах этого элемента.Пример: Если функция задана, она вызывается с запускающим элементом DOM-узлом в качестве единственного аргумента. Опции для отдельных всплывающих окон можно также указать с помощью атрибутов данных, как описано выше. Инициализирует всплывающие окна для коллекции элементов. Показывает всплывающее окно элемента. Возврат к вызывающей стороне до фактического отображения всплывающего окна (т.е. до того, как произойдет событие Скрывает всплывающее окно элемента. Возврат к вызывающей стороне до фактического скрытия всплывающего окна (т.е. до того, как произойдет событие Переключает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было фактически показано или скрыто (т.е. до того, как произойдет событие Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (которые создаются с использованием опции селектора С помощью этого подключаемого модуля добавляйте функцию закрытия ко всем предупреждающим сообщениям. При использовании кнопки
×
Святой гуакамоле! Лучше проверь себя, ты не слишком хорошо выглядишь. Измените то и то и попробуйте еще раз. Duis mollis, est nonmodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis conctetur purus sit amet fermentum.
Выполните это действие
Или сделай это
Просто добавьте Чтобы ваши оповещения использовали анимацию при закрытии, убедитесь, что к ним уже применены классы Заставляет оповещение прослушивать события щелчка на дочерних элементах, которые имеют атрибут Закрывает предупреждение, удаляя его из модели DOM. Если в элементе присутствуют классы Bootstrap предоставляет несколько событий для подключения к функциям предупреждений. Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов. Добавьте Эта функция устарела, начиная с версии 3.3.6, и была удалена в версии 4.
Состояние загрузки
Добавьте Для кнопок с предварительным переключением необходимо самостоятельно добавить класс
Одиночный переключатель
Добавьте Для предварительно выбранных опций необходимо самостоятельно добавить класс Если отмеченное состояние кнопки флажка обновляется без запуска события Переключает состояние push. Придает кнопке вид, что она была активирована. Сбрасывает состояние кнопки - заменяет текст исходным текстом. Этот метод является асинхронным и возвращается до фактического завершения сброса. Меняет текст на любое текстовое состояние, определенное данными. Гибкий плагин, который использует несколько классов для простого переключения. Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap. Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса: Можно использовать ссылку с атрибутом
Ссылка на href
Кнопка с целью данных
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Расширить поведение сворачивания по умолчанию, чтобы создать гармошку с компонентом панели.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
Также можно заменить Не забудьте добавить Кроме того, если ваш элемент управления нацелен на один складной элемент, т. Е.Атрибут Плагин коллапса использует несколько классов для работы с тяжелой работой: Эти классы можно найти в Просто добавьте Чтобы добавить управление группами в виде гармошки к складному элементу управления, добавьте атрибут данных Включить вручную с помощью: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан. (т.е.е. перед событием Скрывает складной элемент. Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента (т.е. до того, как произойдет событие Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса. Компонент слайд-шоу для циклического просмотра элементов, например карусели. Вложенные карусели не поддерживаются. Компонент карусели обычно не соответствует стандартам доступности.Если вам нужно соответствовать требованиям, рассмотрите другие варианты представления вашего контента. Bootstrap использует исключительно CSS3 для своей анимации, но Internet Explorer 8 и 9 не поддерживает необходимые свойства CSS. Таким образом, при использовании этих браузеров анимация перехода между слайдами отсутствует. Мы намеренно решили не включать резервные варианты на основе jQuery для переходов. Модель Классы Легко добавляйте подписи к слайдам с помощью Nulla vitae elit libero, pharetra augue mollis interdum. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Praesentmodo cursus magna, vel scelerisque nisl consctetur. ... Карусели требуют использования Используйте атрибуты данных, чтобы легко управлять положением карусели. Атрибут Вызов карусели вручную с помощью: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к Инициализирует карусель с дополнительным объектом options Перебирает элементы карусели слева направо. Запрещает карусели циклически перемещаться по элементам. Циклический переход карусели к определенному кадру (на основе 0, аналогично массиву). Переход к предыдущему элементу. Переход к следующему элементу. Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства: Все события карусели запускаются в самой карусели (то есть в Плагин аффикса переключает положение Используйте подключаемый модуль аффиксов через атрибуты данных или вручную с помощью собственного JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования и ширины вашего прикрепленного контента. Примечание. Не используйте подключаемый модуль аффикса к элементу, содержащемуся в относительно позиционированном элементе, таком как вытягиваемый или выталкиваемый столбец, из-за ошибки рендеринга Safari. Плагин affix переключает между тремя классами, каждый из которых представляет определенное состояние: Вот как работает плагин affix: Выполните указанные выше действия, чтобы настроить CSS для любого из вариантов использования, указанных ниже. Чтобы легко добавить поведение аффикса к любому элементу, просто добавьте Вызов плагина affix через JavaScript: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к Активирует ваш контент как прикрепленный контент. Принимает необязательные параметры Пересчитывает состояние аффикса на основе размеров, положения и положения прокрутки соответствующих элементов. Bootstrap предоставляет несколько событий для подключения к функциям аффиксов.
не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно).В качестве обходного пути вы захотите вызвать всплывающую подсказку из оболочки
, в идеале сделанной с фокусировкой на клавиатуре, используя tabindex = "0"
, и переопределить события указателя
на отключенный элемент.
Опции
data-
, как в data-animation = ""
.
Имя
Тип
По умолчанию
Описание
анимация
логический
правда
Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер
строка | элемент | ложь
ложный
контейнер: 'body'
. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна. задержка
Номер | объект
0
задержка: {"показать": 500, "скрыть": 100}
HTML
логический
ложный
всплывающей подсказки
будут отображаться во всплывающей подсказке. Если false, метод jQuery text
будет использоваться для вставки содержимого в DOM. размещение
строка | функция
‘верх’
Если указано auto
, всплывающая подсказка будет динамически переориентирована. контекст
установлен для экземпляра всплывающей подсказки. селектор
строка | ложь
ложный
Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-содержимого.См. Этот и информативный пример.
шаблон
строка
'
всплывающей подсказки
будет вставлен в .tooltip-inner
. .arrow
станет стрелкой всплывающей подсказки. .tooltip
class и role = "tooltip"
. название
строка | элемент | функция
‘
заголовок
отсутствует. this
, установленной на элемент, к которому прикреплена всплывающая подсказка. триггер
строка
‘hover focus’
'manual'
указывает, что всплывающая подсказка будет запускаться программно с помощью методов .tooltip ('show')
, .tooltip ('hide')
и .tooltip ('toggle')
; это значение нельзя комбинировать с каким-либо другим триггером. 'hover'
сам по себе приведет к появлению всплывающих подсказок, которые не могут быть запущены с клавиатуры, и их следует использовать только при наличии альтернативных методов передачи той же информации для пользователей клавиатуры. смещение
Номер | строка
0
Смещение всплывающей подсказки относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение
строка | массив
‘переворот’
Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поведение Popper.js docs
граница
строка | элемент
‘scrollParent’
Граница ограничения переполнения всплывающей подсказки.Принимает значения
'viewport'
, 'window'
, 'scrollParent'
или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow. Атрибуты данных для отдельных всплывающих подсказок
Методы
Асинхронные методы и переходы
$ (). Подсказка (опции)
.tooltip ('показать')
shown.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
$ ('# element'). Tooltip ('show')
.tooltip ('hide')
hidden.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки.
$ ('# element'). Tooltip ('hide')
.tooltip ('toggle')
shown.bs.tooltip
или hidden.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки.
$ ('# element'). Tooltip ('toggle')
.tooltip ('dispose')
), не могут быть уничтожены индивидуально для дочерних триггерных элементов.
$ ('# element'). Tooltip ('dispose')
.tooltip ('enable')
$ ('# element'). Tooltip ('enable')
.tooltip ('disable')
$ ('# element'). Tooltip ('disable')
.tooltip ('toggleEnabled')
$ ('# element'). Tooltip ('toggleEnabled')
.tooltip ('update')
$ ('# element'). Tooltip ('update')
События
Тип события
Описание
показать.bs.tooltip
Это событие запускается немедленно при вызове метода экземпляра
Показан show
. .bs.tooltip
Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip
Это событие запускается сразу после вызова метода экземпляра
hide
. hidden.bs.всплывающая подсказка
Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник
Это событие запускается после события
show.bs.tooltip
, когда шаблон всплывающей подсказки был добавлен в DOM.
$ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
// сделай что-нибудь…
})
Всплывающие подсказки для начальной загрузки - примеры и руководство
анимация
логический
правда
Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер
строка | элемент | ложь
ложный
контейнер: 'body'
. Эта опция особенно полезна тем, что позволяет
вы разместите всплывающую подсказку в потоке документа рядом с элементом запуска
- что предотвратит отрыв всплывающей подсказки от триггерного элемента
во время изменения размера окна.
customClass
строка | функция
'
'класс-1 класс-2'
.
Номер задержка
| объект
0
задержка: {"показать": 500, "скрыть": 100}
HTML
логический
ложный
всплывающей подсказки
будут отображаться в
всплывающая подсказка. Если false, innerText
свойство будет использоваться для вставки содержимого в
ДОМ.
размещение
строка | функция
'верх'
Когда
auto
, он будет динамически переориентировать всплывающую подсказку.
этот контекст
установлен для экземпляра всплывающей подсказки.
селектор
строка | ложь
ложный
Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям.На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM.
(
jQuery. При поддержке
). Видеть
это
и
информативный пример.
шаблон
строка
'
всплывающей подсказки
будет вставлен в
.tooltip-внутренний
.
.tooltip-arrow
станет стрелкой всплывающей подсказки. .tooltip
class и role = "tooltip"
.
титул
строка | элемент | функция
'
заголовок
отсутствует. - это ссылка
, установленная для элемента, к которому прикреплена всплывающая подсказка.
триггер
строка
'hover focus'
'manual'
указывает, что всплывающая подсказка будет запускаться программно
через .tooltip ('show')
, .tooltip ('hide')
и
.tooltip ('toggle')
методов; это значение нельзя комбинировать с другими
спусковой крючок.
'hover'
сам по себе приведет к всплывающим подсказкам, которые нельзя вызвать с помощью
клавиатуре, и следует использовать только в том случае, если альтернативные методы передачи того же
информация для пользователей клавиатуры присутствует.
Номер смещение
| строка | функция
0
резервное размещение
строка | массив
"переворот"
Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поппера
документы о поведении
граница
строка | элемент
'scrollParent'
Граница ограничения переполнения всплывающей подсказки.Принимает значения
'viewport'
, 'window'
, 'scrollParent'
или
Справка по HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к Поппера
preventOverflow docs.
продезинфицировать
логический
правда
Включите или отключите дезинфекцию. Если активировано
"шаблон"
и "заголовок"
параметры будут очищены.
белый список
объект
Значение по умолчанию
Объект, содержащий разрешенные атрибуты и теги
sanitizeFn
null | функция
null
Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать
специальная библиотека для выполнения дезинфекции.
popperConfig
null | объект
null
Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, см.
Конфигурация Поппера
Размещение всплывающей подсказки начальной загрузки
Введение
: 'body'
, чтобы избежать сложностей рендеринга в сверхсложном .disabled
или disabled
компонентов необходимо активировать в элементе оболочки. white-space: nowrap
; на ваших
-s, чтобы держаться подальше от этой деятельности. Способы применения всплывающих подсказок Bootstrap:
<
HTML
>
<
title
> Отключенная подсказка кнопки
title
>
<
стиль
>
.подсказка1 {
позиция: относительная! Важная;
дисплей: встроенный блок! Important;
ширина: 175 пикселей! Important;
размер шрифта: 14 пикселей;
}
.tooltip1 .tooltiptext {
видимость: скрыта;
ширина: 120 пикселей! Important;
цвет фона: черный! Важно;
цвет: #fff! Important;
выравнивание текста: по центру! Важно;
border-radius: 6px! Important;
отступ: 5px 0! Important;
позиция: абсолютно! Важно;
z-index: 1! Important;
top: -5px! Important;
осталось: 110%! Важно;
}
.tooltip1 .tooltiptext :: после {
содержание: "";
позиция: абсолютно! Важно;
верх: 50%! Важно;
правильно: 100%! Важно;
margin-top: -5px! Important;
ширина границы: 5 пикселей! Важно;
стиль границы: сплошной! Важный;
цвет рамки: прозрачный черный прозрачный прозрачный! Важно;
}
.tooltip1: hover .tooltiptext {
видимость: видно! Важно;
}
стиль
>
<
body
style
=
"выравнивание текста: по центру;"
>
<
div
class
=
"контейнер pt-5"
>
<
h2
style
=
"цвет: зеленый;"
>
GeeksforGeeks
h2
>
<
h5
>
Подсказка триггера отключена
кнопки начальной загрузки с использованием CSS
h5
>
<
button
class
=
"btn btn-outline-info tooltip1"
отключено>
Наведите на меня
<
диапазон
класс
=
«tooltip1 tooltiptext»
>
отключенная кнопка
пролет
>
кнопка
>
дел
>
корпус
>
html
>
Создание простого компонента всплывающей подсказки, который никогда не выходит за пределы экрана | Винсент Наветат | carwow Продукт, дизайн и разработка
: hover
. Недостатком этого подхода является то, что нам нужно другое поведение на сенсорных экранах, где пользователи ожидают, что смогут закрыть всплывающую подсказку, нажав ярлык во второй раз или нажав в любом месте экрана. hover
на сенсорных экранах может быть сложной задачей, поскольку браузеры будут интерпретировать их по-разному. Чтобы упростить задачу, я решил использовать мультимедийную функцию CSS, чтобы только устройства, поддерживающие наведенные элементы, обрабатывали всплывающие подсказки при открытии / закрытии через CSS. Другие устройства вместо этого будут полагаться на JS и события касания. Если вам действительно нужна поддержка устаревших браузеров, таких как Internet Explorer, не пугайтесь отсутствия поддержки функции мультимедиа, вы можете использовать Browserhacks, чтобы специально настроить таргетинг на определенные браузеры, на которые полагается ваша аудитория. position: relative
, в то время как раскрывающийся список имеет position: absolute
, и мы можем использовать комбинацию left: 50%
и transform: translateX (-50%)
, чтобы иметь всплывающая подсказка в центре метки по горизонтали. всплывающая подсказка - откройте
. Это переключает свойство display
раскрывающегося списка на block
и запускает CSS-анимацию для быстрого эффекта плавного появления. connectedCallback
для настройки прослушивателей событий, когда пользовательский элемент подключен к DOM. Затем мы можем переключить всплывающую подсказку - открыть класс
для родительского элемента в событиях touchstart
.
, который удалит всплывающую подсказку - откройте класс
для любого элемента на странице, если только текущий элемент не находится внутри самой всплывающей подсказки. transform
сбросит позицию обратно на экран. Window
. В этом контексте может быть непросто сделать всплывающую подсказку, реагирующую на область просмотра браузера. В случае приложения Elm мы могли бы справиться с этим с помощью портов. JavaScript · Bootstrap 3.3.6 Документация
Индивидуальный или составной
Плагины * .js
) или все сразу (с использованием bootstrap.js
или уменьшенного bootstrap.min.js
). Использование скомпилированного JavaScript
bootstrap.js
и bootstrap.min.js
содержат все плагины в одном файле. Включите только один. Зависимости плагинов
bower.json
, чтобы узнать, какие версии jQuery поддерживаются. Атрибуты данных
data-api
.Это выглядит так:
$ (документ) .off ('. Data-api')
$ (документ) .off ('. Alert.data-api')
Только один плагин на элемент через атрибуты данных
Программный API
$ ('. Btn.danger'). Button ('toggle'). AddClass ('fat')
$ ('# myModal').modal () // инициализируется значениями по умолчанию
$ ('# myModal'). modal ({keyboard: false}) // инициализируется без клавиатуры
$ ('# myModal'). modal ('show') // инициализирует и немедленно вызывает show
Constructor
: $ .fn.popover.Constructor
. Если вы хотите получить конкретный экземпляр плагина, получите его прямо из элемента: $ ('[rel = "popover"]'). Data ('popover')
. Настройки по умолчанию
.DEFAULTS
объект:
$ .fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет значение по умолчанию для опции `keyboard` модального плагина на false
Нет конфликта
.noConflict
для плагина, значение которого вы хотите вернуть.
var bootstrapButton = $ .fn.button.noConflict () // вернуть $ .fn.button к ранее присвоенному значению
$ .fn.bootstrapBtn = bootstrapButton // дать $ (). bootstrapBtn функциональность Bootstrap
События
show
) запускается в начале события, а его форма прошедшего причастия (например, показано
) запускается при завершении действия. preventDefault
. Это дает возможность остановить выполнение действия до его запуска.
$ ('# myModal'). On ('show.bs.modal', function (e) {
if (! data) return e.preventDefault () // останавливает отображение модального окна
})
Номера версий
VERSION
конструктора подключаемого модуля.Например, для плагина всплывающей подсказки:
$ .fn.tooltip.Constructor.VERSION // => "3.3.6"
Нет специальных резервных вариантов при отключенном JavaScript
Плагины
, чтобы объяснить ситуацию (и как повторно включить JavaScript) вашим пользователям и / или добавить свои собственные резервные варианты. Сторонние библиотеки
.noConflict
и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно. О переходах
transition.js
один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минимизированный) bootstrap.js
, нет необходимости включать его - он уже есть. Что внутри
transitionEnd
, а также эмулятор перехода CSS.Он используется другими плагинами для проверки поддержки переходов CSS и для обнаружения зависших переходов. Отключение переходов
transition.js
(или bootstrap.js
или bootstrap.min.js
, в зависимости от обстоятельств):
$ .support.transition = false
Несколько открытых модальных окон не поддерживаются
Размещение модальной разметки
autofocus
HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:
$ ('# myModal'). On ('shown.bs.modal', function () {
$ ('# myInput'). фокус ()
})
Примеры
Статический пример
Модальный заголовок
Живая демонстрация
Текст в модальном окне
Поповер в модальном окне
Подсказки в модальном окне
Переполняющий текст для отображения поведения прокрутки
Модальный заголовок
Сделать модальные окна доступными
role = "dialog"
и aria-labelledby = "..."
со ссылкой на модальный заголовок в .modal
и role = "document"
в .сам модальный диалог
. aria, описанного
на .modal
. Встраивание видео с YouTube
Дополнительные размеры
Модалы .модальный диалог
.
Удалить анимацию
.fade
из модальной разметки.
Использование системы координат
.row
в .modal-body
, а затем использовать классы нормальной сетки.
Модальный заголовок
event.relatedTarget
и HTML data- *
(возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о relatedTarget
,
...больше кнопок ...
Новое сообщение
$ ('# exampleModal').on ('show.bs.modal', функция (событие) {
var button = $ (event.relatedTarget) // Кнопка, запускающая модальное окно
var recipient = button.data ('Any') // Извлекаем информацию из атрибутов data- *
// При необходимости вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
// Обновляем содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
var modal = $ (это)
modal.find ('. modal-title'). text ('Новое сообщение' + получателю)
модальный.find ('. ввод модального тела'). val (получатель)
})
Использование
.modal-open
к
, чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop
, чтобы предоставить область щелчка для отклонения отображаемых модальных окон при щелчке вне модального окна. Через атрибуты данных
data-toggle = "modal"
на элементе контроллера, например кнопке, вместе с data-target = "# foo"
или href = "# foo"
, чтобы выбрать конкретный модальный элемент для переключения.
Через JavaScript
myModal
с помощью одной строки JavaScript:
$ ('# myModal'). Модальный (параметры)
Опции
data-
, как в data-backdrop = ""
.
Имя
тип
по умолчанию
описание
фон
boolean или строка
'static'
правда
Включает элемент модального фона. В качестве альтернативы укажите
static
для фона, который не закрывает модальное окно при щелчке. клавиатура
логический
правда
Закрывает модальное окно при нажатии клавиши выхода
показать
логический
правда
Показывает модальное окно при инициализации.
удаленный
путь
ложный
load
и вставлено в div .modal-content
. Если вы используете data-api, вы также можете использовать атрибут href
для указания удаленного источника. Пример этого показан ниже:
Нажми меня
Методы
.modal (опции)
, объект
.
$ ('# myModal'). Modal ({
клавиатура: ложь
})
.modal ('переключение')
shown.bs.modal
или hidden.bs.modal
).
$ ('# myModal'). Modal ('toggle')
.modal ('показать')
shown.bs.modal
).
$ ('# myModal'). Модальный ('показать')
.modal ('скрыть')
hidden.bs.modal
).
$ ('# myModal'). Модальный ('скрыть')
.modal ('handleUpdate')
$ ('# myModal').модальный ('handleUpdate')
События
Модальный класс
Тип события
Описание
показать модальный
Это событие запускается немедленно при вызове метода экземпляра
show
.Если он вызван щелчком, выбранный элемент доступен как свойство relatedTarget
события. показан модальный
Это событие вызывается, когда модальное окно становится видимым для пользователя (будет ожидать завершения переходов CSS). Если это вызвано щелчком, выбранный элемент доступен как свойство
relatedTarget
события. hide.bs.modal
Это событие запускается сразу после вызова метода экземпляра
hide
. скрытый модальный
Это событие запускается, когда модальное окно перестало быть скрытым от пользователя (будет ожидать завершения переходов CSS).
загруженный модальный
Это событие вызывается, когда модальное окно загружает контент с помощью опции
remote
.
$ ('# myModal'). On ('hidden.bs.modal', function (e) {
// сделай что-нибудь...
})
Примеры
Внутри панели навигации
Внутри таблеток
Использование
.open
в родительском элементе списка. .dropdown-backdrop
в качестве области касания для закрытия раскрывающихся меню при нажатии вне меню, что является требованием для надлежащей поддержки iOS. Это означает, что переключение из открытого раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве. data-toggle = "dropdown"
используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его. Через атрибуты данных
data-toggle = "dropdown"
к ссылке или кнопке, чтобы переключить раскрывающийся список.
...
data-target
вместо href = "#"
.
Через JavaScript
$ ('.dropdown-toggle '). dropdown ()
data-toggle = "dropdown"
по-прежнему требуется
data-toggle = "dropdown"
всегда должен присутствовать в элементе триггера раскрывающегося списка. Опции
Методы
$ (). Раскрывающийся список ('переключение')
События
.dropdown-menu
. relatedTarget
, значение которого является переключаемым элементом привязки.
Тип события
Описание
показать.bs.dropdown
Это событие запускается немедленно при вызове метода экземпляра шоу.
Показан .bs.dropdown
Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.dropdown
Это событие запускается сразу после вызова метода экземпляра hide.
hidden.bs.dropdown
Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
$ ('# myDropdown'). On ('show.bs.dropdown', function () {
// сделай что-нибудь…
})
@ жир
@mdo
одна
два
три
Требуется относительное позиционирование
position: relative;
на элементе, за которым вы шпионите. В большинстве случаев это
. При прокрутке элементов, отличных от
, обязательно установите высоту ,
и overflow-y: scroll; Подано
. Через атрибуты данных
data-spy = "scroll"
к элементу, за которым вы хотите следить (чаще всего это
). Затем добавьте атрибут data-target
с идентификатором или классом родительского элемента любого компонента Bootstrap .nav
.
кузов {
положение: относительное;
}
...
...
Через JavaScript
позиция: относительная;
в вашем CSS, вызовите scrollspy через JavaScript:
$ ('тело'). Scrollspy ({target: '# navbar-example'})
Методы
.scrollspy ('обновить')
$ ('[data-spy = "scroll"]').each (function () {
var $ spy = $ (это) .scrollspy ('обновить')
})
Опции
data-
, как в data-offset = ""
.
Имя
тип
по умолчанию
описание
смещение
номер
10
Пикселей для смещения сверху при вычислении положения прокрутки.
События
Тип события
Описание
activate.bs.scrollspy
Это событие срабатывает всякий раз, когда scrollspy активирует новый элемент.
$ ('# myScrollspy'). On ('activate.bs.scrollspy', function () {
// сделай что-нибудь…
})
Примеры вкладок
Использование
$ ('# myTabs a').click (function (e) {
e.preventDefault ()
$ (это) .tab ('показать')
})
$ ('# myTabs a [href = "# profile"]'). Tab ('show') // Выбрать вкладку по имени
$ ('# myTabs a: first'). tab ('show') // Выбрать первую вкладку
$ ('# myTabs a: last'). tab ('show') // Выбрать последнюю вкладку
$ ('# myTabs li: eq (2) a'). tab ('show') // Выбрать третью вкладку (с индексом 0)
Разметка
data-toggle = "tab"
или data-toggle = "pill"
для элемента.Добавление классов nav
и nav-tabs
на вкладку ul
применит стиль вкладки Bootstrap, а добавление классов nav
и nav-pills
применит стиль таблетки.
Эффект затухания
.fade
к каждой .tab-pane
. Первая панель вкладок также должна иметь .in
, чтобы исходное содержимое было видимым.
Методы
$ (). Вкладка
data-target
, либо href
, нацеленный на узел контейнера в DOM. В приведенных выше примерах вкладки - это
с атрибутами data-toggle = "tab"
.
.tab ('показать')
shown.bs.tab
).
$ ('# someTab'). Tab ('показать')
События
скрыть.bs.tab
(на текущей активной вкладке) show.bs.tab
(на вкладке для показа) hidden.bs.tab
(на предыдущей активной вкладке такая же, как для события hide.bs.tab
) показано.bs.tab
(на недавно активной только что показанной вкладке та же, что и для события show.bs.tab
) hide.bs.tab
и hidden.bs.tab
запускаться не будут.
Тип события
Описание
показать.bs.tab
Это событие запускается при отображении вкладки, но до отображения новой вкладки. Используйте
Показано event.target
и event.relatedTarget
для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно. .bs.tab
Это событие запускается при отображении вкладок после того, как вкладка была показана.Используйте
event.target
и event.relatedTarget
для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно. hide.bs.tab
Это событие возникает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте
event.target
и event.relatedTarget
для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно. скрыто.bs.tab
Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте
event.target
и event.relatedTarget
для таргетинга на предыдущую активную вкладку и новую активную вкладку соответственно.
$ ('a [data-toggle = "tab"]'). On ('shown.bs.tab', function (e) {
e.target // недавно активированная вкладка
e.relatedTarget // предыдущая активная вкладка
})
Статическая подсказка
Четыре направления
$ ('# example'). Tooltip (параметры)
Разметка
атрибутов данных
и заголовка
в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top
).
Наведите указатель мыши на меня
Опции
data-
, как в data-animation = ""
.
Имя
Тип
По умолчанию
Описание
анимация
логический
правда
Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер
строка | ложь
ложный
контейнер: 'body'
. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна. задержка
Номер | объект
0
задержка: {"показать": 500, "скрыть": 100}
HTML
логический
ложный
Вставьте HTML во всплывающую подсказку.Если false, метод jQuery
text
будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки. размещение
строка | функция
'верх'
Если указано «авто», всплывающая подсказка будет динамически переориентирована. Например, если для размещения выбрано значение «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае - справа. контекст
установлен для экземпляра всплывающей подсказки. селектор
строка
ложный
Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для добавления всплывающих подсказок к динамическому HTML-содержимому.См. Этот и информативный пример.
шаблон
строка
'
всплывающей подсказки
будет вставлен в .tooltip-inner
. .tooltip-arrow
станет стрелкой всплывающей подсказки. .tooltip
. название
строка | функция
'
заголовок
отсутствует. this
, установленной на элемент, к которому прикреплена всплывающая подсказка. триггер
строка
'hover focus'
Как запускается всплывающая подсказка - щелкните | зависать | фокус | руководство. Вы можете передать несколько триггеров; разделите их пробелом.
ручной
нельзя комбинировать с другими триггерами. окно просмотра
строка | объект | функция
{селектор: 'тело', отступ: 0}
viewport: '#viewport'
или {"selector": "#viewport", "padding": 0}
контекст
установлен для экземпляра всплывающей подсказки. Методы
$ (). Подсказка (опции)
.подсказка ('показать')
shown.bs.tooltip
). Это считается "ручным" запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
$ ('# element'). Tooltip ('show')
.tooltip ('скрыть')
hidden.bs.tooltip
). Это считается "ручным" запуском всплывающей подсказки.
$ ('# элемент'). Подсказка ('скрыть')
.tooltip ('toggle')
shown.bs.tooltip
или hidden.bs.tooltip
). Это считается "ручным" запуском всплывающей подсказки.
$ ('# element'). Tooltip ('toggle')
.tooltip ('уничтожить')
), не могут быть уничтожены индивидуально для дочерних триггерных элементов.
$ ('# element'). Tooltip ('destroy')
События
Тип события
Описание
показать.bs.tooltip
Это событие запускается немедленно при вызове метода экземпляра
Показан show
. .bs.tooltip
Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip
Это событие запускается сразу после вызова метода экземпляра
hide
. скрыто.bs.tooltip
Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник
Это событие запускается после события
show.bs.tooltip
, когда шаблон всплывающей подсказки был добавлен в DOM.
$ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
// сделай что-нибудь…
})
Возможность подписки
data-toggle
:
$ (function () {
$ ('[data-toggle = "popover"]'). popover ()
})
Всплывающие окна в группах кнопок, группах ввода и таблицах требуют специальной настройки
.btn-group
или .input-group
, или на элементах, связанных с таблицами (
,
,
, ,
,
), вам нужно будет указать опцию
container: 'body'
(задокументировано ниже), чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря закругленных углов при срабатывании всплывающего окна ).
Не пытайтесь отображать всплывающие окна на скрытых элементах
$ (...). popover ('show')
, когда целевой элемент - display: none;
приведет к неправильному расположению всплывающего окна. Для всплывающих окон на отключенных элементах требуются элементы-оболочки
disabled
или .disabled
, поместите элемент внутри
Многострочные ссылки
пробелов: nowrap;
к вашим якорям, чтобы этого избежать. Примеры
Статическое всплывающее окно
Топ с вытяжкой
Поповер правый
Поповер снизу
Поповер слева
Живая демонстрация
Четыре направления
Отказаться при следующем нажатии
focus
, чтобы закрыть всплывающие окна при следующем щелчке, сделанном пользователем. Специальная разметка, необходимая для закрытия при следующем нажатии
, , а не тег
, а также необходимо включить role = "button"
и tabindex
атрибутов.
Раскрывающееся всплывающее окно
Использование
$ ('# example'). Popover (опции)
Опции
data-
, как в data-animation = ""
.
Имя
Тип
По умолчанию
Описание
анимация
логический
правда
Применить переход CSS fade к всплывающему окну
контейнер
строка | ложь
ложный
контейнер: 'body'
. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающее окно в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающего окна от элемента запуска во время изменения размера окна. содержание
строка | функция
'
data-content
отсутствует. this
, установленной на элемент, к которому прикреплено всплывающее окно. задержка
Номер | объект
0
задержка: {"показать": 500, "скрыть": 100}
HTML
логический
ложный
Вставить HTML во всплывающее окно.Если false, метод jQuery
text
будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки. размещение
строка | функция
'правый'
Если указано "auto", всплывающее окно будет динамически переориентировано. Например, если для размещения выбрано значение «автоматически влево», всплывающее окно будет отображаться слева, когда это возможно, в противном случае оно будет отображаться справа. контекст
установлен для экземпляра всплывающего окна. селектор
строка
ложный
Если предусмотрен селектор, всплывающие объекты будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-содержимого.См. Этот и информативный пример.
шаблон
строка
'
всплывающего окна
будет вставлен в .popover-title
. всплывающего окна
будет вставлено в .Поповер-контент
. .arrow
станет стрелкой всплывающего окна. .popover
. название
строка | функция
'
заголовок
отсутствует. this
, установленной на элемент, к которому прикреплено всплывающее окно. триггер
строка
нажмите
Как запускается всплывающее окно - щелкните | зависать | фокус | руководство. Вы можете передать несколько триггеров; разделите их пробелом.
ручной
нельзя комбинировать с другими триггерами. окно просмотра
строка | объект | функция
{селектор: 'тело', отступ: 0}
viewport: '#viewport'
или {"selector": "#viewport", "padding": 0}
контекст
установлен для экземпляра всплывающего окна. Атрибуты данных для отдельных всплывающих окон
Методы
$ (). Всплывающее окно (опции)
.popover ('показать')
shown.bs.popover
). Это считается "ручным" запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.
$ ('# элемент'). Popover ('показать')
.popover ('скрыть')
hidden.bs.popover
). Это считается "ручным" запуском всплывающего окна.
$ ('# элемент'). Popover ('скрыть')
.popover ('переключение')
shown.bs.popover
или hidden.bs.popover
). Это считается "ручным" запуском всплывающего окна.
$ ('# элемент'). Popover ('переключение')
.popover ('уничтожить')
), не могут быть уничтожены индивидуально для дочерних триггерных элементов.
$ ('# элемент'). Popover ('уничтожить')
События
Тип события
Описание
show.bs.popover
Это событие запускается немедленно при вызове метода экземпляра
Показано show
. .bs.popover
Это событие вызывается, когда всплывающее окно становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.popover
Это событие запускается сразу после вызова метода экземпляра
hide
. hidden.bs.popover
Это событие вызывается, когда всплывающее окно перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
вставлено.bs.popover
Это событие запускается после события
show.bs.popover
, когда шаблон всплывающего окна был добавлен в DOM.
$ ('# myPopover'). On ('hidden.bs.popover', function () {
// сделай что-нибудь…
})
Примеры предупреждений
.close
она должна быть первым дочерним элементом кнопки .alert-dismiss
, и перед ней в разметке не должно быть текстового содержимого. Ах да! У вас ошибка!
Использование
data-dismiss = "alert"
к кнопке закрытия, чтобы автоматически включить функцию закрытия предупреждения.Закрытие предупреждения удаляет его из DOM.
.fade
и .in
. Методы
$ (). Alert ()
data-dismiss = "alert"
.(Не требуется при использовании автоматической инициализации data-api.)
$ (). Alert ('закрыть')
.fade
и .in
, предупреждение исчезнет, прежде чем оно будет удалено. События
Плагин предупреждений
Тип события
Описание
закрыть.bs.alert
Это событие возникает немедленно при вызове метода экземпляра
close
. закрытое оповещение
Это событие запускается, когда предупреждение было закрыто (ожидает завершения переходов CSS).
$ ('# myAlert'). On ('closed.bs.alert', function () {
// сделай что-нибудь…
})
Состояние
data-loading-text = "Loading ..."
, чтобы использовать состояние загрузки для кнопки.
<сценарий>
$ ('# myButton'). on ('щелчок', function () {
var $ btn = $ (это) .button ('загрузка')
// бизнес-логика...
$ btn.button ('сбросить')
})
Переключатель одиночный
data-toggle = "button"
, чтобы активировать переключение на одной кнопке. Предварительно переключенным кнопкам необходимо
.active
и aria -olved = "true"
.active
и атрибут aria -hibited = "true"
к кнопке button
.
Флажок / Радио
data-toggle = "buttons"
в .btn-group
, содержащий флажки или радиовходы, позволяющие переключаться между соответствующими стилями. Требуется предварительно выбранные опции
.активно
.active
к метке входа
. Состояние визуальной проверки обновляется только при нажатии
click
на кнопке (например,через
или установив свойство checked
для входа), вам нужно будет самостоятельно переключить класс .active
на метку
входа.
Методы
$ ().кнопка ('переключение')
$ (). Кнопка ('сброс')
$ (). Кнопка (строка)
<сценарий>
$ ('# myStateButton'). on ('щелчок', function () {
$ (this) .button ('complete') // текст кнопки будет "готово!"
})
Зависимость плагина
Пример
.свернуть
скрывает содержимое .collapsing
применяется во время переходов .collapse.in
показывает содержимое href
или кнопку с атрибутом data-target
. В обоих случаях требуется data-toggle = "collapse"
.
Ссылка на href
Пример аккордеона
.panel-body
s на .list-group
s.
Сделать доступными элементы управления разворачиванием / свертыванием
aria-extended
к элементу управления. Этот атрибут явно определяет текущее состояние сворачиваемого элемента для программ чтения с экрана и аналогичных вспомогательных технологий.Если складной элемент закрыт по умолчанию, он должен иметь значение aria-extended = "false"
. Если вы установили открываемый складной элемент по умолчанию с использованием класса в
, вместо этого установите aria-extended = "true"
в элементе управления. Плагин автоматически переключает этот атрибут в зависимости от того, был ли открыт или закрыт складной элемент. data-target
указывает на селектор id
- вы можете добавить дополнительный атрибут aria-controls
к элементу управления, содержащий id
сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу. Использование
.collapse
скрывает содержимое .collapse.in
показывает содержимое .collapsing
добавляется при запуске перехода и удаляется при его завершении component-animations.less
. Через атрибуты данных
data-toggle = "collapse"
и data-target
к элементу, чтобы автоматически назначить управление сворачиваемым элементом.Атрибут data-target
принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse
. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс в
. data-parent = "# selector"
. Обратитесь к демонстрации, чтобы увидеть это в действии. Через JavaScript
$ ('.коллапс '). коллапс ()
Опции
data-
, как в data-parent = ""
.
Имя
тип
по умолчанию
описание
родитель
селектор
ложный
Если предусмотрен селектор, то все сворачиваемые элементы под указанным родителем будут закрыты при отображении этого сворачиваемого элемента.(аналогично традиционному поведению аккордеона - это зависит от панели
класса
) переключатель
логический
правда
Переключает складной элемент при вызове
Методы
. Свернуть (опции)
, объект
.
$ ('# myCollapsible').крах({
toggle: false
})
.collapse ('переключение')
shown.bs.collapse
или hidden.bs.collapse
).
.collapse ('показать')
shown.bs.collapse
).
.collapse ('скрыть')
hidden.bs.collapse
). События
Тип события
Описание
показать.bs.collapse
Это событие запускается немедленно при вызове метода экземпляра
Показано show
. .bs.collapse
Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.collapse
Это событие запускается сразу после вызова метода
hide
.
скрыто.bs.collapse
Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
$ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
// сделай что-нибудь…
})
Примеры
Проблема доступности
Анимация перехода не поддерживается в Internet Explorer 8 и 9
Требуется начальный активный элемент
.Активный класс
необходимо добавить на один из слайдов. В противном случае карусель не будет видна. Глификоны не нужны
.glyphicon .glyphicon-chevron-left
и .glyphicon .glyphicon-chevron-right
не обязательно нужны для элементов управления. Bootstrap предоставляет .icon-prev
и .icon-next
как простые альтернативы Unicode. Дополнительные подписи
.carousel-caption
в любом элементе .item
. Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован.
Этикетка первого слайда
Этикетка второго слайда
Этикетка третьего слайда
...
Использование
Несколько каруселей
id
на самом внешнем контейнере (.карусель
) для правильной работы элементов управления каруселью. При добавлении нескольких каруселей или изменении идентификатора карусели
обязательно обновите соответствующие элементы управления. Через атрибуты данных
data-slide
принимает ключевые слова prev
или next
, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-to
, чтобы передать необработанный индекс слайда в карусель data-slide-to = "2"
, который сдвигает положение слайда на конкретный индекс, начиная с 0
. data-ride = "carousel"
используется для обозначения карусели как анимированной, начиная с загрузки страницы. Не может использоваться в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели. Через JavaScript
$ ('. Карусель'). Карусель ()
Опции
data-
, как в data-interval = ""
.
Имя
тип
по умолчанию
описание
интервал
номер
5000
Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
пауза
строка
«парение»
Приостанавливает цикл карусели на mouseenter и возобновляет цикл карусели на mouseleave.
обертка
логический
правда
Должна ли карусель двигаться непрерывно или иметь жесткие остановки.
клавиатура
логический
правда
Должна ли карусель реагировать на события клавиатуры.
Методы
. Карусель (опции)
и начинает циклический просмотр элементов.
$ ('. Carousel'). Carousel ({
интервал: 2000
})
. Карусель ('цикл')
. Карусель ('пауза')
. Карусель (номер)
. Карусель ('предыдущая')
. Карусель ('далее')
События
Класс карусели
направление
: направление, в котором движется карусель ( «влево»
или «вправо»
). relatedTarget
: элемент DOM, который вставляется на место в качестве активного элемента.
Тип события
Описание
слайд-карусель
Это событие запускается немедленно при вызове метода экземпляра
slide
. карусель скольжения
Это событие вызывается, когда карусель завершает переход между слайдами.
$ ('# myCarousel'). On ('slide.bs.carousel', function () {
// сделай что-нибудь…
})
Пример
: фиксированное;
вкл. И выкл., Имитируя эффект, обнаруженный с позицией : липкое;
. Поднавигация справа - это живая демонстрация плагина аффиксов.
Использование
Позиционирование через CSS
.affix
, .affix-top
и .affix-bottom
.Вы должны предоставить стили, за исключением position: fixed;
на .affix
, чтобы эти классы самостоятельно (независимо от этого плагина) обрабатывали фактические позиции.
.affix-top
, чтобы указать, что элемент находится в самой верхней позиции. На этом этапе позиционирование CSS не требуется. .affix
заменяет .affix-top
и устанавливает position: fixed;
(предоставляется CSS Bootstrap). .affix
на .affix-bottom
. Поскольку смещения являются необязательными, для их настройки необходимо установить соответствующий CSS. В этом случае добавьте position: absolute;
при необходимости. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где разместить элемент оттуда. Через атрибуты данных
data-spy = "affix"
к элементу, за которым вы хотите следить. Используйте смещения, чтобы определить, когда следует переключать закрепление элемента.
Через JavaScript
$ ('# myAffix').affix ({
компенсировать: {
верх: 100,
внизу: function () {
return (this.bottom = $ ('. footer'). outerHeight (true))
}
}
})
Опции
data-
, как в data-offset-top = "200"
.
Имя
тип
по умолчанию
описание
смещение
Номер | функция | объект
10
Пикселей для смещения от экрана при вычислении положения прокрутки.Если указано одно число, смещение будет применяться как в верхнем, так и в нижнем направлениях. Чтобы обеспечить уникальное смещение снизу и сверху, просто укажите смещение объекта
: {top: 10}
или смещение: {top: 10, bottom: 5}
. Используйте функцию, когда вам нужно динамически вычислить смещение. цель
Селектор | узел | Элемент jQuery
окно
объект Задает целевой элемент аффикса.
Методы
. Крепление (опции)
, объект
.
$ ('# myAffix'). Affix ({
смещение: 15
})
.affix ('checkPosition')
.affix
, .affix-top
и .affix-bottom
классы добавляются или удаляются из прикрепленного содержимого в соответствии с новым состоянием. Этот метод необходимо вызывать всякий раз, когда изменяются размеры прикрепленного содержимого или целевого элемента, чтобы гарантировать правильное позиционирование прикрепленного содержимого.
$ ('# myAffix'). Affix ('checkPosition')
События
Плагин аффиксов
Тип события
Описание
проставить.bs.affix
Это событие запускается непосредственно перед прикреплением элемента.
прикрепленный аффикс
Это событие запускается после прикрепления элемента.
affix-top.bs.affix
Это событие запускается непосредственно перед прикреплением элемента вверху.
прикрепленный верхний аффикс
Это событие вызывается после того, как элемент был прикреплен сверху.
прикрепление нижнее крепление
Это событие запускается непосредственно перед прикреплением элемента снизу.