Преглед

Индивидуално или съставено

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

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

Можете да използвате всички добавки за Bootstrap само чрез API за маркиране, без да пишете нито един ред JavaScript. Това е първокласният API на Bootstrap и трябва да бъде вашето първо внимание, когато използвате плъгин.

Въпреки това в някои ситуации може да е желателно да изключите тази функционалност. Следователно, ние също така предоставяме възможност за деактивиране на API на атрибута на данните чрез развързване на всички събития в пространството от имена на документа с data-api. Това изглежда така:

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

Като алтернатива, за да се насочите към конкретен плъгин, просто включете името на плъгина като пространство от имена заедно с пространството от имена на 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 с други UI рамки. При тези обстоятелства понякога могат да възникнат сблъсъци в пространството на имена. Ако това се случи, можете да извикате .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

Модали 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 -->

Различно модално съдържание въз основа на бутона за задействане

Имате куп бутони, които задействат един и същ модал, само с малко различно съдържание? Използвайте event.relatedTargetи HTML data-*атрибути (възможно чрез jQuery ), за да променяте съдържанието на модала в зависимост от това кой бутон е щракнат. Вижте документите за модални събития за подробности относно 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;приложен.

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

За да добавите лесно scrollspy поведение към вашата навигация в горната лента, добавете 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, ще трябва да извикате метода за опресняване по следния начин:

$('[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"върху елемент. Добавянето на класове navи nav-tabsкъм раздела ще приложи стила на разделаul Bootstrap , докато добавянето на класовете и ще приложи стила на хапчето .navnav-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>s с 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, написан от Jason Frame; Подсказките са актуализирана версия, която не разчита на изображения, използва 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настъпи събитието). Това се счита за "ръчно" задействане на popover. Изскачащи съобщения, чието заглавие и съдържание са с нулева дължина, никога не се показват.

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

.popover('hide')

Скрива изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащото съобщение да е действително скрито (т.е. преди да hidden.bs.popoverсе случи събитието). Това се счита за "ръчно" задействане на popover.

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

.popover('toggle')

Превключва изскачащия прозорец на елемент. Връща се към повикващия, преди изскачащият прозорец действително да е бил показан или скрит (т.е. преди събитието shown.bs.popoverили да hidden.bs.popoverсе появи). Това се счита за "ръчно" задействане на popover.

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

.popover('destroy')

Скрива и унищожава popover на елемент. Popovers, които използват делегиране (които се създават с помощта на 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"атрибута. (Не е необходимо, когато използвате автоматичното инициализиране на API за данни.)

$().alert('close')

Затваря предупреждение, като го премахва от DOM. Ако класовете .fadeи .inприсъстват в елемента, предупреждението ще избледнее, преди да бъде премахнато.

събития

Плъгинът за предупреждение на Bootstrap разкрива няколко събития за свързване с функцията за предупреждение.

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

Бутони button.js

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Държавен

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

Тази функция е отхвърлена от v3.3.5 и е премахната във v4.

<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.

Използване

Плъгинът за свиване използва няколко класа, за да се справи с тежкото повдигане:

• .collapseскрива съдържанието
• .collapse.inпоказва съдържанието
• .collapsingсе добавя, когато преходът започне, и се премахва, когато приключи

Тези класове могат да бъдат намерени в component-animations.less.

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

Просто добавете data-toggle="collapse"и data-targetкъм елемента, за да присвоите автоматично управление на сгъваем елемент. Атрибутът data-targetприема CSS селектор, към който да се приложи свиването. Не забравяйте да добавите класа collapseкъм сгъваемия елемент. Ако искате да е отворен по подразбиране, добавете допълнителния клас in.

За да добавите подобно на акордеон групово управление към сгъваема контрола, добавете атрибута data data-parent="#selector". Обърнете се към демонстрацията, за да видите това в действие.

Чрез JavaScript

Активирайте ръчно с:

$('.collapse').collapse()

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-parent="".

Методи

.collapse(options)

Активира вашето съдържание като сгъваем елемент. Приема опции по избор object.

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

събития

Класът за свиване на Bootstrap разкрива няколко събития за свързване към функционалността за свиване.

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

Въртележка carousel.js

Компонент за слайдшоу за циклично преминаване през елементи, като въртележка. Вложените въртележки не се поддържат.

Примери

Предишен Следващия

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

Надписи по избор

Добавяйте лесно надписи към вашите слайдове с .carousel-captionелемента във всеки .item. Поставете почти всеки незадължителен HTML там и той ще бъде автоматично подравнен и форматиран.

Етикет на първия слайд

Nulla vitae elit libero, a pharetra augue mollis interdum.

Втори етикет на слайд

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Етикет на трети слайд

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Предишен Следващия

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

Използване

Множество въртележки

Въртележките изискват използването на idна най-външния контейнер ( .carousel), за да функционират правилно контролите на въртележката. Когато добавяте няколко въртележки или когато променяте въртележка id, не забравяйте да актуализирате съответните контроли.

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

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

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

Чрез JavaScript

Ръчно извикване на въртележка с:

$('.carousel').carousel()

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-interval="".

Методи

.carousel(options)

Инициализира въртележката с незадължителни опции objectи започва да преминава през елементи.

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

.carousel('cycle')

Преминава през елементите на въртележката отляво надясно.

.carousel('pause')

Спира въртележката да се движи през елементи.

.carousel(number)

Цикълира въртележката до конкретен кадър (базиран на 0, подобно на масив).

.carousel('prev')

Цикли към предишния елемент.

.carousel('next')

Преминава към следващия елемент.

събития

Carousel класът на Bootstrap разкрива две събития за свързване към функционалността на въртележката.

И двете събития имат следните допълнителни свойства:

• direction: Посоката, в която се плъзга въртележката ( "left"или "right").
• relatedTarget: DOM елементът, който се плъзга на място като активен елемент.

Всички каруселни събития се задействат в самата въртележка (т.е. в <div class="carousel">).

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

Прикрепете affix.js

Пример

Приставката за афикс се включва position: fixed;и изключва, като емулира ефекта, открит с position: sticky;. Поднавигацията вдясно е демонстрация на живо на приставката за афикс.

Използване

Използвайте приставката за афикс чрез атрибути на данни или ръчно с вашия собствен JavaScript. И в двата случая трябва да предоставите CSS за позиционирането и ширината на вашето прикрепено съдържание.

Забележка: Не използвайте приставката за афикс върху елемент, съдържащ се в относително позициониран елемент, като например изтеглена или избутана колона, поради грешка при рендиране на Safari .

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

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

Ето как работи приставката за афикси:

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

Следвайте стъпките по-горе, за да настроите вашия CSS за някоя от опциите за използване по-долу.

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

За да добавите лесно поведение на афикс към всеки елемент, просто добавете data-spy="affix"към елемента, който искате да шпионирате. Използвайте отмествания, за да определите кога да превключвате фиксирането на елемент.

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

Чрез JavaScript

Извикайте приставката за афикс чрез JavaScript:

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

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-offset-top="200".

Методи

.affix(options)

Активира вашето съдържание като прикрепено съдържание. Приема опции по избор object.

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

.affix('checkPosition')

Преизчислява състоянието на афикса въз основа на размерите, позицията и позицията на превъртане на съответните елементи. Класовете .affix, .affix-top, и .affix-bottomсе добавят или премахват от прикрепеното съдържание според новото състояние. Този метод трябва да се извиква всеки път, когато размерите на прикрепеното съдържание или целевия елемент се променят, за да се осигури правилно позициониране на прикрепеното съдържание.

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

събития

Плъгинът за афикси на Bootstrap разкрива няколко събития за закачане на функционалността за афикси.