Преглед

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

Приклучоците може да се вклучат поединечно (со користење на поединечни *.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 со други рамки за интерфејс. Во овие околности, повремено може да се појават судири на именскиот простор. Ако тоа се случи, можете да го повикате .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настаните со именски простор, може да има проблеми со компатибилноста што треба да ги поправите сами.

Транзиции транзиција.js

За транзициите

За едноставни ефекти на транзиција, вклучете transition.jsеднаш заедно со другите JS-датотеки. Ако користите компајлиран (или минификуван) bootstrap.js, нема потреба да го вклучите ова - веќе е таму.

Што има внатре

Transition.js е основен помошник за transitionEndнастани, како и CSS емулатор за транзиција. Се користи од другите приклучоци за да се провери дали има поддршка за CSS транзиција и да се фатат висечки транзиции.

Оневозможување на транзиции

Транзициите може глобално да се оневозможат со користење на следниов фрагмент од JavaScript, кој мора да дојде откако ќе се вчита transition.js(или bootstrap.jsили bootstrap.min.js, во зависност од случајот):

$.support.transition = false

Модали модални.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-describedbyна .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 во модален, само вгнездувајте .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и 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>надминување на стандардното однесување на лизгање и генерира a .modal-backdropза да обезбеди област за кликнување за отфрлање на прикажаните модали кога се кликнува надвор од модалот.

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

Активирајте модал без да пишувате JavaScript. Поставете data-toggle="modal"на елемент на контролорот, како копче, заедно со data-target="#foo"или href="#foo"за да насочите конкретен модал за префрлување.

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

Преку JavaScript

Повикајте модал со id myModalсо една линија JavaScript:

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

Опции

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

Име тип стандардно опис
позадина бул или стрингот'static' вистина Вклучува елемент на модална заднина. Алтернативно, наведете staticзаднина која не го затвора модалот при кликнување.
тастатура булови вистина Го затвора модалот кога ќе се притисне копчето за бегство
покажуваат булови вистина Го прикажува модалот кога е иницијализиран.
Далечински управувач патека лажни

Оваа опција е застарена од v3.3.0 и е отстранета во v4. Наместо тоа, препорачуваме да користите шаблони од страна на клиентот или рамка за врзување податоци или сами да го повикате jQuery.load .

Ако е обезбедена далечинска URL-адреса, содржината ќе се вчита еднаш преку loadметодот на jQuery и ќе се инјектира во .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ќе се повика методот на пример. Ако е предизвикано од кликнување, кликнатиот елемент е достапен како relatedTargetсвојство на настанот.
прикажани.бс.модални Овој настан се активира кога модалот е видлив за корисникот (ќе чека да се завршат транзициите на CSS). Ако е предизвикано од кликнување, кликнатиот елемент е достапен како relatedTargetсвојство на настанот.
скриј.бс.модална Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени.бс.модални Овој настан се активира кога модалот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS).
натоварени.бс.модални Овој настан се активира кога модалот има вчитана содржина користејќи ја remoteопцијата.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

Тип на настан Опис
прикажи.бс.паѓачкото мени Овој настан се вклучува веднаш кога ќе се повика методот на пример за прикажување.
прикажано.бс.паѓачкото мени Овој настан се активира кога паѓачкото мени е видливо за корисникот (ќе почека CSS транзициите да се завршат).
скриј.бс.паѓачкото мени Овој настан се активира веднаш кога ќе се повика методот на пример за сокривање.
скриени.бс.паѓачкото мени Овој настан се активира кога паѓачкото мени ќе заврши со сокривање од корисникот (ќе чека да заврши CSS транзициите).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Пример во navbar

Приклучокот ScrollSpy е за автоматско ажурирање на навигациските цели врз основа на позицијата на лизгање. Скролувајте ја областа под лентата за навигација и гледајте како се менува активната класа. Ќе бидат означени и паѓачките подставки.

@масти

Рекламни хеланки keytar, бранч id art party dolor labore. Pitchfork yr enim lo-fi пред да го распродадат qui. Права за велосипеди од фарма до маса на Tumblr без разлика. Кардиган аним кефије карлес. Фото кабина на Velit seitan mcsweeney 3 wolf moon irure. Козби џемпер lomo џин шорцеви, Вилијамсбург hoodie миним qui веројатно не сте слушнале за нив et cardigan trust fund culpa биодизел Вес Андерсон естетски. Нихил истетовиран accusamus, cred иронија биодизел keffiyeh занаетчија ullamco consequat.

@mdo

Скејтборд со мустаќи Veniam marfa, адиписицирана фугиатска вила брада. Freegan брада aliqua cupidatat веро на Mcsweeney. Купидатат четири локо ниси, еа хелветица нула карлес. Истетовиран камион за храна со џемпер Козби, квис нон фриган винил на Mcsweeney. Ло-фи Вес Андерсон +1 сарториал. Карлес неестетско вежбање quis gentrify. Бруклин адаписинг занаетчиско пиво заменик keytar deserunt.

еден

Occaecat commodo aliqua delectus. Fap craft пиво deserunt скејтборд ea. Ломо правата за велосипеди адиписицинг банх ми, велит еа сонт следното ниво локаворно кафе со едно потекло во magna veniam. Винил со висок животен век, ехо парк е последица на quis aliquip banh mi pitchfork. Vero VHS е адиписциинг. Направете ја минимум чантата за гласник DIY. Кредит екс во, одржлив производ консултант фанни пакет 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 блог, culpa messenger bag marfa што и да е камион за храна за храна. Sapiente synth id assumenda. Locavore sed helvetica клише иронија, громови веројатно не сте слушнале за нив, како последица на дуксери без глутен lo-fi fap aliquip. Labore elit placeat пред да се распродадат, Тери Ричардсон proident brunch nesciunt quis cosby џемпер pariatur keffiyeh ut helvetica artisan. Кардиган занаетчиски пиво сејтан готов велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.

Употреба

Потребна е навигација на Bootstrap

Scrollspy моментално бара употреба на компонента за навигација на Bootstrap за правилно истакнување на активните врски.

Потребни се решливи цели за ID

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

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

Целните елементи кои не се :visibleспоред jQuery ќе бидат игнорирани и нивните соодветни ставки за навигација никогаш нема да бидат означени.

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

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

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

За лесно додавање на однесувањето на лизгање во навигацијата на горната лента, додајте data-spy="scroll"го елементот што сакате да го шпионирате (најчесто ова е <body>). Потоа додадете го data-targetатрибутот со ID или класа на родителскиот елемент на која било .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 Пиксели за поместување од врвот при пресметување на позицијата на лизгање.

Настани

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

Таб.js за преклопни јазичиња

Пример јазичиња

Додајте брза, динамична функционалност на јазичињата за да преминете низ панелите на локалната содржина, дури и преку паѓачкото мени. Вгнездените картички не се поддржани.

Сиров тексас веројатно не сте слушнале за нив џин шорцеви Остин. Nesciunt тофу stumptown aliqua, ретро-синтетик мастер чистење. Мустаќи клише темпор, Вилијамсбург карлес вегански хелветица. Reprehenderit месар ретро keffiyeh сонфаќач синт. Козби џемпер eu banh mi, qui irure Тери Ричардсон екс лигњи. Поставете го вашиот телефон за iPhone. Seitan aliquip quis cardigan американска облека, месар 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 , додека со додавањето на класите и ќе се примени navстилизирање на пилули .nav-pills

<div>

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

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

</div>

Избледување ефект

За да избледат картичките, додајте .fadeна секоја .tab-pane. Првиот таб на јазичиња, исто така, мора .inда ја направи видлива почетната содржина.

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

Методи

$().tab

Активира елемент на картичката и контејнер за содржина. Јазичето треба да има или data-targetили hrefтаргетирање контејнерски јазол во DOM. Во горните примери, јазичињата се <a>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

Тип на настан Опис
прикажи.бс.таб Овој настан се вклучува на прикажување на јазичиња, но пред да се прикаже новата картичка. Користете 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
})

Tooltips tooltip.js

Инспириран од одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; Советите за алатки се ажурирана верзија, која не се потпира на слики, користи CSS3 за анимации и атрибути на податоци за локално складирање на наслови.

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

Примери

Лебдете над линковите подолу за да ги видите советите за алатки:

Тесни панталони од следното ниво keffiyeh веројатно не сте слушнале за нив. Фото кабина брада суров тексас летерпрес вегански гласник торба stumptown. Сејтанот од фарма до маса, 8-битната американска облека за одржлива киноа на Mcsweeney's fixie има винилна комора од Тери Ричардсон. Брада трупец, кардигани бан ми ломо громови. Тофу биодизел Вилијамсбург марфа, четири loko mcsweeney's cleanse vegan chambray. Навистина ироничен занаетчија без разлика на тастатурата, сценска сцена од фарма до маса, банкарскиот твитер Остин се справува со фриган кред суров тексас кафе со едно потекло вирално.

Статички совет за алатка

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

Четири насоки

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

Функционалност за вклучување

Од причини за изведба, „Tooltip“ и „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;во вашите сидра за да го избегнете ова.

Советите за алатки во групите на копчињата, групите за внесување и табелите бараат посебно поставување

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

Не обидувајте се да прикажувате совети за алатки на скриените елементи

Повикувањето $(...).tooltip('show')кога е целниот елемент display: none;ќе предизвика неправилно поставен совет за алатка.

Достапни совети за алатки за корисници на тастатура и помошна технологија

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

Советите за алатки на оневозможените елементи бараат елементи за обвивка

За да додадете совет за алатка на a 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ќе се повика методот на пример.
прикажани.бс.совет за алатка Овој настан се активира кога советот за алатка е видлив за корисникот (ќе почека да заврши CSS транзицијата).
скриј.бс.совет за алатка Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени.bs.tooltip Овој настан се активира кога советот за алатка ќе заврши со криење од корисникот (ќе почека да заврши CSS транзицијата).
вметната.бс.совет за алатка Овој настан се активира по show.bs.tooltipнастанот кога шаблонот за совети за алатки е додаден во DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

Поповерите чиишто наслов и содржина се со нулта должина никогаш не се прикажуваат.

Зависност од приклучокот

Поповерите бараат додатокот за совет за алатки да биде вклучен во вашата верзија на Bootstrap.

Функционалност за вклучување

Од причини за изведба, „Tooltip“ и „Popover data-apis“ се вклучени, што значи дека мора сами да ги иницијализирате .

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

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

Поповерите во групите на копчињата, групите за внесување и табелите бараат посебно поставување

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

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

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

Поповерите на оневозможените елементи бараат елементи за обвивка

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

Врски со повеќе линии

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

Примери

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

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

Поповер топ

Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер во право

Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер лево

Sed posuere consectetur est at lobortis. Енеан еу лео квам. 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>

Употреба

Овозможете popovers преку JavaScript:

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

Опции

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

Име Тип Стандардно Опис
анимација булови вистина Примени CSS Fade транзиција на поповер
контејнер низа | лажни лажни

Го додава поповерот на одреден елемент. Пример: container: 'body'. Оваа опција е особено корисна со тоа што ви овозможува да го поставите поповерот во текот на документот во близина на елементот за активирање - што ќе го спречи скокачот да лебди подалеку од елементот за активирање при промена на големината на прозорецот.

содржина низа | функција ''

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

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

одложување број | објект 0

Одложено прикажување и сокривање на поповер (ms) - не важи за рачниот тип на активирач

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

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

html булови лажни Вметнете HTML во поповерот. Ако е неточно, textметодот на jQuery ќе се користи за вметнување содржина во DOM. Користете текст ако сте загрижени за нападите на XSS.
поставување низа | функција 'право'

Како да се позиционира поповер - топ | дното | лево | десно | автоматско.
Кога е наведено „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 што треба да се користи при креирање на поповер.

Поповерот titleќе се инјектира во .popover-title.

Поповерот contentќе се инјектира во .popover-content.

.arrowќе стане стрела на поповерот.

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

Наслов низа | функција ''

Стандардна вредност на насловот ако titleатрибутот не е присутен.

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

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

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

Ако е дадена функција, таа се повикува со јазолот за активирање на елементот DOM како единствен аргумент. Контекстот 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ќе се повика методот на пример.
прикажани.бс.поповер Овој настан се активира кога поповерот е видлив за корисникот (ќе чека да се завршат транзициите на CSS).
скриј.бс.поповер Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени.бс.поповер Овој настан се активира кога поповерот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS).
вметната.бс.поповер Овој настан се активира по 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"атрибутот. (Не е потребно кога се користи автоматската иницијализација на data-api.)

$().alert('close')

Затвора предупредување со отстранување од DOM. Ако класите .fadeи .inсе присутни на елементот, предупредувањето ќе избледи пред да се отстрани.

Настани

Приклучокот за предупредување на Bootstrap изложува неколку настани за приклучување на функционалноста за предупредување.

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

Копче за копчиња.js

Направете повеќе со копчињата. Контролирајте ги состојбите на копчињата или креирајте групи на копчиња за повеќе компоненти како што се алатниците.

Компатибилност со вкрстени прелистувачи

Firefox опстојува од контролните состојби (оневозможување и проверка) низ вчитувањата на страниците . Резолуција за ова е да се користи autocomplete="off". Видете грешка на Mozilla #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>

Собори колапс.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>

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

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

Аним париатур клише репрехендерит, enim eiusmod висок живот accusamus Тери Ричардсон и лигњи. 3 Wolf Moon officia aute, non cupidatat скејтборд долор бранч. Камион за храна quinoa nesciunt laborum eiusmod. Бранч 3 волк месечина темпор, sunt aliqua стави птица на неа лигњи кафе со едно потекло nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, занаетчиско пиво лаборе Вес Андерсон cred nesciunt sapiente ea proident. Рекламни вегански месар заменик ломо. Хеланки occaecat занаетчиски пиво од фарма до маса, суров тексас естетски синтетички нешта, веројатно не сте слушнале за нив accusamus labore одржлив VHS.
Аним париатур клише репрехендерит, enim eiusmod висок живот accusamus Тери Ричардсон и лигњи. 3 Wolf Moon officia aute, non cupidatat скејтборд долор бранч. Камион за храна quinoa nesciunt laborum eiusmod. Бранч 3 волк месечина темпор, sunt aliqua стави птица на неа лигњи кафе со едно потекло nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, занаетчиско пиво лаборе Вес Андерсон cred nesciunt sapiente ea proident. Рекламни вегански месар заменик ломо. Хеланки occaecat занаетчиски пиво од фарма до маса, суров тексас естетски синтетички нешта, веројатно не сте слушнале за нив accusamus labore одржлив VHS.
Аним париатур клише репрехендерит, enim eiusmod висок живот accusamus Тери Ричардсон и лигњи. 3 Wolf Moon officia aute, non cupidatat скејтборд долор бранч. Камион за храна quinoa nesciunt laborum eiusmod. Бранч 3 волк месечина темпор, sunt aliqua стави птица на неа лигњи кафе со едно потекло nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, занаетчиско пиво лаборе Вес Андерсон cred nesciunt sapiente ea proident. Рекламни вегански месар заменик ломо. Хеланки occaecat занаетчиски пиво од фарма до маса, суров тексас естетски синтетички нешта, веројатно не сте слушнале за нив accusamus labore одржлив 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"и a data-targetна елементот за автоматски да доделите контрола на склоплив елемент. Атрибутот data-targetприфаќа CSS избирач за да се примени колапсот. Не заборавајте да ја додадете класата collapseво склопувачкиот елемент. Ако сакате стандардно да се отвори, додадете ја дополнителната класа in.

За да додадете управување со група налик на хармоника на контрола што се склопува, додајте го атрибутот податоци 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ќе се повика методот на пример.
прикажани.бс.колапс Овој настан се активира кога елементот за колапс е видлив за корисникот (ќе чека да се завршат транзициите на CSS).
скриј.бс.сруши Овој настан се активира веднаш кога hideметодот е повикан.
скриен.бс.колапс Овој настан се активира кога елементот за колапс е скриен од корисникот (ќе чека да се завршат транзициите на CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Рингишпил рингишпил.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, слично на низа).

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

Циклуси до следната ставка.

Класата на рингишпил на Bootstrap изложува два настани за приклучување во функционалноста на рингишпилот.

Двата настани ги имаат следните дополнителни својства:

  • direction: Насоката во која се лизга рингишпилот (или "left"или "right").
  • relatedTarget: Елементот DOM што се става на место како активна ставка.

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

Тип на настан Опис
слајд.бс.рингишпил Овој настан се вклучува веднаш кога slideќе се повика методот на пример.
лизна.бс.рингишпил Овој настан се активира кога рингишпилот ќе ја заврши својата транзиција на слајд.
$('#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;на .affix, за овие класи сами (независни од овој приклучок) да се справат со вистинските позиции.

Еве како работи приклучокот за афикс:

  1. За почеток, приклучокот додава .affix-topза да укаже дека елементот е во највисоката позиција. Во овој момент не е потребно позиционирање на CSS.
  2. Скролувањето покрај елементот што сакате да го ставите треба да го активира вистинското ставање. Ова е местото каде што се .affixзаменува .affix-topи поставува position: fixed;(обезбедено од CSS на Bootstrap).
  3. Ако е дефинирано поместување на дното, лизгањето покрај него треба да се замени .affixсо .affix-bottom. Бидејќи поместувањата се опционални, поставувањето на едно бара да поставите соодветна CSS. Во овој случај, додадете position: absolute;кога е потребно. Приклучокот го користи атрибутот за податоци или опцијата JavaScript за да одреди каде да го позиционира елементот од таму.

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

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

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

<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-bottom.bs.афикс Овој настан се вклучува непосредно пред елементот да биде прикачен на дното.
залепено-дно.бс.афикс Овој настан се активира откако елементот е поставен на дното.