Огляд

Індивідуальний або складений

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

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

Ви можете використовувати всі плагіни Bootstrap виключно через API розмітки без написання жодного рядка JavaScript. Це першокласний API Bootstrap, на який ви повинні звернути увагу в першу чергу під час використання плагіна.

Однак у деяких ситуаціях може бути бажано вимкнути цю функцію. Тому ми також надаємо можливість вимкнути API атрибутів даних, скасувавши прив’язку всіх подій у просторі імен документа з data-api. Це виглядає так:

$(document).off('.data-api')

Крім того, щоб націлити певний плагін, просто додайте назву плагіна як простір імен разом із простором імен data-api, як це:

$(document).off('.alert.data-api')

Програмний API

Ми також вважаємо, що ви повинні мати можливість використовувати всі плагіни Bootstrap виключно через JavaScript API. Усі загальнодоступні API є єдиними методами, які можна зв’язати, і повертають колекцію, на яку діють.

$('.btn.danger').button('toggle').addClass('fat')

Усі методи повинні приймати необов’язковий об’єкт параметрів, рядок, який націлений на певний метод, або нічого (що ініціює плагін із типовою поведінкою):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

Налаштування за замовчуванням

Ви можете змінити параметри за замовчуванням для плагіна, змінивши Constructor.DEFAULTSоб’єкт плагіна:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Жодного конфлікту

Іноді необхідно використовувати плагіни Bootstrap з іншими фреймворками інтерфейсу користувача. За таких обставин час від часу можуть виникати конфлікти простору імен. Якщо це станеться, ви можете викликати .noConflictплагін, значення якого хочете повернути.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Події

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

Починаючи з версії 3.0.0, усі події Bootstrap мають простір імен.

Усі інфінітивні події забезпечують preventDefaultфункціональність. Це надає можливість зупинити виконання дії до її початку.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

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

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

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

Немає спеціальних резервних варіантів, коли JavaScript вимкнено

Плагіни Bootstrap не повертаються особливо витончено, коли JavaScript вимкнено. Якщо ви дбаєте про взаємодію з користувачем у цьому випадку, використовуйте, <noscript>щоб пояснити ситуацію (і як повторно ввімкнути JavaScript) своїм користувачам, і/або додайте власні запасні варіанти.

Переходи conversion.js

Про переходи

Для простих ефектів переходу додайте transition.jsодин раз разом з іншими файлами JS. Якщо ви використовуєте скомпільований (або мінімізований) bootstrap.js, немає потреби включати це — воно вже є.

Що всередині

Transition.js — це базовий помічник для transitionEndподій, а також емулятор переходу CSS. Він використовується іншими плагінами для перевірки підтримки переходів CSS і для виявлення завислих переходів.

Вимкнення переходів

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

$.support.transition = false

Modals modal.js

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

Через те, як HTML5 визначає свою семантику, autofocusатрибут HTML не впливає на моди Bootstrap. Щоб досягти такого ж ефекту, використовуйте власний JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Приклади

Статичний приклад

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

Увімкніть модаль за допомогою JavaScript, натиснувши кнопку нижче. Він зсунеться вниз і зникне з верхньої частини сторінки.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Додаткові розміри

Модальні мають два додаткові розміри, доступні через класи-модифікатори, які розміщуються на .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Видалити анімацію

Для модалів, які просто з’являються, а не зникають під час перегляду, видаліть .fadeклас із модальної розмітки.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Використання системи сіток

Щоб скористатися перевагами сіткової системи Bootstrap у модалі, просто вставте .rows у , .modal-bodyа потім використовуйте звичайні класи сіткової системи.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Змінний модальний вміст на основі кнопки запуску

У вас є купа кнопок, які запускають один і той самий режим, але з дещо різним вмістом? Використовуйте атрибути HTML (можливо, event.relatedTargetчерез jQuery ), щоб змінювати вміст модального елемента залежно від того, яку кнопку було натиснуто. Перегляньте документацію Modal Events, щоб дізнатися більше про ,data-*relatedTarget

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Використання

Модальний плагін перемикає ваш прихований вміст на вимогу за допомогою атрибутів даних або JavaScript. Це також додає .modal-openдо <body>перевизначення поведінки прокручування за замовчуванням і генерує , .modal-backdropщоб забезпечити область клацання для відхилення показаних модалів під час клацання поза модальністю.

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

Активуйте модаль без написання JavaScript. Встановіть data-toggle="modal"на елементі контролера, наприклад на кнопці, разом із data-target="#foo"або href="#foo", щоб націлити певний режим для перемикання.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Викличте модаль з ідентифікатором myModalза допомогою одного рядка JavaScript:

$('#myModal').modal(options)

Опції

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

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

методи

.modal(options)

Активує ваш вміст як модальний. Приймає додаткові параметри object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Вручну перемикає режим. Повертається до абонента до того, як модаль буде фактично показано або приховано (тобто до події shown.bs.modalабо ).hidden.bs.modal

$('#myModal').modal('toggle')

.modal('show')

Вручну відкриває модаль. Повертається до абонента до того, як модаль буде фактично показано (тобто до того , як відбудеться shown.bs.modalподія).

$('#myModal').modal('show')

.modal('hide')

Вручну приховує модаль. Повертається до абонента до того, як модаль буде фактично приховано (тобто до того , як відбудеться hidden.bs.modalподія).

$('#myModal').modal('hide')

.modal('handleUpdate')

Змінює позиціонування модалу, щоб протистояти смузі прокручування, якщо вона з’явиться, що змусить модаль перейти вліво.

Потрібен лише тоді, коли висота модалу змінюється, коли він відкритий.

$('#myModal').modal('handleUpdate')

Події

Модальний клас Bootstrap надає кілька подій для підключення до модальної функціональності.

Усі модальні події запускаються на самому модалі (тобто на <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Випадаючі списки dropdown.js

Приклади

Додайте спадні меню майже до будь-чого за допомогою цього простого плагіна, включаючи панель навігації, вкладки та таблетки.

У навігаційній панелі

У таблетках

Використання

За допомогою атрибутів даних або JavaScript плагін спадного меню перемикає прихований вміст (випадаючі меню), перемикаючи .openклас у батьківському елементі списку.

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

Примітка. Цей data-toggle="dropdown"атрибут використовується для закриття спадних меню на рівні програми, тому доцільно використовувати його завжди.

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

Додайте data-toggle="dropdown"до посилання або кнопку, щоб увімкнути спадне меню.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Через JavaScript

Виклик спадних меню через JavaScript:

$('.dropdown-toggle').dropdown()

Опції

Жодного

методи

$().dropdown('toggle')

Перемикає спадне меню певної панелі навігації або навігації з вкладками.

Події

Усі події, що випадають, запускаються до .dropdown-menuбатьківського елемента.

Усі події, що випадають, мають relatedTargetвластивість, значенням якої є елемент прив’язки перемикання.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Приклад на панелі навігації

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

Використання

Потрібне взаємне розташування

Незалежно від методу реалізації, Scrollspy вимагає використання position: relative;на елементі, за яким ви шпигуєте. У більшості випадків це <body>. Під час прокручування елементів, відмінних від <body>, переконайтеся, що heightвстановлено та overflow-y: scroll;застосовано.

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

Щоб легко додати шпигунську поведінку до вашої верхньої панелі навігації, додайте data-spy="scroll"до елемента, який ви хочете стежити (найчастіше це буде <body>). Потім додайте data-targetатрибут з ідентифікатором або класом батьківського елемента будь-якого .navкомпонента Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

Після додавання position: relative;вашого CSS викличте scrollspy через JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

методи

.scrollspy('refresh')

Під час використання Scrollspy разом із додаванням або видаленням елементів із DOM вам потрібно буде викликати метод refresh таким чином:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Опції

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

Події

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Перемикання вкладок tab.js

Приклади вкладок

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

Використання

Увімкнути вкладки з можливістю вкладок через JavaScript (кожну вкладку потрібно активувати окремо):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Розмітка

Ви можете активувати вкладку або навігацію без написання будь-якого JavaScript, просто вказавши data-toggle="tab"або data-toggle="pill"на елементі. Додавання класів navand nav-tabsдо вкладки ulзастосує стиль вкладки Bootstrap , тоді як додавання класів navand nav-pillsзастосує стиль таблетки .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Ефект вицвітання

Щоб вкладки зникали, додайте .fadeдо кожної .tab-pane. Перша панель вкладок також має .inзробити початковий вміст видимим.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

методи

$().tab

Активує елемент вкладки та контейнер вмісту. Вкладка повинна мати або data-targetабо hrefорієнтований на вузол контейнера в DOM. У наведених вище прикладах вкладками є <a>символи з data-toggle="tab"атрибутами.

.tab('show')

Вибирає вказану вкладку та показує пов’язаний із нею вміст. Будь-яка інша раніше вибрана вкладка стає невибраною, а пов’язаний із нею вміст приховано. Повертається до абонента до того, як буде фактично показано панель вкладок (тобто до того , як відбудеться shown.bs.tabподія).

$('#someTab').tab('show')

Події

Під час показу нової вкладки події запускаються в такому порядку:

1. hide.bs.tab(на поточній активній вкладці)
2. show.bs.tab(на вкладці для показу)
3. hidden.bs.tab(на попередній активній вкладці, така ж, як і для hide.bs.tabподії)
4. shown.bs.tab(на щойно показаній щойно активній вкладці, тій самій, що й для show.bs.tabподії)

Якщо жодна вкладка ще не була активною, події hide.bs.tabта hidden.bs.tabне запускатимуться.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Підказки tooltip.js

Натхненний чудовим плагіном jQuery.tipsy, написаним Джейсоном Фреймом; Підказки – це оновлена ​​версія, яка не покладається на зображення, використовує CSS3 для анімації та атрибути даних для локального зберігання заголовків.

Підказки з заголовками нульової довжини ніколи не відображаються.

Приклади

Наведіть курсор на посилання нижче, щоб переглянути підказки:

Статична підказка

Доступні чотири варіанти: вирівнювання вгорі, праворуч, внизу та ліворуч.

Чотири напрямки

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Використання

Плагін підказки створює вміст і розмітку за запитом і за замовчуванням розміщує підказки після елемента запуску.

Запустити підказку через JavaScript:

$('#example').tooltip(options)

Розмітка

Необхідна розмітка для спливаючої підказки – це лише dataатрибут, а titleв елементі HTML, який ви хочете мати спливаючу підказку. Згенерована розмітка спливаючої підказки досить проста, хоча для неї потрібна позиція (за замовчуванням встановлена top​​плагіном).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Опції

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

методи

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

Приховує та знищує підказку елемента. Підказки, які використовують делегування (які створюються за допомогою параметра selector) , не можуть бути окремо знищені на нащадкових елементах тригера.

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

Події

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Додайте невеликі накладки вмісту, як на iPad, до будь-якого елемента для розміщення вторинної інформації.

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

$(function () {
  $('[data-toggle="popover"]').popover()
})

Приклади

Статичний повер

Доступні чотири варіанти: вирівнювання вгорі, праворуч, внизу та ліворуч.

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

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Чотири напрямки

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Відхилити після наступного натискання

Використовуйте focusтригер, щоб закрити спливаючі вікна під час наступного клацання користувачем.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Використання

Увімкнути спливаючі вікна через JavaScript:

$('#example').popover(options)

Опції

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

методи

$().popover(options)

Ініціалізує спливаючі вікна для колекції елементів.

.popover('show')

Виявляє спливаюче зображення елемента. Повертається до абонента до того, як спливаюче повідомлення буде фактично показано (тобто до того , як відбудеться shown.bs.popoverподія). Це вважається «ручним» запуском спливаючого вікна. Спливаючі повідомлення, заголовок і вміст яких мають нульову довжину, ніколи не відображаються.

$('#element').popover('show')

.popover('hide')

Приховує спливаюче вікно елемента. Повертається до абонента, перш ніж спливаюче повідомлення було фактично приховано (тобто до того , як відбудеться hidden.bs.popoverподія). Це вважається «ручним» запуском спливаючого вікна.

$('#element').popover('hide')

.popover('toggle')

Перемикає спливаюче вікно елемента. Повертається до абонента до того, як спливаюче повідомлення було фактично показано або приховано (тобто до того, як відбудеться подія shown.bs.popoverабо ). hidden.bs.popoverЦе вважається «ручним» запуском спливаючого вікна.

$('#element').popover('toggle')

.popover('destroy')

Приховує та знищує спливаючий елемент елемента. Поповери, які використовують делегування (які створюються за допомогою параметра selector) , не можуть бути окремо знищені на нащадкових тригерних елементах.

$('#element').popover('destroy')

Події

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Повідомлення сповіщень alert.js

Приклад сповіщень

Додайте функцію відхилення до всіх сповіщень за допомогою цього плагіна.

Якщо .closeкнопка використовується, вона має бути першою дочірньою кнопкою, .alert-dismissibleі жодний текстовий вміст не може бути перед нею в розмітці.

Використання

Просто додайте data-dismiss="alert"до кнопки закриття, щоб автоматично надати функцію закриття попередження. Закриття сповіщення видаляє його з DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

методи

$().alert()

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

$().alert('close')

Закриває сповіщення, видаляючи його з DOM. Якщо в елементі присутні класи .fadeand .in, попередження зникне, перш ніж його буде видалено.

Події

Плагін сповіщень Bootstrap відкриває кілька подій для підключення до функції сповіщень.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

кнопки button.js

Робіть більше за допомогою кнопок. Кнопка керування визначає стани або створює групи кнопок для додаткових компонентів, наприклад панелей інструментів.

Державний

Додати data-loading-text="Loading..."для використання стану завантаження на кнопці.

Ця функція застаріла з версії 3.3.5 і була видалена у версії 4.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Одинарний перемикач

Додайте data-toggle="button", щоб активувати перемикання на одній кнопці.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Прапорець / Радіо

Додайте data-toggle="buttons"до .btn-groupвмісту прапорець або радіовведення, щоб увімкнути перемикання у відповідних стилях.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

методи

$().button('toggle')

Перемикає стан натискання. Надає кнопці вигляд, що вона була активована.

$().button('reset')

Скидає стан кнопки - замінює текст оригінальним текстом. Цей метод є асинхронним і повертається до фактичного завершення скидання.

$().button(string)

Змінює текст на будь-який текстовий стан, визначений даними.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Згорнути collapse.js

Гнучкий плагін, який використовує декілька класів для легкого перемикання.

приклад

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

• .collapseприховує вміст
• .collapsingзастосовується під час переходів
• .collapse.inпоказує вміст

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

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Приклад баяна

Розширте поведінку згортання за замовчуванням, щоб створити гармошку з компонентом панелі.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Також можна замінити .panel-bodys на .list-groups.

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.in shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in component-animations.less.

Via data attributes

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$('.collapse').collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).

.collapse('show')

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).

.collapse('hide')

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

Examples

Previous Next

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Optional captions

Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Usage

Multiple carousels

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Both events have the following additional properties:

• direction: The direction in which the carousel is sliding (either "left" or "right").
• relatedTarget: The DOM element that is being slid into place as the active item.

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Example

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin.

Usage

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Note: Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug.

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

1. To start, the plugin adds .affix-top to indicate the element is in its top-most position. At this point no CSS positioning is required.
2. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's CSS).
3. If a bottom offset is defined, scrolling past it should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

Follow the above steps to set your CSS for either of the usage options below.

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Via JavaScript

Call the affix plugin via JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Methods

.affix(options)

Activates your content as affixed content. Accepts an optional options object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix, .affix-top, and .affix-bottom classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

$('#myAffix').affix('checkPosition')

Events

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.