Преглед

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

Приклучоците може да се вклучат поединечно (со користење на поединечни *.jsдатотеки на Bootstrap), или сите одеднаш (со користење bootstrap.jsили минимизирана bootstrap.min.js).

Атрибути на податоци

Можете да ги користите сите приклучоци за Bootstrap чисто преку API за обележување без да пишувате ниту една линија JavaScript. Ова е првокласно API на Bootstrap и треба да биде вашето прво внимание кога користите приклучок.

Сепак, во некои ситуации може да биде пожелно да се исклучи оваа функционалност. Затоа, ние исто така обезбедуваме можност за оневозможување на атрибутот за податоци API со разврзување на сите настани на именскиот простор на документот со data-api. Ова изгледа вака:

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

Алтернативно, за да насочите конкретен приклучок, само вклучете го името на приклучокот како именски простор заедно со именскиот простор за податоци-api вака:

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

Програмски API

Ние, исто така, веруваме дека треба да можете да ги користите сите приклучоци за Bootstrap чисто преку JavaScript API. Сите јавни API се единечни, верижни методи и ја враќаат колекцијата по која е постапено.

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

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

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

Секој додаток исто така го изложува својот необработен конструктор на Constructorсвојство: $.fn.popover.Constructor. Ако сакате да добиете одреден пример на приклучок, преземете го директно од елемент: $('[rel="popover"]').data('popover').

Стандардни поставки

Можете да ги промените стандардните поставки за приклучок со менување на Constructor.DEFAULTSобјектот на приклучокот:

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

Без конфликт

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

Средство за дезинфекција

Советите за алатки и поповерите го користат нашиот вграден дезинфекција за дезинфицирање на опциите што прифаќаат HTML.

Стандардната whiteListвредност е следна:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Ако сакате да додадете нови вредности на овој стандард whiteList, можете да го направите следново:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Ако сакате да го заобиколите нашето средство за дезинфекција затоа што претпочитате да користите посветена библиотека, на пример DOMPurify , треба да го направите следново:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

До верзијата на секој од приклучоците за jQuery на Bootstrap може да се пристапи преку VERSIONсвојството на конструкторот на приклучокот. На пример, за додатокот за совети за алатки:

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

Нема посебни повратни информации кога JavaScript е оневозможен

Приклучоците на Bootstrap не се враќаат особено благодатно кога JavaScript е оневозможен. Ако ви е гајле за корисничкото искуство во овој случај, користете <noscript>го за да им ја објасните ситуацијата (и како повторно да овозможите JavaScript) на вашите корисници и/или да додадете свои сопствени резервни верзии.

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

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

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

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

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

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

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

$.support.transition = false

Модали модални.js

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

Поради тоа како HTML5 ја дефинира својата семантика, autofocusатрибутот HTML нема ефект во модалите на Bootstrap. За да го постигнете истиот ефект, користете некој прилагоден JavaScript:

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

Примери

Статичен пример

Изведен модал со заглавие, тело и збир на дејства во подножјето.

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

Демо во живо

Вклучете модал преку JavaScript со кликнување на копчето подолу. Ќе се лизне надолу и ќе избледи од врвот на страницата.

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

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

Факултативни големини

Модалите имаат две опционални големини, достапни преку класите на модификатори за да се постават на .modal-dialog.

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

<div class="modal fade" 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" 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="".

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

Методи

.modal(options)

Ја активира вашата содржина како модална. Прифаќа изборни опции object.

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

.modal('toggle')

Рачно менува модал. Се враќа на повикувачот пред модалот навистина да биде прикажан или скриен (т.е. пред да се случи настанот shown.bs.modalили hidden.bs.modal).

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

.modal('show')

Рачно отвора модал. Се враќа кај повикувачот пред всушност да се прикаже модалот (т.е. пред да се shown.bs.modalслучи настанот).

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

.modal('hide')

Рачно крие модал. Се враќа на повикувачот пред всушност да се скрие модалот (т.е. пред да се hidden.bs.modalслучи настанот).

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

.modal('handleUpdate')

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

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

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

Настани

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

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

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

Паѓачки паѓачки.js

Примери

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

Во рамките на лентата за навигација

Во рамките на апчиња

Употреба

Преку атрибути на податоци или JavaScript, паѓачкиот приклучок ја менува скриената содржина (паѓачкото мени) со префрлање на .openкласата на матичната ставка од списокот.

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

Забелешка: data-toggle="dropdown"атрибутот се потпира за затворање на паѓачките менија на ниво на апликација, па затоа е добра идеја секогаш да го користите.

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

Додајте data-toggle="dropdown"на врска или копче за да вклучите паѓачко мени.

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

За да ги задржите URL-адресите непроменети со копчињата за врски, користете го data-targetатрибутот наместо href="#".

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

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

Преку JavaScript

Повикајте ги паѓачките списоци преку JavaScript:

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

Опции

Никој

Методи

$().dropdown('toggle')

Го исклучува паѓачкото мени на дадена лента за навигација или навигација со јазичиња.

Настани

Сите паѓачки настани се активираат во .dropdown-menuродителскиот елемент на.

Сите паѓачки настани имаат relatedTargetсвојство, чија вредност е преклопниот елемент за прицврстување.

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

ScrollSpy scrollspy.js

Пример во navbar

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

Употреба

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

Без разлика на методот на имплементација, 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="".

Настани

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

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

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

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

Употреба

Овозможете јазичиња со јазичиња преку JavaScript (секоја картичка треба да се активира поединечно):

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

Можете да активирате поединечни јазичиња на неколку начини:

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

Означување

Можете да активирате навигација со јазиче или таблети без да пишувате JavaScript со едноставно назначување data-toggle="tab"или data-toggle="pill"на елемент. Додавањето на navкласите nav-tabsи во јазичето ulќе го примени стајлирањето на картичката Bootstrap , додека со додавањето на класите и ќе се примени 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

$('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 за анимации и атрибути на податоци за локално складирање на наслови.

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

Примери

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

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

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

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

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

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

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

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

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

Употреба

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

Активирајте го советот за алатка преку JavaScript:

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

Означување

Потребната ознака за совет за алатка е само dataатрибут и titleна елементот HTML сакате да имате совет за алатка. Генерираната ознака на советот за алатка е прилично едноставна, иако бара позиција (стандардно, поставена topод приклучокот).

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

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

Опции

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

Методи

$().tooltip(options)

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

.tooltip('show')

Го открива советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже советот за алатка (т.е. пред да се shown.bs.tooltipслучи настанот). Ова се смета за „рачно“ активирање на советот за алатки. Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.

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

.tooltip('hide')

Го крие советот за алатка за елемент. Се враќа на повикувачот пред навистина да биде скриен советот за алатка (т.е. предhidden.bs.tooltip случи настанот). Ова се смета за „рачно“ активирање на советот за алатки.

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

.tooltip('toggle')

Го исклучува советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже или скрие советот за алатка (т.е. пред да се случи тој shown.bs.tooltipили hidden.bs.tooltipнастан). Ова се смета за „рачно“ активирање на советот за алатки.

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

.tooltip('destroy')

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

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

Настани

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

Popovers popover.js

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

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

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

Примери

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

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

Демо во живо

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

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

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

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

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

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

Отфрли на следниот клик

Користете го focusактивирањето за да ги отфрлите поповерите на следниот клик што го прави корисникот.

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

Употреба

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

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

Опции

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

Методи

$().popover(options)

Иницијализира поповери за колекција на елементи.

.popover('show')

Открива популарност на елементот. Се враќа кај повикувачот пред да се прикаже поповерот (т.е. пред да се shown.bs.popoverслучи настанот). Ова се смета за „рачно“ активирање на поповер. Поповерите чиишто наслов и содржина се со нулта должина никогаш не се прикажуваат.

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

.popover('hide')

Го крие поповерот на елементот. Се враќа на повикувачот пред да се сокрие поповерот (т.е. пред да се hidden.bs.popoverслучи настанот). Ова се смета за „рачно“ активирање на поповер.

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

.popover('toggle')

Вклучува исклучување на елементот. Се враќа на повикувачот пред да се прикаже или скрие пукачот (т.е. пред да се случи настанот shown.bs.popoverили hidden.bs.popoverнастанот). Ова се смета за „рачно“ активирање на поповер.

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

.popover('destroy')

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

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

Настани

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

Пораки за предупредување alert.js

Примери за предупредувања

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

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

Употреба

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

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

За вашите предупредувања да користат анимација при затворање, проверете дали ги имаат класите .fadeи .inвеќе применети на нив.

Методи

$().alert()

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

$().alert('close')

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

Настани

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

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

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

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

Државен

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

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

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

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

Единечно преклопување

Додај data-toggle="button"за активирање на префрлање на едно копче.

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

Поле за избор / Радио

Додајте data-toggle="buttons"во полето за .btn-groupизбор што содржи или радио влезови за да овозможите префрлање во нивните соодветни стилови.

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

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

Методи

$().button('toggle')

Ја вклучува состојбата на туркање. На копчето му дава изглед дека е активирано.

$().button('reset')

Ресетира состојбата на копчето - го заменува текстот со оригиналниот текст. Овој метод е асинхрон и се враќа пред да заврши ресетирањето.

$().button(string)

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

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

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

Собори колапс.js

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

Пример

Кликнете на копчињата подолу за да прикажете и скриете друг елемент преку промени во класата:

• .collapseја крие содржината
• .collapsingсе применува за време на транзициите
• .collapse.inпокажува содржина

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

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

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

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

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

Исто така, можно е да се замени .panel-bodys со .list-groups.

Употреба

Приклучокот за колапс користи неколку класи за да се справи со кревање тешки предмети:

• .collapseја крие содржината
• .collapse.inја покажува содржината
• .collapsingсе додава кога ќе започне транзицијата и се отстранува кога ќе заврши

Овие часови може да се најдат во component-animations.less.

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

Само додадете data-toggle="collapse"и a data-targetна елементот за автоматски да доделите контрола на склоплив елемент. Атрибутот data-targetприфаќа CSS избирач за да се примени колапсот. Не заборавајте да ја додадете класата collapseво склопувачкиот елемент. Ако сакате стандардно да се отвори, додадете ја дополнителната класа in.

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

Преку JavaScript

Овозможи рачно со:

$('.collapse').collapse()

Опции

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

Методи

.collapse(options)

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

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

.collapse('toggle')

Вклучува склопувачки елемент на прикажан или скриен. Се враќа кај повикувачот пред да се прикаже или скрие елементот што се склопува (т.е. пред да се случи настанот shown.bs.collapseили hidden.bs.collapse).

.collapse('show')

Прикажува склоплив елемент. Се враќа кај повикувачот пред всушност да се прикаже склопувачкиот елемент (т.е. пред да се shown.bs.collapseслучи настанот).

.collapse('hide')

Сокрива склоплив елемент. Се враќа кај повикувачот пред да биде скриен елементот што се склопува (т.е. пред да се hidden.bs.collapseслучи настанот).

Настани

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

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

Рингишпил рингишпил.js

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

Примери

Претходна Следно

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

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

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

Факултативни титлови

Лесно додавајте титлови на вашите слајдови со .carousel-captionелементот во кој било .item. Ставете го речиси секој изборен HTML таму и тој автоматски ќе биде порамнет и форматиран.

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

Nulla vitae elit libero, pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Етикета за трет слајд

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Претходна Следно

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

Употреба

Повеќе вртелешки

Вртелешките бараат употреба на idна најоддалечениот контејнер (на .carousel) за правилно функционирање на контролите на рингишпилот. Кога додавате повеќе рингишпил или кога менувате рингишпил id, не заборавајте да ги ажурирате соодветните контроли.

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

Користете атрибути на податоци за лесно да ја контролирате положбата на рингишпилот. data-slideги прифаќа клучните зборови prevили next, што ја менува позицијата на слајдот во однос на нејзината моментална позиција. Алтернативно, користете data-slide-toго за пренесување необработен индекс на слајд на рингишпилот data-slide-to="2", кој ја префрла позицијата на слајдот на одреден индекс почнувајќи со 0.

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

Преку JavaScript

Повикајте рингишпил рачно со:

$('.carousel').carousel()

Опции

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

Методи

.carousel(options)

Ја иницијализира рингишпилот со изборни опции objectи почнува да се движи со велосипед низ предмети.

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

.carousel('cycle')

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

.carousel('pause')

Го спречува рингишпилот да се движи со велосипед низ предмети.

.carousel(number)

Циклира рингишпил на одредена рамка (заснована на 0, слично на низа).

.carousel('prev')

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

.carousel('next')

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

Настани

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

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

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

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

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

Стави affix.js

Пример

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

Употреба

Користете го приклучокот за афикс преку атрибути на податоци или рачно со свој JavaScript. Во двете ситуации, мора да обезбедите CSS за позиционирањето и ширината на вашата прикачена содржина.

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

Позиционирање преку CSS

Приклучокот за афикс се префрла помеѓу три класи, од кои секоја претставува одредена состојба: .affix, .affix-top, и .affix-bottom. Мора да ги обезбедите стиловите, со исклучок на position: fixed;на .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".

Методи

.affix(options)

Ја активира вашата содржина како ставена содржина. Прифаќа изборни опции object.

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

.affix('checkPosition')

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

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

Настани

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