Не работает tooltip bootstrap: Почему не работает tooltip на сайте от Bootstrap? — Хабр Q&A

Содержание

Подсказки · Bootstrap на русском

Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.

Содержание

Обзор

Что нужно знать при использовании плагин всплывающей подсказки:

  • Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
  • Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
  • Подсказки с нулевой длины названия не отображаются.
  • Укажите container: 'body' чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.).
  • Вызывая подсказки на скрытые элементы не будут работать.
  • Подсказки для .disabled или
    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

Добавляет всплывающую подсказку к конкретному элементу. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать подсказку в потоке документа рядом с пусковым элементом, который позволит предотвратить подсказки от того, чтобы улететь с пусковым элементом при изменении размеров окна.

delay number | object 0

Задержка отображения и скрытия подсказки (мс) — не применяется к ручной запуск Тип

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

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

html boolean false Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак.
placement string | function ‘top’

Как подсказка — сверху | снизу | слева | справа | авто.
когда «авто» указано, оно будет динамически переориентировать подсказке. Например, если размещение «авто слева», подсказка будет показывать налево, когда это возможно, в противном случае будет отображаться правильно.

Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В this

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

selector string false Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример.
template string '<div role="tooltip"><div></div><div></div></div>'

Базовый HTML-для использования при создании всплывающей подсказки.

Подсказки title вводится в поток .tooltip-inner.

.tooltip-arrow станет стрелка подсказки.

Элемент внешней оболочки должен иметь .tooltip

класс.

title string | element | function »

По умолчанию название значение, если атрибут title Нет.

Если дана функция, она будет вызвана с его this ссылки на элемент, что подсказка прилагается.

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')

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

selector опция) не может быть индивидуально уничтожен потомок триггерных элементов.

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

События

Тип События Описание
show.bs.tooltip Это событие возникает сразу же, когда show вызывается способ экземпляра.
shown.bs.tooltip Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения).
hide.bs.tooltip Это событие сразу же уволили, когда hide метод экземпляра называется.
hidden.bs.tooltip
Это событие запускается, когда подсказка закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения).
$('#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.

  

  
    
    

    
    

    
    
    
    
    
  
  
     <раздел>
      

Легкость


каждому дому

А для решений я много чего сделал, но, к сожалению, все не сработало.

  1. С учетом названия класса

      
      
  2. Чтобы использовать элемент body для нацеливания на переключатель данных:

      
      
  3. Чтобы использовать контейнер как тело и сфокусироваться на секции:

      
      

Это то, что я получаю в своем веб-проекте:

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

РЕДАКТИРОВАТЬ

Я проверил консоль и получил сообщение об ошибке .всплывающая подсказка не является функцией :

Всплывающие подсказки · 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; на ваших s, чтобы избежать такого поведения.
  • Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели 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 в качестве триггера для всплывающей подсказки, так как это сделает невозможным запуск всплывающих подсказок для пользователей клавиатуры.

  
 Наведите указатель мыши на меня 


Текст всплывающей подсказки!

Отключенные элементы

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

или , в идеале сделанной с фокусировкой на клавиатуре, используя tabindex = "0" , и переопределить события указателя на отключенный элемент.

Опции

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

Номер Номер
Имя Тип По умолчанию Описание
анимация логический правда Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер строка | элемент | ложь ложный

Добавляет всплывающую подсказку к определенному элементу.Пример: контейнер: 'body' . Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

задержка | объект 0

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

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

Структура объекта: задержка: {"показать": 500, "скрыть": 100}

HTML логический ложный

Разрешить HTML во всплывающей подсказке.

Если true, теги HTML в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM.

Используйте текст, если вас беспокоят XSS-атаки.

размещение строка | функция ‘верх’

Как разместить всплывающую подсказку — авто | наверх | внизу | слева | верно.
Если указано auto , всплывающая подсказка будет динамически переориентирована.

Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM инициирующего элемента в качестве второго. контекст установлен для экземпляра всплывающей подсказки.

селектор строка | ложь ложный Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-содержимого.См. Этот и информативный пример.
шаблон строка '
'

Базовый 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.
Атрибуты данных для отдельных всплывающих подсказок

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

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и запускают переход .Они возвращаются к вызывающей стороне, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован .

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Подсказка (опции)

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

.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 логический ложный

Разрешить HTML во всплывающей подсказке.

Если true, HTML-теги в заголовке всплывающей подсказки будут отображаться в всплывающая подсказка. Если false, innerText свойство будет использоваться для вставки содержимого в ДОМ.

Используйте текст, если вас беспокоят XSS-атаки.

размещение строка | функция 'верх'

Как разместить всплывающую подсказку - авто | наверх | внизу | слева | верно.
Когда auto , он будет динамически переориентировать всплывающую подсказку.

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

селектор строка | ложь ложный Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям.На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM. ( jQuery. При поддержке ). Видеть это и информативный пример.
шаблон строка '
'

Базовый HTML-код для использования при создании всплывающей подсказки.

Заголовок всплывающей подсказки будет вставлен в .tooltip-внутренний .

.tooltip-arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь .tooltip class и role = "tooltip" .

титул строка | элемент | функция '

Значение заголовка по умолчанию, если атрибут заголовок отсутствует.

Если задана функция, она будет вызываться со своим - это ссылка , установленная для элемента, к которому прикреплена всплывающая подсказка.

триггер строка 'hover focus'

Как запускается всплывающая подсказка - щелкните | зависать | фокус | руководство. Вы можете пройти несколько триггеры; разделите их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно через .tooltip ('show') , .tooltip ('hide') и .tooltip ('toggle') методов; это значение нельзя комбинировать с другими спусковой крючок.

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

смещение | строка | функция 0

Смещение всплывающей подсказки относительно цели.

Когда функция используется для определения смещения, она вызывается с объектом содержащий данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой.Узел DOM запускающего элемента передается как второй аргумент.

Для получения дополнительной информации обратитесь к Поппера офсетные документы.

резервное размещение строка | массив "переворот" Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см. Поппера документы о поведении
граница строка | элемент 'scrollParent' Граница ограничения переполнения всплывающей подсказки.Принимает значения 'viewport' , 'window' , 'scrollParent' или Справка по HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к Поппера preventOverflow docs.
продезинфицировать логический правда Включите или отключите дезинфекцию. Если активировано "шаблон" и "заголовок" параметры будут очищены.
белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
sanitizeFn null | функция null Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальная библиотека для выполнения дезинфекции.
popperConfig null | объект null Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, см. Конфигурация Поппера

Размещение всплывающей подсказки начальной загрузки

Введение

Иногда, особенно на рабочем столе, полезно иметь уточненную выноску вместе с некоторыми подсказками, появляющимися, когда посетитель наводит указатель мыши на элемент.Таким образом, мы уверены, что наиболее подходящая информация, безусловно, была предоставлена ​​в нужное время и, мы надеемся, повысила удобство и комфорт посетителей сайта при использовании наших веб-страниц. Об этой деятельности заботится элемент всплывающей подсказки, который, в свою очередь, имеет отличный и регулярный внешний вид для всего дизайна фреймворка в новейшей версии Bootstrap 4, и, безусловно, их очень легко включить и настроить - почему бы нам не увидеть, как это получается выполнила .

Подробности, которые нужно изучить при использовании класса всплывающей подсказки Bootstrap:

- Всплывающие подсказки Bootstrap используют для настройки стороннюю библиотеку Tether.Вам необходимо предоставить tether.min.js перед bootstrap.js, чтобы всплывающие подсказки работали!

- Всплывающие подсказки действительно зависят от факторов производительности, поэтому вы должны инициализировать их самостоятельно.

- Всплывающая подсказка Bootstrap с заголовками нулевой длины никогда не отображается.

- Укажите контейнер : 'body' , чтобы избежать сложностей рендеринга в сверхсложном

элемента (например, группы ввода, группы кнопок и т. Д.).

- Активация всплывающих подсказок для скрытых компонентов определенно не работает.

- всплывающие подсказки для .disabled или disabled компонентов необходимо активировать в элементе оболочки.

- При срабатывании ссылки на веб-странице, занимающей множество строк, всплывающие подсказки будут сосредоточены. Примените white-space: nowrap ; на ваших -s, чтобы держаться подальше от этой деятельности.

Понятно? Отлично, почему бы нам не посмотреть, как они работают, на нескольких примерах.

Способы применения всплывающих подсказок Bootstrap:

Прежде всего, чтобы использовать производительность всплывающих подсказок, мы действительно должны разрешить это, потому что в 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 Продукт, дизайн и разработка

Фото Дрю Тейлор

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

Если вы просто хотите увидеть демонстрацию и код, сразу переходите к CodePen. 💅

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

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

Моя первоначальная идея - максимально использовать преимущества CSS. Мы можем легко создать всплывающую подсказку для экранов рабочего стола, используя псевдокласс : hover . Недостатком этого подхода является то, что нам нужно другое поведение на сенсорных экранах, где пользователи ожидают, что смогут закрыть всплывающую подсказку, нажав ярлык во второй раз или нажав в любом месте экрана.

Обработка событий CSS hover на сенсорных экранах может быть сложной задачей, поскольку браузеры будут интерпретировать их по-разному. Чтобы упростить задачу, я решил использовать мультимедийную функцию CSS, чтобы только устройства, поддерживающие наведенные элементы, обрабатывали всплывающие подсказки при открытии / закрытии через CSS. Другие устройства вместо этого будут полагаться на JS и события касания. Если вам действительно нужна поддержка устаревших браузеров, таких как Internet Explorer, не пугайтесь отсутствия поддержки функции мультимедиа, вы можете использовать Browserhacks, чтобы специально настроить таргетинг на определенные браузеры, на которые полагается ваша аудитория.

CSS, необходимый для этого подхода, минимален. Идея состоит в том, чтобы установить контейнер с position: relative , в то время как раскрывающийся список имеет position: absolute , и мы можем использовать комбинацию left: 50% и transform: translateX (-50%) , чтобы иметь всплывающая подсказка в центре метки по горизонтали.

Чтобы открыть всплывающую подсказку, мы используем класс с модификатором (после БЭМ) всплывающая подсказка - откройте . Это переключает свойство display раскрывающегося списка на block и запускает CSS-анимацию для быстрого эффекта плавного появления.

С точки зрения JavaScript, использование веб-компонентов позволяет нам использовать синтаксис класса из ES6, который улучшает читаемость кода. Мы можем использовать connectedCallback для настройки прослушивателей событий, когда пользовательский элемент подключен к DOM. Затем мы можем переключить всплывающую подсказку - открыть класс для родительского элемента в событиях touchstart .

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

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

Обычно это плохо заканчивается тем, что всплывающие подсказки исчезают с экрана и обрезается контент, что вызывает разочарование у пользователей. Существуют умные решения для управления динамическим позиционированием, чтобы элементы всегда оставались видимыми на экранах, например Popper.js. Однако ~ 6 КБ уменьшенного и сжатого с помощью сжатия кода JavaScript - это довольно много, чтобы просто разместить небольшой блок текста на экране. Учитывая стоимость использования МБ JS для пользователей в наши дни, я бы предпочел более легкий подход.

Чтобы найти простое решение, я сократил все, что мне было нужно, до самого простого варианта. Если раскрывающийся список выходит из нижней части метки, а не из любого положения (слева, справа, вверху слева и т. Д.), Это означает, что раскрывающийся список может переполняться только с горизонтальных сторон. Чтобы предотвратить переполнение, мне нужно только проверить открытое событие, чтобы позиция элемента не превышала левый и правый пределы экрана.В этой ситуации простой перевод элемента с помощью CSS transform сбросит позицию обратно на экран.

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

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

Более сильным аргументом в пользу веб-компонентов было то, как они взаимодействуют с виртуальной DOM. В carwow мы используем Elm, когда нам нужно управление состоянием в частях веб-сайта с высокой интерактивностью на стороне клиента.Обратной стороной встроенного приложения, использующего виртуальную модель DOM на веб-странице, является то, что у него нет прямого доступа к объекту Window . В этом контексте может быть непросто сделать всплывающую подсказку, реагирующую на область просмотра браузера. В случае приложения Elm мы могли бы справиться с этим с помощью портов.

К счастью, мы нашли альтернативное решение с использованием пользовательских элементов внутри Elm, которое позволяет ассоциированному JS работать так, как ожидалось. Для получения дополнительной информации о возможностях, которые он предлагает, я бы порекомендовал этот доклад Люка Вестби на Elm Europe 2018.

Посмотрите на CodePen ниже или на компонент нашей прекрасной дизайн-системы.

Если у вас есть какие-либо вопросы или мысли по поводу нашего подхода, мы будем рады их услышать!

JavaScript · Bootstrap 3.3.6 Документация

Индивидуальный или составной

Плагины

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

Использование скомпилированного JavaScript

Оба файла bootstrap.js и bootstrap.min.js содержат все плагины в одном файле. Включите только один.

Зависимости плагинов

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина). Проконсультируйтесь с нашим bower.json , чтобы узнать, какие версии jQuery поддерживаются.

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

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

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

  $ (документ) .off ('. Data-api')  

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

  $ (документ) .off ('. Alert.data-api')  
Только один плагин на элемент через атрибуты данных

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

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

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

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

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

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

События

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

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

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

  $ ('# myModal'). On ('show.bs.modal', function (e) {
  if (! data) return e.preventDefault () // останавливает отображение модального окна
})  

Номера версий

Доступ к версии каждого из подключаемых модулей jQuery Bootstrap можно получить через свойство VERSION конструктора подключаемого модуля.Например, для плагина всплывающей подсказки:

  $ .fn.tooltip.Constructor.VERSION // => "3.3.6"  

Нет специальных резервных вариантов при отключенном JavaScript

Плагины

Bootstrap не особо изящно отключаются, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте

Сторонние библиотеки

Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на .noConflict и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно.

О переходах

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

Что внутри

Transition.js - это базовый помощник для событий transitionEnd , а также эмулятор перехода CSS.Он используется другими плагинами для проверки поддержки переходов CSS и для обнаружения зависших переходов.

Отключение переходов

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

  $ .support.transition = false  

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

Несколько открытых модальных окон не поддерживаются

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

Размещение модальной разметки

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

Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:

  $ ('# myModal'). On ('shown.bs.modal', function () {
  $ ('# myInput'). фокус ()
})  

Примеры

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

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

  
Модальный заголовок

Одно прекрасное тело & 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.

Запустить демонстрационный модальный режим

  



Модальный заголовок
...
Сделать модальные окна доступными

Не забудьте добавить role = "dialog" и aria-labelledby = "..." со ссылкой на модальный заголовок в .modal и role = "document" в .сам модальный диалог .

Кроме того, вы можете дать описание вашего модального диалога с помощью aria, описанного на .modal .

Встраивание видео с YouTube

Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д. См. Этот полезный пост о переполнении стека для получения дополнительной информации.

Дополнительные размеры

Модалы

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

Большой модальный Малый модальный

  


...
...

Удалить анимацию

Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из модальной разметки.

  
...

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

Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите .row в .modal-body , а затем использовать классы нормальной сетки.

.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

Уровень 1: .col-sm-9

Уровень 2: .col-XS-8 .col-sm-6

Уровень 2: .col-xs-4 .col-sm-6

Запустить демонстрационный модальный режим

  
Модальный заголовок
.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
Уровень 1: .col-sm-9
Уровень 2: .col-XS-8 .col-sm-6
Уровень 2: .col-xs-4 .col-sm-6

У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержанием? Используйте атрибуты event.relatedTarget и HTML data- * (возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о relatedTarget ,

. Открыть модальное окно для @mdo Открыть модальное окно для @fat Открыть модальное окно для @getbootstrap ... еще кнопки ...
  


...больше кнопок ...

Новое сообщение
<форма>
  $ ('# 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 (получатель)
})  

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

Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open к , чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop , чтобы предоставить область щелчка для отклонения отображаемых модальных окон при щелчке вне модального окна.

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

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

    

Через JavaScript

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

  $ ('# myModal'). Модальный (параметры)  

Опции

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

Имя тип по умолчанию описание
фон boolean или строка 'static' правда Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при щелчке.
клавиатура логический правда Закрывает модальное окно при нажатии клавиши выхода
показать логический правда Показывает модальное окно при инициализации.
удаленный путь ложный

Эта опция устарела, начиная с версии v3.3.0 и был удален в v4. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или структуру привязки данных или вызывать jQuery.load самостоятельно.

Если предоставлен удаленный URL-адрес, содержимое будет загружено один раз с помощью метода jQuery 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')  

События

Модальный класс

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

Все модальные события запускаются в самом модальном окне (то есть в

).

Тип события Описание
показать модальный Это событие запускается немедленно при вызове метода экземпляра show .Если он вызван щелчком, выбранный элемент доступен как свойство relatedTarget события.
показан модальный Это событие вызывается, когда модальное окно становится видимым для пользователя (будет ожидать завершения переходов CSS). Если это вызвано щелчком, выбранный элемент доступен как свойство relatedTarget события.
hide.bs.modal Это событие запускается сразу после вызова метода экземпляра hide .
скрытый модальный Это событие запускается, когда модальное окно перестало быть скрытым от пользователя (будет ожидать завершения переходов CSS).
загруженный модальный Это событие вызывается, когда модальное окно загружает контент с помощью опции remote .
  $ ('# myModal'). On ('hidden.bs.modal', function (e) {
  // сделай что-нибудь...
})  

Примеры

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

Внутри панели навигации

Внутри таблеток

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

С помощью атрибутов данных или JavaScript подключаемый модуль раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения класса .open в родительском элементе списка.

На мобильных устройствах открытие раскрывающегося списка добавляет .dropdown-backdrop в качестве области касания для закрытия раскрывающихся меню при нажатии вне меню, что является требованием для надлежащей поддержки iOS. Это означает, что переключение из открытого раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве.

Примечание. Атрибут data-toggle = "dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

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

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

  
    ...

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

    

Через JavaScript

Вызов раскрывающихся списков с помощью JavaScript:

  $ ('.dropdown-toggle '). dropdown ()  
data-toggle = "dropdown" по-прежнему требуется

Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle = "dropdown" всегда должен присутствовать в элементе триггера раскрывающегося списка.

Опции

Нет

Методы

$ (). Раскрывающийся список ('переключение')

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

События

Все события dropdown запускаются в родительском элементе .dropdown-menu .

Все раскрывающиеся события имеют свойство relatedTarget , значение которого является переключаемым элементом привязки.

Показан
Тип события Описание
показать.bs.dropdown Это событие запускается немедленно при вызове метода экземпляра шоу.
.bs.dropdown Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.dropdown Это событие запускается сразу после вызова метода экземпляра hide.
hidden.bs.dropdown Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myDropdown'). On ('show.bs.dropdown', function () {
  // сделай что-нибудь…
})  

Плагин 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 эстетика Уэса Андерсона. Нихил татуированный акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват.

@mdo

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 требует использования position: relative; на элементе, за которым вы шпионите. В большинстве случаев это . При прокрутке элементов, отличных от , обязательно установите высоту , и overflow-y: scroll; Подано .

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

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

  кузов {
  положение: относительное;
}  
  
  ...
  
    ...
...

Через JavaScript

После добавления позиция: относительная; в вашем CSS, вызовите scrollspy через JavaScript:

  $ ('тело'). Scrollspy ({target: '# navbar-example'})  

Методы

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

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

  $ ('[data-spy = "scroll"]').each (function () {
  var $ spy = $ (это) .scrollspy ('обновить')
})  

Опции

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

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

События

Тип события Описание
activate.bs.scrollspy Это событие срабатывает всякий раз, когда scrollspy активирует новый элемент.
  $ ('# myScrollspy'). On ('activate.bs.scrollspy', function () {
  // сделай что-нибудь…
})  

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

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

Необработанный деним Вы наверняка не слышали о джинсовых шортах 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 (каждую вкладку нужно активировать отдельно):

  $ ('# 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)  

Разметка

Вы можете активировать навигацию по вкладкам или таблеткам без написания кода JavaScript, просто указав 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 ('показать')  

События

При отображении новой вкладки события запускаются в следующем порядке:

  1. скрыть.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке для показа)
  3. hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab )
  4. показано.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 // предыдущая активная вкладка
})  

На основе отличного jQuery.пьяный плагин, написанный Jason Frame; Всплывающие подсказки - это обновленная версия, которая не полагается на изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков.

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

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

Статическая подсказка

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

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

  





  

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

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

  $ ('# example'). Tooltip (параметры)  

Разметка

Требуемая разметка для всплывающей подсказки - это только атрибутов данных и заголовка в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top ).

  
 Наведите указатель мыши на меня 


Текст всплывающей подсказки!

Опции

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

Номер
Имя Тип По умолчанию Описание
анимация логический правда Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер строка | ложь ложный

Добавляет всплывающую подсказку к определенному элементу.Пример: контейнер: 'body' . Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

задержка | объект 0

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

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

Структура объекта: задержка: {"показать": 500, "скрыть": 100}

HTML логический ложный Вставьте HTML во всплывающую подсказку.Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки.
размещение строка | функция 'верх'

Как разместить всплывающую подсказку - вверху | внизу | слева | право | авто.
Если указано «авто», всплывающая подсказка будет динамически переориентирована. Например, если для размещения выбрано значение «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае - справа.

Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM инициирующего элемента в качестве второго. контекст установлен для экземпляра всплывающей подсказки.

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

Базовый HTML-код для использования при создании всплывающей подсказки.

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

.tooltip-arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь класс .tooltip .

название строка | функция '

Значение заголовка по умолчанию, если атрибут заголовок отсутствует.

Если функция задана, она будет вызываться со своей ссылкой this , установленной на элемент, к которому прикреплена всплывающая подсказка.

триггер строка 'hover focus' Как запускается всплывающая подсказка - щелкните | зависать | фокус | руководство. Вы можете передать несколько триггеров; разделите их пробелом. ручной нельзя комбинировать с другими триггерами.
окно просмотра строка | объект | функция {селектор: 'тело', отступ: 0}

Сохраняет всплывающую подсказку в пределах этого элемента.Пример: viewport: '#viewport' или {"selector": "#viewport", "padding": 0}

Если функция задана, она вызывается с запускающим элементом DOM-узлом в качестве единственного аргумента. контекст установлен для экземпляра всплывающей подсказки.

Методы

$ (). Подсказка (опции)

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

.подсказка ('показать')

Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка будет фактически показана (то есть до того, как произойдет событие 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 () {
  // сделай что-нибудь…
})  

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

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

Возможность подписки

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

Один из способов инициализировать все всплывающие окна на странице - выбрать их с помощью атрибута data-toggle :

  $ (function () {
  $ ('[data-toggle = "popover"]'). popover ()
})  
Всплывающие окна в группах кнопок, группах ввода и таблицах требуют специальной настройки

При использовании всплывающих окон на элементах в пределах .btn-group или .input-group , или на элементах, связанных с таблицами ( , , , , , ), вам нужно будет указать опцию container: 'body' (задокументировано ниже), чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или потеря закругленных углов при срабатывании всплывающего окна ).

Не пытайтесь отображать всплывающие окна на скрытых элементах

Вызов $ (...). popover ('show') , когда целевой элемент - display: none; приведет к неправильному расположению всплывающего окна.

Для всплывающих окон на отключенных элементах требуются элементы-оболочки

Чтобы добавить всплывающее окно к элементу disabled или .disabled , поместите элемент внутри

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

Многострочные ссылки

Иногда вы хотите добавить всплывающее окно к гиперссылке, которая переносит несколько строк.По умолчанию плагин popover центрирует его по горизонтали и вертикали. Добавьте пробелов: nowrap; к вашим якорям, чтобы этого избежать.

Примеры

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

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

Топ с вытяжкой

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.

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

Нажмите, чтобы переключить всплывающее окно

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

Всплывающее окно справа Поповер сверху Поповер внизу Поповер слева

  





  
Отказаться при следующем нажатии

Используйте триггер focus , чтобы закрыть всплывающие окна при следующем щелчке, сделанном пользователем.

Специальная разметка, необходимая для закрытия при следующем нажатии

Для правильного кроссбраузерного и кроссплатформенного поведения необходимо использовать тег , , а не тег

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

Методы

$ (). Alert ()

Заставляет оповещение прослушивать события щелчка на дочерних элементах, которые имеют атрибут data-dismiss = "alert" .(Не требуется при использовании автоматической инициализации data-api.)

$ (). Alert ('закрыть')

Закрывает предупреждение, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .in , предупреждение исчезнет, ​​прежде чем оно будет удалено.

События

Плагин предупреждений

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

Тип события Описание
закрыть.bs.alert Это событие возникает немедленно при вызове метода экземпляра close .
закрытое оповещение Это событие запускается, когда предупреждение было закрыто (ожидает завершения переходов CSS).
  $ ('# myAlert'). On ('closed.bs.alert', function () {
  // сделай что-нибудь…
})  

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

Состояние

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

Эта функция устарела, начиная с версии 3.3.6, и была удалена в версии 4.

Состояние загрузки

  

<сценарий>
  $ ('# 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 на метку входа.

  
<метка> Флажок 1 (предварительно установлен) <метка> Флажок 2 <метка> Флажок 3
  
<метка> Радио 1 (предварительно выбрано) <метка> Радио 2 <метка> Радио 3

Методы

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

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

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

Сбрасывает состояние кнопки - заменяет текст исходным текстом. Этот метод является асинхронным и возвращается до фактического завершения сброса.

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

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

  

<сценарий>
  $ ('# myStateButton'). on ('щелчок', function () {
    $ (this) .button ('complete') // текст кнопки будет "готово!"
  })
  

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

Зависимость плагина

Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap.

Пример

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

  • .свернуть скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.in показывает содержимое

Можно использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется data-toggle = "collapse" .

Ссылка на 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.

  
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.

Также можно заменить .panel-body s на .list-group s.

  • Загрузочный
  • One itmus ac Facilin
  • Второй эрос
Сделать доступными элементы управления разворачиванием / свертыванием

Не забудьте добавить 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

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

  $ ('.коллапс '). коллапс ()  

Опции

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

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

Методы

. Свернуть (опции)

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

  $ ('# myCollapsible').крах({
  toggle: false
})  
.collapse ('переключение')

Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse ).

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

Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан. (т.е.е. перед событием shown.bs.collapse ).

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

Скрывает складной элемент. Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента (т.е. до того, как произойдет событие hidden.bs.collapse ).

События

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

Показано
Тип события Описание
показать.bs.collapse Это событие запускается немедленно при вызове метода экземпляра show .
.bs.collapse Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.collapse Это событие запускается сразу после вызова метода hide .
скрыто.bs.collapse Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь…
})  

Компонент слайд-шоу для циклического просмотра элементов, например карусели. Вложенные карусели не поддерживаются.

Примеры

    
Проблема доступности

Компонент карусели обычно не соответствует стандартам доступности.Если вам нужно соответствовать требованиям, рассмотрите другие варианты представления вашего контента.

Анимация перехода не поддерживается в Internet Explorer 8 и 9

Bootstrap использует исключительно CSS3 для своей анимации, но Internet Explorer 8 и 9 не поддерживает необходимые свойства CSS. Таким образом, при использовании этих браузеров анимация перехода между слайдами отсутствует. Мы намеренно решили не включать резервные варианты на основе jQuery для переходов.

Требуется начальный активный элемент

Модель .Активный класс необходимо добавить на один из слайдов. В противном случае карусель не будет видна.

Глификоны не нужны

Классы .glyphicon .glyphicon-chevron-left и .glyphicon .glyphicon-chevron-right не обязательно нужны для элементов управления. Bootstrap предоставляет .icon-prev и .icon-next как простые альтернативы Unicode.

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

Легко добавляйте подписи к слайдам с помощью .carousel-caption в любом элементе .item . Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован.

Этикетка первого слайда

Nulla vitae elit libero, pharetra augue mollis interdum.

Этикетка второго слайда

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Этикетка третьего слайда

Praesentmodo cursus magna, vel scelerisque nisl consctetur.

Предыдущий Следующий
  
...

...

...

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

Несколько каруселей

Карусели требуют использования id на самом внешнем контейнере (.карусель ) для правильной работы элементов управления каруселью. При добавлении нескольких каруселей или изменении идентификатора карусели обязательно обновите соответствующие элементы управления.

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

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

Атрибут data-ride = "carousel" используется для обозначения карусели как анимированной, начиная с загрузки страницы. Не может использоваться в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.

Через JavaScript

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

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

Опции

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

Имя тип по умолчанию описание
интервал номер 5000 Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
пауза строка «парение» Приостанавливает цикл карусели на mouseenter и возобновляет цикл карусели на mouseleave.
обертка логический правда Должна ли карусель двигаться непрерывно или иметь жесткие остановки.
клавиатура логический правда Должна ли карусель реагировать на события клавиатуры.

Методы

. Карусель (опции)

Инициализирует карусель с дополнительным объектом options и начинает циклический просмотр элементов.

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

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

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

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

. Карусель (номер)

Циклический переход карусели к определенному кадру (на основе 0, аналогично массиву).

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

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

. Карусель ('далее')

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

События

Класс карусели

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

Оба события имеют следующие дополнительные свойства:

  • направление : направление, в котором движется карусель ( «влево» или «вправо» ).
  • relatedTarget : элемент DOM, который вставляется на место в качестве активного элемента.

Все события карусели запускаются в самой карусели (то есть в

).

Тип события Описание
слайд-карусель Это событие запускается немедленно при вызове метода экземпляра slide .
карусель скольжения Это событие вызывается, когда карусель завершает переход между слайдами.
  $ ('# myCarousel'). On ('slide.bs.carousel', function () {
  // сделай что-нибудь…
})  

Пример

Плагин аффикса переключает положение : фиксированное; вкл. И выкл., Имитируя эффект, обнаруженный с позицией : липкое; . Поднавигация справа - это живая демонстрация плагина аффиксов.


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

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

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

Позиционирование через CSS

Плагин affix переключает между тремя классами, каждый из которых представляет определенное состояние: .affix , .affix-top и .affix-bottom .Вы должны предоставить стили, за исключением position: fixed; на .affix , чтобы эти классы самостоятельно (независимо от этого плагина) обрабатывали фактические позиции.

Вот как работает плагин affix:

  1. Для начала плагин добавляет .affix-top , чтобы указать, что элемент находится в самой верхней позиции. На этом этапе позиционирование CSS не требуется.
  2. Прокрутка мимо элемента, который вы хотите прикрепить, должна вызвать фактическое прикрепление.Здесь .affix заменяет .affix-top и устанавливает position: fixed; (предоставляется CSS Bootstrap).
  3. Если задано нижнее смещение, прокрутка мимо него должна заменить .affix на .affix-bottom . Поскольку смещения являются необязательными, для их настройки необходимо установить соответствующий CSS. В этом случае добавьте position: absolute; при необходимости. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где разместить элемент оттуда.

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

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

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

  
...

Через JavaScript

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

  $ ('# myAffix').affix ({
  компенсировать: {
    верх: 100,
    внизу: function () {
      return (this.bottom = $ ('. footer'). outerHeight (true))
    }
  }
})  

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к 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')  

События

Плагин аффиксов

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

Тип события Описание
проставить.bs.affix Это событие запускается непосредственно перед прикреплением элемента.
прикрепленный аффикс Это событие запускается после прикрепления элемента.
affix-top.bs.affix Это событие запускается непосредственно перед прикреплением элемента вверху.
прикрепленный верхний аффикс Это событие вызывается после того, как элемент был прикреплен сверху.
прикрепление нижнее крепление Это событие запускается непосредственно перед прикреплением элемента снизу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Theme: Overlay by Kaira Extra Text
Cape Town, South Africa