Преглед

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

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

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

И двете bootstrap.jsсъдържат bootstrap.min.jsвсички добавки в един файл. Включете само един.

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

Някои добавки и CSS компоненти зависят от други добавки. Ако включвате плъгини поотделно, не забравяйте да проверите за тези зависимости в документите. Също така имайте предвид, че всички добавки зависят от jQuery (това означава, че jQuery трябва да бъде включен преди файловете на добавките). Консултирайте се с насbower.json , за да видите кои версии на jQuery се поддържат.

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

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

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

$(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) на вашите потребители и/или добавете свои собствени персонализирани резервни варианти.

Библиотеки на трети страни

Bootstrap не поддържа официално JavaScript библиотеки на трети страни като Prototype или jQuery UI. Въпреки .noConflictсъбитията и пространството от имена, може да има проблеми със съвместимостта, които трябва да коригирате сами.

Преходи 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

Модалните са рационализирани, но гъвкави диалогови подкани с минимално необходимата функционалност и интелигентни настройки по подразбиране.

Множество отворени модали не се поддържат

Уверете се, че не отваряте модал, докато друг все още е видим. Показването на повече от един модал наведнъж изисква персонализиран код.

Поставяне на модално маркиране

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

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

Има някои предупреждения по отношение на използването на модали на мобилни устройства. Вижте нашите документи за поддръжка на браузъра за подробности.

Поради начина, по който 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>

Направете модалите достъпни

Не забравяйте да добавите role="dialog"и aria-labelledby="...", препращайки към модалното заглавие, към .modalи role="document"към .modal-dialogсамия.

Освен това можете да дадете описание на вашия модален диалог с aria-describedbyon .modal.

Вграждане на видеоклипове в YouTube

Вграждането на видеоклипове в YouTube в модални изисква допълнителен JavaScript, който не е в Bootstrap, за автоматично спиране на възпроизвеждането и др. Вижте тази полезна публикация на Stack Overflow за повече информация.

Размери по избор

Модалите имат два незадължителни размера, достъпни чрез модификаторни класове, които да бъдат поставени в .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="".

Име Тип по подразбиране описание
фон булево или низ'static' вярно Включва елемент на модален фон. Като алтернатива, посочете staticза фон, който не затваря модала при щракване.
клавиатура булево вярно Затваря модала, когато се натисне клавиш за изход
шоу булево вярно Показва модала при инициализиране.
дистанционно път невярно

Тази опция е отхвърлена от v3.3.0 и е премахната във v4. Препоръчваме вместо това да използвате шаблони от страна на клиента или рамка за обвързване на данни или да извикате сами jQuery.load .

Ако е предоставен отдалечен URL адрес, съдържанието ще бъде заредено еднократно чрез метода на jQuery loadи инжектирано в .modal-contentdiv. Ако използвате data-api, можете алтернативно да използвате hrefатрибута, за да посочите отдалечения източник. Пример за това е показан по-долу:

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

Методи

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

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

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

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

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

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

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

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

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

Необходимо е само когато височината на модала се променя, докато е отворен.

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

събития

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

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

Тип събитие Описание
show.bs.modal Това събитие се задейства веднага, когато showсе извика методът на екземпляра. Ако е причинено от щракване, кликнатият елемент е достъпен като relatedTargetсвойство на събитието.
показано.bs.modal Това събитие се задейства, когато модалът е направен видим за потребителя (ще изчака CSS преходите да завършат). Ако е причинено от щракване, кликнатият елемент е достъпен като relatedTargetсвойство на събитието.
hide.bs.modal Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
скрит.bs.модал Това събитие се задейства, когато модалът приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат).
loaded.bs.modal Това събитие се задейства, когато модалът е заредил съдържание с помощта на remoteопцията.
$('#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()

data-toggle="dropdown"все още се изисква

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

Нито един

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

Всички падащи събития се задействат към .dropdown-menuродителския елемент.

Всички падащи събития имат relatedTargetсвойство, чиято стойност е превключващият елемент на котва.

Тип събитие Описание
show.bs.dropdown Това събитие се задейства веднага, когато се извика методът за показване на екземпляр.
показано.bs.dropdown Това събитие се задейства, когато падащото меню е направено видимо за потребителя (ще изчака CSS преходите да завършат).
hide.bs.dropdown Това събитие се задейства незабавно, когато методът за скриване на екземпляра е извикан.
hidden.bs.dropdown Това събитие се задейства, когато падащото меню свърши да бъде скрито от потребителя (ще изчака CSS преходите да завършат).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Пример в навигационната лента

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

@дебел

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi преди да разпродадат qui. Права за велосипеди от ферма до маса в Tumblr. Жилетка Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby пуловер lomo jean къси панталони, Williamsburg hoodie мини qui вероятно не сте чували за тях и жилетка trust fund culpa biodiesel wes anderson aesthetic. Nihil татуиран акузамус, cred ирония биодизел keffiyeh занаятчия ullamco consequat.

@mdo

Veniam marfa мустаци скейтборд, adipisicing fugiat velit pitchfork брада. Брадата на Фрийгън е купидата от истината на Максуини. Cupidatat four loko nisi, ea helvetica nulla carles. Татуиран cosby пуловер камион за храна, mcsweeney's quis non freegan винил. Lo-fi wes anderson +1 шивашко. Carles не естетически exercitation quis gentrify. Brooklyn adipisicing занаятчийска бира vice keytar deserunt.

един

Occaecat commodo aliqua delectus. Fap крафт бира deserunt скейтборд ea. Lomo велосипедни права adipisicing banh mi, velit ea sunt следващо ниво locavore кафе с един произход в magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur note Направи си сам минимална пратеска чанта. Cred ex in, sustainable delectus consectetur fanny pack iphone.

две

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Предполага се, че сапиенте синтезатор. Locavore sed helvetica cliche ирония, thundercats вероятно не сте чували за тях consequat суичър без глутен lo-fi fap aliquip. Labore elit placeat преди да са разпродадени, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Жилетка крафт бира сейтан готов велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Използване

Изисква навигация на Bootstrap

В момента Scrollspy изисква използването на навигационен компонент на Bootstrap за правилно подчертаване на активните връзки.

Необходими са разрешими ИД цели

Връзките на лентата за навигация трябва да имат разрешими целеви идентификатори. Например, <a href="#home">home</a>трябва да съответства на нещо в DOM като <div id="home"></div>.

Нецелевите :visibleелементи се игнорират

Целевите елементи, които не са :visibleспоред jQuery , ще бъдат игнорирани и съответните им навигационни елементи никога няма да бъдат маркирани.

Изисква относително позициониране

Без значение от метода на внедряване, 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="".

Име Тип по подразбиране описание
изместване номер 10 Пиксели за изместване отгоре при изчисляване на позицията на превъртане.

събития

Тип събитие Описание
activate.bs.scrollspy Това събитие се задейства всеки път, когато нов елемент се активира от scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Превключващи се раздели tab.js

Примерни раздели

Добавете бърза, динамична функционалност на раздели за преход през панели с локално съдържание, дори чрез падащи менюта. Вложените раздели не се поддържат.

Суров деним, вероятно не сте чували за тях дънкови шорти Остин. Nesciunt tofu stumptown aliqua, ретро синт майстор прочистване. Мустаци cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby пуловер eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis жилетка американско облекло, касапин voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Разширява навигацията с раздели

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

Използване

Активиране на раздели с възможност за разделяне чрез 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няма да бъдат задействани.

Тип събитие Описание
show.bs.tab Това събитие се задейства при показване на раздела, но преди новият раздел да бъде показан. Използвайте event.targetи event.relatedTarget, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
показано.bs.tab Това събитие се задейства при показване на раздели, след като даден раздел е бил показан. Използвайте event.targetи event.relatedTarget, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
скрий.bs.tab Това събитие се задейства, когато трябва да се покаже нов раздел (и по този начин предишният активен раздел трябва да бъде скрит). Използвайте event.targetи event.relatedTarget, за да насочите съответно текущия активен раздел и новия раздел, който скоро ще бъде активен.
скрити.bs.tab Това събитие се задейства, след като се покаже нов раздел (и по този начин предишният активен раздел е скрит). Използвайте event.targetи event.relatedTarget, за да насочите съответно предишния активен раздел и новия активен раздел.
$('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 за анимации и атрибути на данни за локално съхранение на заглавия.

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

Примери

Задръжте курсора на мишката над връзките по-долу, за да видите подсказки:

Тесни панталони следващо ниво keffiyeh вероятно не сте чували за тях. Фото кабина брада необработен деним висок печат веган чанта stumptown. Сейтан от фермата до масата, 8-битовото американско облекло на mcsweeney's fixie устойчива киноа има винил шамбре на Тери Ричардсън. Beard stumptown, cardigans banh mi lomo thundercats. Тофу биодизел уилямсбърг марфа, четири локо mcsweeney's cleanse vegan chambray. Наистина ироничен занаятчия каквото и да е keytar , scenester от ферма до маса banksy Austin twitter handle freegan cred raw denim single-origin coffee virusal.

Статична подсказка

Налични са четири опции: подравнени отгоре, отдясно, отдолу и отляво.

Четири посоки

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

Функция за включване

От съображения за производителност, подсказката и Popover data-apis са включени, което означава, че трябва да ги инициализирате сами .

Един от начините за инициализиране на всички подсказки на страница е да ги изберете по техния data-toggleатрибут:

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

Многоредови връзки

Понякога искате да добавите подсказка към хипервръзка, която обвива няколко реда. Поведението по подразбиране на плъгина за подсказки е да го центрира хоризонтално и вертикално. Добавете white-space: nowrap;към вашите котви, за да избегнете това.

Подсказките в групите бутони, групите за въвеждане и таблиците изискват специална настройка

Когато използвате подсказки за елементи в рамките на .btn-groupили .input-groupвърху елементи, свързани с таблица ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ще трябва да посочите опцията container: 'body'(документирана по-долу), за да избегнете нежелани странични ефекти (като разширяване на елемента и/ или загуба на заоблените си ъгли, когато подсказката се задейства).

Не се опитвайте да показвате подсказки върху скрити елементи

Извикването $(...).tooltip('show'), когато целевият елемент е, display: none;ще доведе до неправилно позициониране на подсказката.

Достъпни съвети за потребители на клавиатури и помощни технологии

За потребители, навигиращи с клавиатура, и по-специално потребители на помощни технологии, трябва да добавяте подсказки само към елементи, които могат да се фокусират от клавиатурата, като връзки, контроли на формуляри или произволен елемент с tabindex="0"атрибут.

Подсказките за деактивирани елементи изискват обвиващи елементи

За да добавите подсказка към елемент disabledили .disabled, поставете елемента вътре в a и вместо това <div>приложете подсказката към него.<div>

Настроики

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

Име Тип По подразбиране Описание
анимация булево вярно Приложете CSS избледняващ преход към подсказката
контейнер низ | невярно невярно

Добавя подсказката към конкретен елемент. Пример: container: 'body'. Тази опция е особено полезна, тъй като ви позволява да позиционирате подсказката в потока на документа близо до задействащия елемент - което ще попречи на подсказката да изплува от задействащия елемент по време на преоразмеряване на прозореца.

забавяне номер | обект 0

Забавяне на показването и скриването на подсказката (ms) - не се отнася за тип ръчно задействане

Ако е предоставен номер, забавянето се прилага и за скриване/показване

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

html булево невярно Вмъкнете HTML в подсказката. Ако е невярно, textметодът на jQuery ще се използва за вмъкване на съдържание в DOM. Използвайте текст, ако се притеснявате от XSS атаки.
поставяне низ | функция 'Горна част'

Как да позиционирате подсказката - горе | дъно | наляво | надясно | Автоматичен.
Когато е посочено „auto“, то динамично ще преориентира подсказката. Например, ако разположението е „автоматично вляво“, подсказката ще се покаже отляво, когато е възможно, в противен случай ще се покаже отдясно.

Когато функция се използва за определяне на разположението, тя се извиква с подсказката DOM възел като първи аргумент и задействащия елемент DOM възел като втори. Контекстът thisе зададен на екземпляра на подсказката.

селектор низ невярно Ако е предоставен селектор, обектите с подсказки ще бъдат делегирани на посочените цели. На практика това се използва, за да се даде възможност за добавяне на подсказки към динамично HTML съдържание. Вижте това и един информативен пример .
шаблон низ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Основен HTML, който да се използва при създаване на подсказка.

Подсказките titleще бъдат инжектирани в .tooltip-inner.

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

Най-външният обвиващ елемент трябва да има .tooltipкласа.

заглавие низ | функция ''

Стойност на заглавието по подразбиране, ако titleатрибутът не присъства.

Ако е дадена функция, тя ще бъде извикана с thisпрепратка към елемента, към който е прикрепена подсказката.

спусък низ "ховър фокус" Как се задейства подсказка - щракнете върху | кръжи | фокус | ръководство. Можете да подадете няколко тригера; отделете ги с интервал. manualне може да се комбинира с друг тригер.
прозорец за изглед низ | обект | функция {селектор: 'тяло', подложка: 0}

Поддържа подсказката в границите на този елемент. Пример: viewport: '#viewport'или{ "selector": "#viewport", "padding": 0 }

Ако е дадена функция, тя се извиква със задействащия елемент DOM възел като единствен аргумент. Контекстът thisе зададен на екземпляра на подсказката.

Атрибути на данни за отделни подсказки

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

Методи

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

събития

Тип събитие Описание
show.bs.tooltip Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано.bs.tooltip Това събитие се задейства, когато подсказката е направена видима за потребителя (ще изчака CSS преходите да завършат).
hide.bs.tooltip Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
hidden.bs.tooltip Това събитие се задейства, когато подсказката свърши да бъде скрита от потребителя (ще изчака CSS преходите да завършат).
вмъкнато.bs.tooltip Това събитие се задейства след show.bs.tooltipсъбитието, когато шаблонът за подсказка е добавен към DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Добавете малки наслагвания на съдържание, като тези на iPad, към всеки елемент за съхраняване на вторична информация.

Изскачащи съобщения, чието заглавие и съдържание са с нулева дължина, никога не се показват.

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

Popovers изискват плъгинът за подсказки да бъде включен във вашата версия на Bootstrap.

Функция за включване

От съображения за производителност, подсказката и Popover data-apis са включени, което означава, че трябва да ги инициализирате сами .

Един от начините за инициализиране на всички изскачащи съобщения на страница е да ги изберете по техния data-toggleатрибут:

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

Изскачащите екрани в групи бутони, групи за въвеждане и таблици изискват специална настройка

Когато използвате изскачащи елементи върху елементи в рамките на .btn-groupили .input-group, или върху елементи, свързани с таблица ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), ще трябва да посочите опцията container: 'body'(документирана по-долу), за да избегнете нежелани странични ефекти (като разширяване на елемента и/ или загуба на заоблените си ъгли, когато се задейства popover).

Не се опитвайте да показвате изскачащи елементи върху скрити елементи

Извикването $(...).popover('show'), когато целевият елемент е, display: none;ще доведе до неправилно позициониране на изскачащия прозорец.

Изскачащите елементи на деактивирани елементи изискват обвиващи елементи

За да добавите popover към a disabledили .disabledелемент, поставете елемента вътре в a <div>и вместо това приложете popover към <div>него.

Многоредови връзки

Понякога искате да добавите изскачащ прозорец към хипервръзка, която обвива няколко реда. Поведението по подразбиране на popover плъгина е да го центрира хоризонтално и вертикално. Добавете white-space: nowrap;към вашите котви, за да избегнете това.

Примери

Статично изскачане

Налични са четири опции: подравнени отгоре, отдясно, отдолу и отляво.

Popover горнище

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Изскачане надясно

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover дъно

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповър наляво

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Демо на живо

<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>етикета, а не маркера <button>, и също трябва да включите атрибутите role="button"и .tabindex

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

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

Добавя изскачащия прозорец към конкретен елемент. Пример: container: 'body'. Тази опция е особено полезна, тъй като ви позволява да позиционирате изскачащия прозорец в потока на документа близо до задействащия елемент - което ще попречи на изскачащия прозорец да се отдалечи от задействащия елемент по време на преоразмеряване на прозореца.

съдържание низ | функция ''

Стойност на съдържанието по подразбиране, ако data-contentатрибутът не присъства.

Ако е дадена функция, тя ще бъде извикана с нейната thisпрепратка, зададена към елемента, към който е прикрепено изскачащото изображение.

забавяне номер | обект 0

Забавяне на показването и скриването на изскачащия прозорец (ms) - не се отнася за тип ръчно задействане

Ако е предоставен номер, забавянето се прилага и за скриване/показване

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

html булево невярно Вмъкнете HTML в изскачащия прозорец. Ако е невярно, textметодът на jQuery ще се използва за вмъкване на съдържание в DOM. Използвайте текст, ако се притеснявате от XSS атаки.
поставяне низ | функция "точно"

Как да позиционирате popover - горе | дъно | наляво | надясно | Автоматичен.
Когато е посочено „auto“, то динамично ще преориентира изскачащия прозорец. Например, ако разположението е „автоматично вляво“, изскачащият прозорец ще се показва отляво, когато е възможно, в противен случай ще се показва отдясно.

Когато функция се използва за определяне на разположението, тя се извиква с изскачащия DOM възел като първи аргумент и задействащия елемент DOM възел като втори. Контекстът thisе зададен на изскачащия екземпляр.

селектор низ невярно Ако е предоставен селектор, изскачащите обекти ще бъдат делегирани на посочените цели. На практика това се използва, за да се даде възможност за добавяне на изскачащи съобщения към динамично HTML съдържание. Вижте това и един информативен пример .
шаблон низ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Основен HTML за използване при създаване на изскачащ прозорец.

Popover's titleще бъдат инжектирани в .popover-title.

Popover's contentще бъдат инжектирани в .popover-content.

.arrowще се превърне в стрелата на popover.

Най-външният обвиващ елемент трябва да има .popoverкласа.

заглавие низ | функция ''

Стойност на заглавието по подразбиране, ако titleатрибутът не присъства.

Ако е дадена функция, тя ще бъде извикана с нейната thisпрепратка, зададена към елемента, към който е прикрепено изскачащото изображение.

спусък низ 'клик' Как се задейства popover - щракнете върху | кръжи | фокус | ръководство. Можете да подадете няколко тригера; отделете ги с интервал. manualне може да се комбинира с друг тригер.
прозорец за изглед низ | обект | функция {селектор: 'тяло', подложка: 0}

Поддържа popover в границите на този елемент. Пример: viewport: '#viewport'или{ "selector": "#viewport", "padding": 0 }

Ако е дадена функция, тя се извиква със задействащия елемент DOM възел като единствен аргумент. Контекстът thisе зададен на изскачащия екземпляр.

Атрибути на данни за отделни изскачащи съобщения

Опциите за отделни изскачащи екрани могат алтернативно да бъдат определени чрез използването на атрибути на данни, както е обяснено по-горе.

Методи

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

събития

Тип събитие Описание
show.bs.popover Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано.bs.popover Това събитие се задейства, когато изскачащият прозорец е направен видим за потребителя (ще изчака CSS преходите да завършат).
hide.bs.popover Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
скрити.bs.popover Това събитие се задейства, когато popover приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат).
вмъкнато.bs.popover Това събитие се задейства след show.bs.popoverсъбитието, когато изскачащият шаблон е добавен към DOM.
$('#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 разкрива няколко събития за свързване с функцията за предупреждение.

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

Бутони button.js

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

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

Firefox поддържа състояния на контрол на формуляра (забрана и проверка) при зареждания на страници . Заобиколно решение за това е да използвате autocomplete="off". Вижте грешка в Mozilla #654072 .

Държавен

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

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

Използвайте каквото състояние желаете!

За целите на тази демонстрация ние използваме data-loading-textи $().button('loading'), но това не е единственото състояние, което можете да използвате. Вижте повече за това по-долу в $().button(string)документацията .

<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", за да активирате превключване на един бутон.

Предварително превключените бутони се нуждаят от .activeиaria-pressed="true"

За бутони с предварително превключване трябва да добавите .activeкласа и aria-pressed="true"атрибута към buttonсебе си.

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

Кутия за отметка / Радио

Добавете data-toggle="buttons"към .btn-groupсъдържащо квадратче за отметка или радио входове, за да активирате превключване в съответните им стилове.

Необходими са предварително избрани опции.active

За предварително избрани опции трябва сами да добавите .activeкласа към входа .label

Състоянието на визуална отметка се актуализира само при щракване

Ако маркираното състояние на бутон с квадратче за отметка се актуализира, без да се задейства clickсъбитие на бутона (напр. чрез <input type="reset">или чрез настройка на checkedсвойството на входа), ще трябва сами да превключите .activeкласа на входа .label

<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

Гъвкав плъгин, който използва няколко класа за лесно превключване.

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

Свиването изисква приставката за преходи да бъде включена във вашата версия на Bootstrap.

Пример

Щракнете върху бутоните по-долу, за да покажете или скриете друг елемент чрез промени в класа:

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

Можете да използвате връзка с hrefатрибута или бутон с data-targetатрибута. И в двата случая data-toggle="collapse"се изисква.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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>

Пример за акордеон

Разширете поведението на свиване по подразбиране, за да създадете акордеон с панелния компонент.

Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
<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.

  • Bootply
  • Един itmus ac facilin
  • Втори ерос

Направете контролите за разгъване/свиване достъпни

Не забравяйте да добавите aria-expandedкъм контролния елемент. Този атрибут изрично дефинира текущото състояние на сгъваемия елемент за екранни четци и подобни помощни технологии. Ако сгъваемият елемент е затворен по подразбиране, той трябва да има стойност aria-expanded="false". Ако сте задали сгъваемия елемент да бъде отворен по подразбиране с помощта на inкласа, aria-expanded="true"вместо това задайте на контролата. Плъгинът автоматично ще превключва този атрибут въз основа на това дали сгъваемият елемент е бил отворен или затворен.

Освен това, ако вашият контролен елемент е насочен към един сгъваем елемент – т.е. data-targetатрибутът сочи към idселектор – можете да добавите допълнителен aria-controlsатрибут към контролния елемент, съдържащ idна сгъваемия елемент. Съвременните екранни четци и подобни помощни технологии използват този атрибут, за да предоставят на потребителите допълнителни преки пътища за навигация директно до самия сгъваем елемент.

Използване

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

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

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

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

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

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

Чрез JavaScript

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

$('.collapse').collapse()

Настроики

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

Име Тип по подразбиране описание
родител селектор невярно Ако е осигурен селектор, тогава всички сгъваеми елементи под посочения родител ще бъдат затворени, когато се покаже този свиваем елемент. (подобно на традиционното поведение на акордеон - това зависи от panelкласа)
превключвам булево вярно Превключва сгъваемия елемент при извикване

Методи

.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 разкрива няколко събития за свързване към функционалността за свиване.

Тип събитие Описание
show.bs.collapse Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано.bs.свиване Това събитие се задейства, когато елементът на свиване е направен видим за потребителя (ще изчака CSS преходите да завършат).
hide.bs.collapse Това събитие се задейства веднага след hideизвикване на метода.
hidden.bs.collapse Това събитие се задейства, когато елемент на свиване е скрит от потребителя (ще изчака CSS преходите да завършат).
$('#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 там и той ще бъде автоматично подравнен и форматиран.

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

Име Тип по подразбиране описание
интервал номер 5000 Времето за забавяне между автоматичното циклиране на елемент. Ако е невярно, въртележката няма да се завърти автоматично.
пауза низ | нула "хвърча" Ако е зададено на "hover", поставя на пауза въртенето на въртележката на mouseenterи възобновява въртенето на въртележката на mouseleave. Ако е зададено на null, задържането на курсора на мишката върху въртележката няма да я постави на пауза.
обвивам булево вярно Дали въртележката трябва да се върти непрекъснато или да има трудни спирания.
клавиатура булево вярно Дали въртележката трябва да реагира на събития от клавиатурата.

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

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

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

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

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

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

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

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

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

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

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

Тип събитие Описание
slide.bs.carousel Това събитие се задейства веднага, когато slideсе извика методът на екземпляра.
slid.bs.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".

Име Тип по подразбиране описание
изместване номер | функция | обект 10 Пиксели за изместване от екрана при изчисляване на позицията на превъртане. Ако е предоставено едно число, отместването ще се приложи както в горната, така и в долната посока. За да осигурите уникално, долно и горно отместване, просто осигурете обект offset: { top: 10 }или offset: { top: 10, bottom: 5 }. Използвайте функция, когато трябва да изчислите динамично отместване.
цел селектор | възел | jQuery елемент windowобекта _ Указва целевия елемент на афикса.

Методи

.affix(options)

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

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

.affix('checkPosition')

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

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

събития

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

Тип събитие Описание
affix.bs.affix Това събитие се задейства непосредствено преди елементът да бъде прикрепен.
affixed.bs.affix Това събитие се задейства, след като елементът е прикрепен.
affix-top.bs.affix Това събитие се задейства непосредствено преди елементът да бъде прикрепен отгоре.
affixed-top.bs.affix Това събитие се задейства, след като елементът е бил прикрепен отгоре.
affix-bottom.bs.affix Това събитие се задейства непосредствено преди елементът да бъде прикрепен отдолу.
affixed-bottom.bs.affix Това събитие се задейства, след като елементът е бил прикрепен отдолу.