Преглед

Појединачно или састављено

Додаци се могу укључити појединачно (користећи Боотстрап појединачне *.jsдатотеке), или све одједном (користећи bootstrap.jsили минимизирани bootstrap.min.js).

Користећи преведени ЈаваСцрипт

Оба bootstrap.jsи bootstrap.min.jsсадрже све додатке у једној датотеци. Укључите само једну.

Зависности додатака

Неки додаци и ЦСС компоненте зависе од других додатака. Ако укључите додатке појединачно, проверите да ли постоје ове зависности у документима. Такође имајте на уму да сви додаци зависе од јКуери-ја (то значи да јКуери мора бити укључен пре датотека додатака). Консултујте нашеbower.json да видите које су верзије јКуери-ја подржане.

Атрибути података

Можете користити све додатке за Боотстрап искључиво преко АПИ-ја за означавање без писања ниједног реда ЈаваСцрипт-а. Ово је Боотстрап-ов првокласни АПИ и требало би да буде ваша прва пажња када користите додатак.

Међутим, у неким ситуацијама може бити пожељно да искључите ову функцију. Стога, такође пружамо могућност да онемогућимо АПИ атрибута података тако што ћемо опозвати све догађаје у документу са простором имена са data-api. ово изгледа овако:

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

Алтернативно, да бисте циљали одређени додатак, само укључите име додатка као именски простор заједно са дата-апи именским простором овако:

$(document).off('.alert.data-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

Нема сукоба

Понекад је потребно користити додатке за Боотстрап са другим оквирима корисничког интерфејса. У овим околностима повремено се могу појавити колизије простора имена. Ако се то догоди, можете позвати .noConflictдодатак којем желите да вратите вредност.

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

Догађаји

Боотстрап обезбеђује прилагођене догађаје за јединствене радње већине додатака. Генерално, они долазе у облику инфинитива и партиципа у прошлости – где се инфинитив (нпр. show) покреће на почетку догађаја, а његов глаголски облик у прошлости (нпр. shown) се покреће по завршетку радње.

Од верзије 3.0.0, сви Боотстрап догађаји имају простор имена.

Сви инфинитивни догађаји пружају preventDefaultфункционалност. Ово пружа могућност заустављања извршења радње пре него што она почне.

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

Бројеви верзија

Верзији сваког од Боотстрап-ових јКуери додатака може се приступити преко VERSIONсвојства конструктора додатка. На пример, за додатак са описом алатки:

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

Нема посебних резерви када је ЈаваСцрипт онемогућен

Боотстрап-ови додаци се не враћају посебно грациозно када је ЈаваСцрипт онемогућен. Ако вам је стало до корисничког искуства у овом случају, користите <noscript>да објасните ситуацију (и како да поново омогућите ЈаваСцрипт) својим корисницима и/или додајте сопствене прилагођене резерве.

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

Боотстрап званично не подржава ЈаваСцрипт библиотеке трећих страна као што су Прототипе или јКуери УИ. Упркос .noConflictдогађајима у именском простору, могу постојати проблеми са компатибилношћу које морате сами да решите.

Транситионс транзиција.јс

О прелазима

За једноставне ефекте транзиције, укључите transition.jsједном уз друге ЈС датотеке. Ако користите преведену (или минимизирану) bootstrap.js, нема потребе да ово укључујете – већ је ту.

Шта је унутра

Транситион.јс је основни помоћник за transitionEndдогађаје, као и ЦСС емулатор прелаза. Користе га други додаци за проверу подршке за ЦСС прелазе и за хватање прелаза који висе.

Онемогућавање прелаза

Прелази се могу глобално онемогућити коришћењем следећег ЈаваСцрипт исечка, који мора доћи након transition.js(или bootstrap.jsили bootstrap.min.js, у зависности од случаја) учитавања:

$.support.transition = false

Модалс модал.јс

Модали су поједностављени, али флексибилни, упутства за дијалог са минималном потребном функционалношћу и паметним подразумеваним подешавањима.

Више отворених модала није подржано

Пазите да не отварате модал док је други још увек видљив. Приказивање више од једног модала истовремено захтева прилагођени код.

Постављање модалних ознака

Увек покушајте да поставите ХТМЛ код модала на позицију највишег нивоа у вашем документу да бисте избегли друге компоненте које утичу на изглед и/или функционалност модала.

Упозорења за мобилне уређаје

Постоје нека упозорења у вези са коришћењем модала на мобилним уређајима. Погледајте нашу документацију за подршку претраживача за детаље.

Због начина на који ХТМЛ5 дефинише своју семантику, autofocusХТМЛ атрибут нема ефекта у Боотстрап модалима. Да бисте постигли исти ефекат, користите неки прилагођени ЈаваСцрипт:

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

Демо уживо

Пребаците модал преко ЈаваСцрипт-а кликом на дугме испод. Клизиће надоле и избледети са врха странице.

<!-- 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-describedbyна .modal.

Уграђивање ИоуТубе видео записа

Уградња ИоуТубе видео снимака у модале захтева додатни ЈаваСцрипт који није у Боотстрапу да би се аутоматски зауставила репродукција и још много тога. Погледајте ову корисну објаву Стацк Оверфлов за више информација.

Опционе величине

Модали имају две опционе величине, доступне преко класа модификатора које се постављају на .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>

Коришћењем мрежног система

Да бисте искористили предности Боотстрап грид система унутар модалног, само угнездите .rowс унутар, .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и ХТМЛ data-*атрибуте (могуће преко јКуери ) да бисте променили садржај модала у зависности од тога на које дугме сте кликнули. Погледајте документацију о модалним догађајима за детаље о relatedTarget,

...више дугмади...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Употреба

Модални додатак укључује ваш скривени садржај на захтев, преко атрибута података или ЈаваСцрипт-а. Такође додаје .modal-openда се <body>заобиђе подразумевано понашање померања и генерише а .modal-backdropда би се обезбедила област клика за одбацивање приказаних модала када се кликне ван модалног.

Преко атрибута података

Активирајте модал без писања ЈаваСцрипт-а. Поставите data-toggle="modal"на елемент контролера, попут дугмета, заједно са data-target="#foo"или href="#foo"да бисте циљали одређени модал за пребацивање.

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

Преко ЈаваСцрипт-а

Позовите модални са ИД myModal-ом са једном линијом ЈаваСцрипт-а:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-backdrop="".

Име тип Уобичајено Опис
позадина боолеан или стринг'static' истинито Укључује елемент модалне позадине. Алтернативно, наведите staticза позадину која не затвара модал на клик.
тастатура боолеан истинито Затвара модал када се притисне тастер за излаз
Прикажи боолеан истинито Приказује модални када се иницијализира.
даљински пут лажно

Ова опција је застарела од в3.3.0 и уклоњена је у в4. Уместо тога, препоручујемо коришћење шаблона на страни клијента или оквира за повезивање података, или да сами позовете јКуери.лоад .

Ако је удаљена УРЛ адреса, садржај ће се једном учитати преко јКуери loadметоде и убацити у .modal-contentдив. Ако користите дата-апи, алтернативно можете користити hrefатрибут да бисте навели удаљени извор. Пример овога је приказан у наставку:

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

Догађаји

Боотстрап-ова модална класа излаже неколико догађаја за спајање на модалну функционалност.

Сви модални догађаји се активирају на самом модалном (тј. на <div class="modal">).

Тип догађаја Опис
схов.бс.модал Овај догађај се покреће одмах када showсе позове метод инстанце. Ако је изазван кликом, елемент на који се кликне је доступан као relatedTargetсвојство догађаја.
приказано.бс.модал Овај догађај се покреће када модал постане видљив кориснику (сачекаће да се ЦСС транзиције доврше). Ако је изазван кликом, елемент на који се кликне је доступан као relatedTargetсвојство догађаја.
хиде.бс.модал Овај догађај се покреће одмах када hideсе позове метод инстанце.
хидден.бс.модал Овај догађај се покреће када модал заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
лоадед.бс.модал Овај догађај се покреће када модал учита садржај користећи remoteопцију.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Падајући мени дропдовн.јс

Додајте падајуће меније у скоро све помоћу овог једноставног додатка, укључујући навигациону траку, картице и таблете.

У оквиру навигационе траке

Унутар таблета

Преко атрибута података или ЈаваСцрипт-а, падајући додатак укључује скривени садржај (падајући менији) тако што укључује .openкласу на родитељској листи.

На мобилним уређајима, отварање падајућег менија додаје а .dropdown-backdropкао област за додир за затварање падајућих менија када додирнете ван менија, што је услов за исправну подршку за иОС. То значи да прелазак са отвореног падајућег менија на други падајући мени захтева додатни додир на мобилном телефону.

Напомена: 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>

Да би УРЛ-ови остали нетакнути дугмадима за везу, користите 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>

Преко ЈаваСцрипт-а

Позовите падајуће меније преко ЈаваСцрипт-а:

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

data-toggle="dropdown"још увек потребно

Без обзира да ли позивате падајући мени преко ЈаваСцрипт-а или уместо тога користите дата-апи, data-toggle="dropdown"увек је потребно да буде присутан на елементу покретача падајућег менија.

Ниједан

$().dropdown('toggle')

Пребацује падајући мени дате навигационе траке или навигације са картицама.

Сви догађаји падајућег менија се активирају на .dropdown-menuродитељском елементу 'с.

Сви догађаји падајућег менија имају relatedTargetсвојство чија је вредност преклопни елемент сидра.

Тип догађаја Опис
схов.бс.дропдовн Овај догађај се покреће одмах када се позове метода схов инстанце.
приказано.бс.падајући мени Овај догађај се покреће када падајући мени постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
хиде.бс.дропдовн Овај догађај се покреће одмах када се позове метод сакривања инстанце.
хидден.бс.дропдовн Овај догађај се покреће када се падајући мени заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

СцроллСпи сцроллспи.јс

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

Додатак СцроллСпи служи за аутоматско ажурирање навигационих циљева на основу положаја померања. Померајте област испод траке за навигацију и гледајте како се активна класа мења. Падајуће подставке ће такође бити истакнуте.

@дебео

Оглас хеланке кеитар, брунцх ид арт парти долор лаборе. Виле ир еним ло-фи пре него што су распродали куи. Тумблр права на бицикл од фарме до стола. Аним кеффииех царлес кардиган. Фото кабина Велита сеитана мцсвеенеија 3 волф моон ируре. Цосби џемпер ломо јеан шортс, Виллиамсбург хоодие миним куи за које вероватно нисте чули и кардиган труст фонд цулпа биодиесел вес андерсон аестхетиц. Нихил тетовирани акузамус, цред иронија биодизел кеффииех артисан улламцо цонсекуат.

@мдо

Вениам марфа бркови скејтборд, адиписицинг фугиат велит питцхфорк брада. Фрееган брада аликуа цупидатат мцсвеенеи'с веро. Цупидатат фоур локо ниси, еа хелветица нулла царлес. Тетовирани косби џемпер камион за храну, мцсвеенеи'с куис нон фрееган винил. Ло-фи вес андерсон +1 сарториал. Царлесова неестетска вежба куис гентрифи. Брооклин адиписицинг занатско пиво вице кеитар десерунт.

једно

Оццаецат цоммодо аликуа делецтус. Фап црафт пиво десерунт скејтборд еа. Ломо бицицле ригхтс адиписицинг банх ми, велит еа сунт нект левел лоцаворе кафа једног порекла у магна вениам. Хигх лифе ид винил, ецхо парк цонсекуат куис аликуип банх ми питцхфорк. Веро ВХС ест адиписицинг. Цонсецтетур ниси ДИИ мини торба за курир. Цред ек ин, одрживи делецтус цонсецтетур фанни пацк ипхоне.

два

У инцидентном ехо парку, проидентни мајстор официа десерунт мцсвеенеи-а чисти тхундерцатс сапиенте вениам. Екцептеур ВХС елит, проидент Схоредитцх +1 биодизел лабораторијско занатско пиво. Путници кафе једног порекла ируре четири локо, цупидатат Терри рицхардсон мастер цлеансе. Претпостављам да вероватно нисте чули за њих арт парти фанни пацк, тетовирани нулла кардиган темпор ад. Проидент волф несциунт сарториал кеффииех еу банх ми сустаинабле. Елит волф волуптате, ло-фи еа портланд пре него што су распродали четири лока. Лоцаворе еним ноструд млксхк брооклин несциунт.

три

Оглас хеланке кеитар, брунцх ид арт парти долор лаборе. Виле ир еним ло-фи пре него што су распродали куи. Тумблр права на бицикл од фарме до стола. Аним кеффииех царлес кардиган. Фото кабина Велита сеитана мцсвеенеија 3 волф моон ируре. Цосби џемпер ломо јеан шортс, Виллиамсбург хоодие миним куи за које вероватно нисте чули и кардиган труст фонд цулпа биодиесел вес андерсон аестхетиц. Нихил тетовирани акузамус, цред иронија биодизел кеффииех артисан улламцо цонсекуат.

Кеитар твее блог, цулпа мессенгер баг марфа вхатевер делецтус фоод труцк. Сапиенте синтх ид аццептнда. Лоцаворе сед хелветица клише иронија, тхундерцатс за које вероватно нисте чули као последица ло-фи фап аликуипа дуксерица без глутена. Лаборе елит плацеат пре него што су распродати, Терри Рицхардсон проидент бранч несциунт куис цосби џемпер париатур кеффииех у хелветица артисан. Кардиган занатско пиво сеитан реадимаде велит. ВХС цхамбраи лаборис темпор вениам. Аним моллит миним цоммодо улламцо тхундерцатс.

Употреба

Захтева Боотстрап навигацију

Сцроллспи тренутно захтева употребу навигационе компоненте Боотстрап за правилно истицање активних веза.

Потребни су решиви циљеви ИД-а

Везе за Навбар морају имати разлучиве циљеве ИД-а. На пример, <a href="#home">home</a>мора одговарати нечему у ДОМ-у као што је <div id="home"></div>.

Нециљни :visibleелементи су занемарени

Циљни елементи који нису у :visibleскладу са јКуери -јем биће занемарени и њихове одговарајуће навигационе ставке никада неће бити истакнуте.

Захтева релативно позиционирање

Без обзира на метод имплементације, сцроллспи захтева употребу position: relative;на елементу који шпијунирате. У већини случајева ово је <body>. Када скролујете друге елементе осим <body>, обавезно имате heightсет и overflow-y: scroll;примењен.

Преко атрибута података

Да бисте лако додали понашање скроловања вашој навигацији на горњој траци, додајте data-spy="scroll"елементу који желите да шпијунирате (најчешће би то био <body>). Затим додајте data-targetатрибут са ИД-ом или класом родитељског елемента било које Боотстрап .navкомпоненте.

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>

Преко ЈаваСцрипт-а

Након што додате position: relative;свој ЦСС, позовите сцроллспи преко ЈаваСцрипт-а:

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

Методе

.scrollspy('refresh')

Када користите сцроллспи у комбинацији са додавањем или уклањањем елемената из ДОМ-а, мораћете да позовете метод освежавања на следећи начин:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-offset="".

Име тип Уобичајено Опис
офсет број 10 Пиксели за померање од врха приликом израчунавања положаја померања.

Догађаји

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

Картице које могу да се преклопе таб.јс

Пример картица

Додајте брзу, динамичку функционалност картица за прелазак кроз окна локалног садржаја, чак и преко падајућих менија. Угнежђене картице нису подржане.

Сирови тексас за који вероватно нисте чули за фармерке Аустин. Несциунт тофу стумптовн аликуа, ретро синт мајстор за чишћење. Бркови клише темпор, Виллиамсбург Царлес веганска хелветица. Репрехендерит бутцхер ретро кеффииех дреамцатцхер синтх. Цосби џемпер еу банх ми, куи ируре Терри рицхардсон ек скуид. Аликуип плацеат салвиа циллум ипхоне. Сеитан аликуип куис кардиган америчка одећа, месар волуптате ниси куи.

Фикси локаворе камион са храном, лигња кафе од једног порекла Ацузамуса Мексвинија марфа нулла. Екерцитатион +1 лаборе велит, блог сарториал ПБР хеланке следећег нивоа вес андерсон артисан фоур локо фарм-то-табле црафт беер твее. Куи пхото боотх висока штампа, цоммодо еним црафт пиво млксхк аликуип јеан шортс улламцо ад винил циллум ПБР. Хомо ноструд органски, претпостављанда лаборе естетски магна делецтус моллит. Кеитар хелветица ВХС салвиа ир, веро магна велит сапиенте лаборе стумптовн. Веган фанни пакет одио циллум вес андерсон 8-бит, одрживи џинс шортс брада и уради сам етичка кривица Терри рицхардсон биодизел. Уметничка забава сценестер стумптовн, тумблр месар веро синт куи сапиенте аццамус тетовирани ехо парк.

Проширује навигацију са картицама

Овај додатак проширује компоненту за навигацију са картицама да би додала области са картицама.

Употреба

Омогућите картице са картицама преко ЈаваСцрипт-а (свака картица треба да се активира појединачно):

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

Означавање

Можете активирати навигацију по картици или таблетама без писања ЈаваСцрипта једноставним навођењем data-toggle="tab"или data-toggle="pill"на елементу. Додавањем класа и на картицу navпримениће се стил картице Боотстрап , док ће се додавањем и класа применити стил пилуле .nav-tabsulnavnav-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циљни чвор контејнера у ДОМ-у. У горњим примерима, картице су <a>с са data-toggle="tab"атрибутима.

.tab('show')

Бира дату картицу и приказује придружени садржај. Било која друга картица која је претходно изабрана постаје поништена, а њен повезани садржај је скривен. Враћа се позиваоцу пре него што је табулатор стварно приказан (тј. пре него што се shown.bs.tabдогађај деси).

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

Догађаји

Када се прикаже нова картица, догађаји се активирају следећим редоследом:

  1. hide.bs.tab(на тренутно активној картици)
  2. show.bs.tab(на картици која треба да се прикаже)
  3. hidden.bs.tab(на претходној активној картици, иста као за hide.bs.tabдогађај)
  4. shown.bs.tab(на ново-активној управо приказаној картици, иста као и за show.bs.tabдогађај)

Ако ниједна картица већ није била активна, догађаји hide.bs.tabи hidden.bs.tabнеће бити покренути.

Тип догађаја Опис
схов.бс.таб Овај догађај се покреће у емисији картице, али пре него што је нова картица приказана. Користите event.targetи event.relatedTargetда бисте циљали активну картицу и претходну активну картицу (ако је доступна).
приказано.бс.таб Овај догађај се покреће у емисији картице након што се картица прикаже. Користите event.targetи event.relatedTargetда бисте циљали активну картицу и претходну активну картицу (ако је доступна).
хиде.бс.таб Овај догађај се покреће када треба да се прикаже нова картица (а самим тим и претходна активна картица треба да буде скривена). Користите event.targetи event.relatedTargetда бисте циљали тренутну активну картицу и нову картицу која ће ускоро бити активна.
хидден.бс.таб Овај догађај се покреће након што се прикаже нова картица (и стога је претходна активна картица скривена). Користите event.targetи event.relatedTargetда бисте циљали претходну активну картицу и нову активну картицу, респективно.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Тоолтипс тоолтип.јс

Инспирисан одличним јКуери.типси додатком који је написао Јасон Фраме; Алати су ажурирана верзија, која се не ослања на слике, користи ЦСС3 за анимације и атрибуте података за локално складиштење наслова.

Објашњења са насловима нулте дужине се никада не приказују.

Примери

Пређите курсором преко линкова испод да бисте видели савете са алаткама:

Уске панталоне следећег нивоа кефије за које вероватно нисте чули. Фото штанд брада сирови тексас висока штампа веганска торба за гласнике стумптовн. Сеитан од фарме до стола, мцсвеенеи'с фикие одржива киноа 8-битна америчка одећа има винил цхамбраи од терри рицхардсон-а. Брада стумптовн, кардигани банх ми ломо тхундерцатс. Тофу биодизел Виллиамсбург марфа, четири локо мцсвеенеи'с цлеансе веган цхамбраи. Заиста ироничан занатлија без обзира на кеитар , сценестер од фарме до стола Банкси Аустин твиттер обрађује фрееган цред сирови тексас извор кафе једног порекла.

Статички опис алата

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

Четири правца

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

Опт-ин функционалност

Из разлога перформанси, Тоолтип и Поповер дата-апис су укључени, што значи да их морате сами иницијализирати .

Један од начина да се иницијализују сви описи алата на страници био би да их изаберете према њиховом data-toggleатрибуту:

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

Употреба

Додатак за опис алата генерише садржај и ознаке на захтев, и подразумевано поставља описе алата након њиховог елемента окидача.

Покрени опис алатке преко ЈаваСцрипт-а:

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

Означавање

Потребна ознака за опис алата је само dataатрибут и titleна ХТМЛ елементу желите да имате опис алата. Генерисана ознака описа алата је прилично једноставна, иако захтева позицију (подразумевано, постављену на 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, ставите елемент унутар а <div>и примените га на <div>њега.

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-animation="".

Име Тип Уобичајено Опис
анимација боолеан истинито Примените прелаз са ЦСС фаде на опис алатке
контејнер стринг | лажно лажно

Додаје опис алата одређеном елементу. Пример: container: 'body'. Ова опција је посебно корисна по томе што вам омогућава да позиционирате опис алата у току документа близу елемента за окидање – што ће спречити да опис алата одлебди од елемента за окидање током промене величине прозора.

кашњење број | објекат 0

Одлагање приказивања и сакривања описа алата (мс) – не примењује се на тип ручног окидача

Ако је наведен број, кашњење се примењује и на сакривање/прикажи

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

хтмл боолеан лажно Уметните ХТМЛ у опис алата. Ако је нетачно, јКуери textметода ће се користити за уметање садржаја у ДОМ. Користите текст ако сте забринути због КССС напада.
постављање стринг | функција 'врх'

Како поставити опис алата - врх | боттом | лево | десно | ауто.
Када је наведен "ауто", он ће динамички преоријентисати опис алата. На пример, ако је положај „аутоматски лево“, опис алатке ће се приказати лево када је то могуће, у супротном ће се приказати десно.

Када се функција користи за одређивање положаја, она се позива са ДОМ чвором алатке као првим аргументом и покретачким елементом ДОМ чвором као другим. Контекст thisје постављен на инстанцу описа алата.

селектор низ лажно Ако је обезбеђен селектор, објекти описа алата ће бити делегирани наведеним циљевима. У пракси, ово се користи да би се омогућило додавање описа алата за динамички ХТМЛ садржај. Погледајте ово и информативни пример .
шаблон низ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Основни ХТМЛ који се користи приликом креирања описа алата.

Објашњење titleће бити убризгано у .tooltip-inner.

.tooltip-arrowпостаће стрелица у опису алата.

Најудаљенији елемент омотача треба да има .tooltipкласу.

наслов стринг | функција ''

Подразумевана вредност наслова ако titleатрибут није присутан.

Ако је дата функција, она ће бити позвана са својом thisреференцом постављеном на елемент за који је припојен опис алата.

Окидач низ 'фокус лебдења' Како се покреће опис алата - кликните | ховер | фокус | упутство. Можете проследити више покретача; одвојите их размаком. manualне може се комбиновати ни са једним другим окидачем.
виевпорт стринг | објекат | функција { селектор: 'тело', паддинг: 0}

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

Ако је дата функција, она се позива са ДОМ чвором покретачког елемента као јединим аргументом. Контекст 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се позове метод инстанце.
приказано.бс.опис Овај догађај се покреће када опис алата постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
хиде.бс.тоолтип Овај догађај се покреће одмах када hideсе позове метод инстанце.
хидден.бс.тоолтип Овај догађај се покреће када се опис алатке заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
инсертед.бс.тоолтип Овај догађај се покреће након show.bs.tooltipдогађаја када је шаблон објашњења додат у ДОМ.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Поповерс поповер.јс

Додајте мале слојеве садржаја, попут оних на иПад-у, било ком елементу за смештај секундарних информација.

Скочни прозори чији су и наслов и садржај нулте дужине се никада не приказују.

Зависност од додатака

Поповерс захтевају да додатак са објашњењем буде укључен у вашу верзију Боотстрапа.

Опт-ин функционалност

Из разлога перформанси, Тоолтип и Поповер дата-апис су укључени, што значи да их морате сами иницијализирати .

Један од начина да се иницијализују сви искачући прозори на страници био би да их изаберете према њиховом data-toggleатрибуту:

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

Искачући прикази у групама дугмади, групама уноса и табелама захтевају посебну поставку

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

Не покушавајте да прикажете искачуће на скривеним елементима

Позивање $(...).popover('show')када је циљни елемент display: none;довешће до погрешног позиционирања искачућег елемента.

Поповерс на онемогућеним елементима захтевају елементе омотача

Да бисте додали искачући елемент елементу disabledили .disabled, ставите елемент унутар а <div>и примените искачући прозор на <div>њега.

Везе са више линија

Понекад желите да додате искачући прозор хипервези која обавија више редова. Подразумевано понашање искачућег додатка је да га центрира хоризонтално и вертикално. Додајте white-space: nowrap;у своја сидра да бисте ово избегли.

Примери

Статички искачући приказ

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

Поповер топ

Сед посуере цонсецтетур ест ат лобортис. Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис вестибулум.

Поповер десно

Сед посуере цонсецтетур ест ат лобортис. Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис вестибулум.

Поповер боттом

Сед посуере цонсецтетур ест ат лобортис. Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис вестибулум.

Поповер лево

Сед посуере цонсецтетур ест ат лобортис. Аенеан еу лео куам. Пеллентескуе орнаре сем лациниа куам вененатис вестибулум.

Демо уживо

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

Употреба

Омогућите искачуће прозоре преко ЈаваСцрипт-а:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-animation="".

Име Тип Уобичајено Опис
анимација боолеан истинито Примените прелаз ЦСС фаде на искачући прозор
контејнер стринг | лажно лажно

Додаје искачући прозор одређеном елементу. Пример: container: 'body'. Ова опција је посебно корисна по томе што вам омогућава да позиционирате искачући део у току документа у близини покретачког елемента – што ће спречити да искачући део лебди од елемента за окидање током промене величине прозора.

садржаја стринг | функција ''

Подразумевана вредност садржаја ако data-contentатрибут није присутан.

Ако је дата функција, она ће бити позвана са својом thisреференцом постављеном на елемент за који је повезан искачући прозор.

кашњење број | објекат 0

Одлагање приказивања и сакривања искачућег екрана (мс) – не примењује се на тип ручног окидача

Ако је наведен број, кашњење се примењује и на сакривање/прикажи

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

хтмл боолеан лажно Уметните ХТМЛ у искачући прозор. Ако је нетачно, јКуери textметода ће се користити за уметање садржаја у ДОМ. Користите текст ако сте забринути због КССС напада.
постављање стринг | функција 'јел тако'

Како поставити поповер - врх | боттом | лево | десно | ауто.
Када је "ауто" наведен, динамички ће преусмерити искачући прозор. На пример, ако је положај „аутоматски лево“, искачући прозор ће се приказати на левој страни када је то могуће, у супротном ће се приказати десно.

Када се функција користи за одређивање положаја, она се позива са искачућим ДОМ чвором као првим аргументом и покретачким елементом ДОМ чвором као другим. Контекст thisје постављен на инстанцу искачућег приказа.

селектор низ лажно Ако је обезбеђен селектор, искачући објекти ће бити делегирани наведеним циљевима. У пракси, ово се користи да би се омогућило додавање искачућих садржаја динамичком ХТМЛ садржају. Погледајте ово и информативни пример .
шаблон низ '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Основни ХТМЛ који се користи приликом креирања искачућег екрана.

Поповер'с titleће бити убризган у .popover-title.

Поповер'с contentће бити убризган у .popover-content.

.arrowпостаће поповерова стрела.

Најудаљенији елемент омотача треба да има .popoverкласу.

наслов стринг | функција ''

Подразумевана вредност наслова ако titleатрибут није присутан.

Ако је дата функција, она ће бити позвана са својом thisреференцом постављеном на елемент за који је повезан искачући прозор.

Окидач низ 'кликни' Како се поповер покреће - кликните | ховер | фокус | упутство. Можете проследити више покретача; одвојите их размаком. manualне може се комбиновати ни са једним другим окидачем.
виевпорт стринг | објекат | функција { селектор: 'тело', паддинг: 0}

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

Ако је дата функција, она се позива са ДОМ чвором покретачког елемента као јединим аргументом. Контекст thisје постављен на инстанцу искачућег приказа.

Атрибути података за појединачне искачуће

Опције за појединачне искачуће опције могу се алтернативно специфицирати коришћењем атрибута података, као што је горе објашњено.

Методе

$().popover(options)

Иницијализује искачуће прозоре за колекцију елемената.

.popover('show')

Открива искачући изглед елемента. Враћа позиваоцу пре него што је искачући део заиста приказан (тј. пре него што се shown.bs.popoverдогађај деси). Ово се сматра "ручним" покретањем искачућег прозора. Скочни прозори чији су и наслов и садржај нулте дужине се никада не приказују.

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

.popover('hide')

Сакрива искачући прозор елемента. Враћа позиваоцу пре него што је искачући део заиста сакривен (тј. пре него што се hidden.bs.popoverдогађај деси). Ово се сматра "ручним" покретањем искачућег прозора.

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

.popover('toggle')

Пребацује искачући прозор елемента. Враћа позиваоцу пре него што је искачући део заиста приказан или сакривен (тј. пре него што се деси догађај shown.bs.popoverили ). hidden.bs.popoverОво се сматра "ручним" покретањем искачућег прозора.

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

.popover('destroy')

Сакрива и уништава искачући прозор елемента. Скочни прозори који користе делегирање (који се креирају помоћу опције selector) не могу се појединачно уништити на елементима окидача потомака.

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

Догађаји

Тип догађаја Опис
схов.бс.поповер Овај догађај се покреће одмах када showсе позове метод инстанце.
приказано.бс.поповер Овај догађај се покреће када искачући прозор постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).
хиде.бс.поповер Овај догађај се покреће одмах када hideсе позове метод инстанце.
хидден.бс.поповер Овај догађај се покреће када се искачући прозор заврши са сакривањем од корисника (сачекаће да се ЦСС транзиције доврше).
инсертед.бс.поповер Овај догађај се покреће након show.bs.popoverдогађаја када је шаблон за искакање додат у ДОМ.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Поруке упозорења алерт.јс

Пример упозорења

Додајте функцију одбацивања свим порукама упозорења помоћу овог додатка.

Када користите .closeдугме, оно мора бити прво дете .alert-dismissibleи ниједан текстуални садржај не сме да буде испред њега у маркупу.

Употреба

Само додајте data-dismiss="alert"дугме за затварање да бисте аутоматски дали функцију за затварање упозорења. Затварање упозорења уклања га из ДОМ-а.

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

Да би ваша упозорења користила анимацију при затварању, уверите се да имају .fadeи .inкласе већ примењене на њих.

Методе

$().alert()

Прави да упозорење ослушкује догађаје клика на елементе потомке који имају data-dismiss="alert"атрибут. (Није неопходно када се користи аутоматска иницијализација дата-апи-ја.)

$().alert('close')

Затвара упозорење уклањањем из ДОМ-а. Ако су класе .fadeи .inприсутне на елементу, упозорење ће нестати пре него што се уклони.

Догађаји

Боотстрап додатак за упозорење излаже неколико догађаја за повезивање са функцијом упозорења.

Тип догађаја Опис
цлосе.бс.алерт Овај догађај се покреће одмах када closeсе позове метод инстанце.
затворено.бс.алерт Овај догађај се покреће када је упозорење затворено (сачекаће да се ЦСС транзиције доврше).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Буттонс буттон.јс

Урадите више са дугмадима. Контролишите стања дугмади или креирајте групе дугмади за више компоненти као што су траке са алаткама.

Компатибилност са више претраживача

Фирефок се задржава у контролним стањима (онеспособљеност и провераност) током учитавања страница . Заобилазно решење за ово је коришћење autocomplete="off". Погледајте Мозилла грешку #654072 .

Статефул

Додајте data-loading-text="Loading..."да бисте користили стање учитавања на дугмету.

Ова функција је застарела од в3.3.5 и уклоњена је у в4.

Користите било коју државу коју желите!

Зарад ове демонстрације, користимо 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скрива садржај
  • .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>

Пример хармонике

Проширите подразумевано понашање скупљања да бисте направили хармонику са компонентом панела.

Аним париатур цлицхе репрехендерит, еним еиусмод хигх лифе оптужба Терри рицхардсон ад лигње. 3 волф моон оффициа ауте, нон цупидатат скатебоард долор брунцх. Камион за храну куиноа несциунт лаборум еиусмод. Брунцх 3 волф моон темпор, сунт аликуа ставио птицу на то лигње кафа једног порекла нулла аццептнда схоредитцх ет. Нихил аним кеффииех хелветица, црафт пиво лаборе вес андерсон цред несциунт сапиенте еа проидент. Ад веган осим месар вице ломо. Хеланке оццаецат црафт пиво од фарме до стола, сирови деним естетски синтисајзер несциунт за које вероватно нисте чули Аццузамус Лабе сустаинабле ВХС.
Аним париатур цлицхе репрехендерит, еним еиусмод хигх лифе оптужба Терри рицхардсон ад лигње. 3 волф моон оффициа ауте, нон цупидатат скатебоард долор брунцх. Камион за храну куиноа несциунт лаборум еиусмод. Брунцх 3 волф моон темпор, сунт аликуа ставио птицу на то лигње кафа једног порекла нулла аццептнда схоредитцх ет. Нихил аним кеффииех хелветица, црафт пиво лаборе вес андерсон цред несциунт сапиенте еа проидент. Ад веган осим месар вице ломо. Хеланке оццаецат црафт пиво од фарме до стола, сирови деним естетски синтисајзер несциунт за које вероватно нисте чули Аццузамус Лабе сустаинабле ВХС.
Аним париатур цлицхе репрехендерит, еним еиусмод хигх лифе оптужба Терри рицхардсон ад лигње. 3 волф моон оффициа ауте, нон цупидатат скатебоард долор брунцх. Камион за храну куиноа несциунт лаборум еиусмод. Брунцх 3 волф моон темпор, сунт аликуа ставио птицу на то лигње кафа једног порекла нулла аццептнда схоредитцх ет. Нихил аним кеффииех хелветица, црафт пиво лаборе вес андерсон цред несциунт сапиенте еа проидент. Ад веган осим месар вице ломо. Хеланке оццаецат црафт пиво од фарме до стола, сирови деним естетски синтисајзер несциунт за које вероватно нисте чули Аццузамус Лабе сустаинабле ВХС.
<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-bodyс са .list-groupс.

  • Боотпли
  • Један итмус ац фацилин
  • Други ерос

Учините контроле за проширење/скупи доступним

Обавезно додајте 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прихвата ЦСС селектор за примену скупљања. Обавезно додајте класу collapseу склопиви елемент. Ако желите да се подразумевано отвори, додајте додатну класу in.

Да бисте склопивој контроли додали управљање групом налик хармоници, додајте атрибут података data-parent="#selector". Погледајте демо да видите ово у акцији.

Преко ЈаваСцрипт-а

Омогућите ручно помоћу:

$('.collapse').collapse()

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у 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догађај деси).

Догађаји

Боотстрап-ова класа колапса излаже неколико догађаја за спајање на функционалност колапса.

Тип догађаја Опис
схов.бс.цоллапсе Овај догађај се покреће одмах када showсе позове метод инстанце.
приказано.бс.цоллапсе Овај догађај се покреће када се кориснику учини видљивим елемент сажимања (сачекаће да се ЦСС транзиције доврше).
хиде.бс.цоллапсе Овај догађај се покреће одмах када се hideметода позове.
хидден.бс.цоллапсе Овај догађај се покреће када је елемент сажимања сакривен од корисника (сачекаће да се ЦСС транзиције доврше).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Цароусел цароусел.јс

Компонента пројекције слајдова за кретање кроз елементе, попут вртешке. Угнежђене вртешке нису подржане.

<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. Поставите скоро било који опциони ХТМЛ унутра и он ће аутоматски бити поравнат и форматиран.

<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"се користи за означавање вртешке као анимације почевши од учитавања странице. Не може се користити у комбинацији са (сувишним и непотребним) експлицитним ЈаваСцрипт иницијализацијом исте вртешке.

Преко ЈаваСцрипт-а

Ручно позовите вртешку помоћу:

$('.carousel').carousel()

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-interval="".

Име тип Уобичајено Опис
интервал број 5000 Количина времена за одлагање између аутоматског циклуса ставке. Ако је нетачно, вртешка се неће аутоматски кретати.
пауза стринг | нула "лебдети" Ако је подешено на "hover", паузира укључивање вртешке mouseenterи наставља циклус вртешке укључене mouseleave. Ако је подешено на null, задржавање показивача миша преко вртешке га неће паузирати.
замотати боолеан истинито Да ли рингишпил треба да се врти непрекидно или да се тешко зауставља.
тастатура боолеан истинито Да ли вртешка треба да реагује на догађаје на тастатури.

.carousel(options)

Иницијализује вртешку са опционим опцијама objectи почиње да се креће кроз ставке.

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

.carousel('cycle')

Кружи кроз ставке вртешке с лева на десно.

.carousel('pause')

Спречава вртешку да се креће кроз ставке.

.carousel(number)

Кружи вртешку до одређеног оквира (на основу 0, слично низу).

.carousel('prev')

Прелази на претходну ставку.

.carousel('next')

Прелази на следећу ставку.

Боотстрап-ова класа вртешке излаже два догађаја за спајање на функционалност вртешке.

Оба догађаја имају следећа додатна својства:

  • direction: Смер у коме вртешка клизи (или "left"или "right").
  • relatedTarget: ДОМ елемент који се поставља на своје место као активна ставка.

Сви догађаји вртешке се активирају на самом вртешком (тј. на <div class="carousel">).

Тип догађаја Опис
слиде.бс.цароусел Овај догађај се покреће одмах када slideсе позове метод инстанце.
слид.бс.цароусел Овај догађај се покреће када вртешка заврши свој прелаз слајда.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Аффик аффик.јс

Пример

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


Употреба

Користите додатак за афикс преко атрибута података или ручно са сопственим ЈаваСцрипт-ом. У обе ситуације, морате да обезбедите ЦСС за позиционирање и ширину вашег приложеног садржаја.

Напомена: Немојте користити додатак за афикс на елементу који се налази у релативно позиционираном елементу, као што је повучена или гурнута колона, због грешке у приказивању у Сафарију .

Позиционирање преко ЦСС-а

Додатак афикса се пребацује између три класе, од којих свака представља одређено стање: .affix, .affix-top, и .affix-bottom. Морате да обезбедите стилове, са изузетком position: fixed;он .affix, за ове класе сами (независно од овог додатка) за руковање стварним позицијама.

Ево како функционише додатак за афикс:

  1. За почетак, додатак додаје.affix-top како би означио да је елемент на највишој позицији. У овом тренутку није потребно ЦСС позиционирање.
  2. Померање поред елемента који желите да причврстите требало би да покрене стварно постављање. Овде се .affixзамењује .affix-topи постављаposition: fixed; (обезбеђује Боотстрап-ов ЦСС).
  3. Ако је дефинисан доњи помак, скроловање поред њега треба заменити .affixса .affix-bottom. Пошто су офсетови опциони, постављање једног захтева од вас да подесите одговарајући ЦСС. У овом случају додајте position: absolute;када је потребно. Додатак користи атрибут података или ЈаваСцрипт опцију да одреди где да позиционира елемент одатле.

Пратите горње кораке да бисте подесили свој ЦСС за било коју од опција коришћења у наставку.

Преко атрибута података

Да бисте лако додали понашање афикса било ком елементу, само додајте data-spy="affix"елементу који желите да шпијунирате. Користите помаке да бисте дефинисали када да пребацујете качење елемента.

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

Преко ЈаваСцрипт-а

Позовите афикс додатак преко ЈаваСцрипт-а:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-offset-top="200".

Име тип Уобичајено Опис
офсет број | функција | објекат 10 Пиксели за померање од екрана приликом израчунавања положаја померања. Ако је наведен један број, померање ће бити примењено иу горњем и доњем смеру. Да бисте обезбедили јединствени, доњи и горњи помак, само наведите објекат offset: { top: 10 }или offset: { top: 10, bottom: 5 }. Користите функцију када требате динамички израчунати помак.
циљ селектор | чвор | јКуери елемент windowобјекат _ Одређује циљни елемент афикса.

Методе

.affix(options)

Активира ваш садржај као приложени садржај. Прихвата опционе опције object.

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

.affix('checkPosition')

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

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

Догађаји

Боотстрап-ов додатак за афикс излаже неколико догађаја за повезивање са функционалношћу афикса.

Тип догађаја Опис
афикс.бс.афикс Овај догађај се покреће непосредно пре него што је елемент причвршћен.
афикс.бс.афикс Овај догађај се покреће након што је елемент причвршћен.
аффик-топ.бс.аффик Овај догађај се покреће непосредно пре него што је елемент причвршћен на врх.
аффикед-топ.бс.аффик Овај догађај се покреће након што је елемент причвршћен на врх.
афикс-дно.бс.афикс Овај догађај се покреће непосредно пре него што је елемент причвршћен на дну.
аффикед-боттом.бс.аффик Овај догађај се покреће након што је елемент причвршћен на дну.