Преглед

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

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

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

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

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

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

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

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

Програмски АПИ

Такође верујемо да би требало да будете у могућности да користите све додатке за Боотстрап искључиво преко ЈаваСцрипт АПИ-ја. Сви јавни АПИ-ји су једноструки, ланчани методи и враћају колекцију на коју се поступа.

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

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

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

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

Подразумевана подешавања

Можете да промените подразумевана подешавања за додатак тако што ћете изменити Constructor.DEFAULTSобјекат додатка:

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

Нема сукоба

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

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

Догађаји

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

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

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

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

Санитизер

Објашњење алата и искачући прикази користе наш уграђени дезинфикатор за дезинфекцију опција које прихватају ХТМЛ.

Подразумевана 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)

Ако желите да заобиђете наше средство за дезинфекцију јер више волите да користите наменску библиотеку, на пример ДОМПурифи , требало би да урадите следеће:

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

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

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

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

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

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

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

О прелазима

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

Шта је унутра

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

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

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

$.support.transition = false

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

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

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

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

Примери

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

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

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

Демо уживо

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

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

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

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

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

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

Да бисте искористили предности Боотстрап грид система унутар модалног, само угнездите .rowс унутар, .modal-bodyа затим користите нормалне класе система мреже.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Различити модални садржај на основу дугмета окидача

Имате гомилу дугмади која сви покрећу исти модал, само са мало другачијим садржајем? Користите event.relatedTargetи ХТМЛ data-*атрибуте (могуће преко јКуери ) да бисте променили садржај модала у зависности од тога на које дугме сте кликнули. Погледајте документацију о модалним догађајима за детаље о relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Употреба

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

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

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

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

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

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

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

Опције

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

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

Методе

.modal(options)

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

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

.modal('toggle')

Ручно укључује модал. Враћа позиваоцу пре него што је модал заиста приказан или сакривен (тј. пре него што се деси догађај shown.bs.modalили ).hidden.bs.modal

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

.modal('show')

Ручно отвара модал. Враћа позиваоцу пре него што је модал заиста приказан (тј. пре него што се shown.bs.modalдогађај деси).

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

Догађаји

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

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

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

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

Примери

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

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

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

Употреба

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

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

Напомена: data-toggle="dropdown"Атрибут се ослања на затварање падајућих менија на нивоу апликације, тако да је добра идеја да га увек користите.

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

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

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

Да бисте сачували УРЛ-ове нетакнуте дугмадима веза, користите data-targetатрибут уместо href="#".

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

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

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

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

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

Опције

Ниједан

Методе

$().dropdown('toggle')

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

Догађаји

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

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

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

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

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

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

Употреба

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

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

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

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

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

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

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

Методе

.scrollspy('refresh')

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

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

Опције

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

Догађаји

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

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

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

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

Употреба

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

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

Појединачне картице можете активирати на неколико начина:

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

Означавање

Можете активирати навигацију по картици или таблетама без писања ЈаваСцрипта једноставним навођењем data-toggle="tab"или data-toggle="pill"на елементу. Додавањем класа и на картицу navпримениће се стил картице Боотстрап , док ће се додавањем и класа применити стил пилуле .nav-tabsulnavnav-pills

<div>

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

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

</div>

Фаде ефекат

Да бисте учинили да картице нестају, додајте .fadeсваком .tab-pane. Прво окно са картицама такође мора .inда учини видљивим почетни садржај.

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

Методе

$().tab

Активира елемент картице и контејнер садржаја. Картица би требало да има data-targetили hrefциљни чвор контејнера у ДОМ-у. У горњим примерима, картице су <a>с data-toggle="tab"атрибутима.

.tab('show')

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

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

Догађаји

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

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

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

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Описи алатки тоолтип.јс

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

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

Примери

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

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

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

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

<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()
})

Употреба

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

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

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

Означавање

Потребна ознака за опис алата је само dataатрибут и titleна ХТМЛ елементу желите да имате опис алата. Генерисана ознака описа алата је прилично једноставна, иако захтева позицију (подразумевано, постављену на topдодатак).

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

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

Опције

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

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

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

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

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

Употреба

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

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

Опције

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

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

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

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

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

Употреба

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

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

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

Методе

$().alert()

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

$().alert('close')

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

Догађаји

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

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

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

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

Статефул

Додајте 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>

Цоллапсе цоллапсе.јс

Флексибилни додатак који користи прегршт класа за лако мењање понашања.

Пример

Кликните на дугмад испод да бисте приказали и сакрили други елемент путем промена класе:

• .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-bodyс са .list-groupс.

Употреба

Додатак за колапс користи неколико класа да би се носио са тешким подизањем:

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

Ови часови се могу наћи уcomponent-animations.less .

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

Само додајте data-toggle="collapse"и а data-targetелементу да бисте аутоматски доделили контролу над склопивим елементом. Атрибут data-targetприхвата ЦСС селектор за примену скупљања. Обавезно додајте класу collapseу склопиви елемент. Ако желите да се подразумевано отвори, додајте додатну класуin .

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

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

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

$('.collapse').collapse()

Опције

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

Догађаји

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

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

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

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

Примери

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

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

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

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

Опциони натписи

Лако додајте наслове својим слајдовима помоћу .carousel-captionелемента у било ком .item. Поставите скоро било који опциони ХТМЛ унутра и он ће аутоматски бити поравнат и форматиран.

Ознака првог слајда

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

Ознака другог слајда

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит.

Ознака трећег слајда

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

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

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

$('.carousel').carousel()

Опције

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

Методе

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

Догађаји

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

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

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

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

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

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

Пример

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

Употреба

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

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

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

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

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

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

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

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

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

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

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

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

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

Опције

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

Методе

.affix(options)

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

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

.affix('checkPosition')

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

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

Догађаји

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