Агляд

Індывідуальныя або складзеныя

Убудовы можна ўключаць паасобку (з выкарыстаннем індывідуальных *.jsфайлаў Bootstrap) або ўсе адразу (з дапамогай bootstrap.jsабо мініфікаванага bootstrap.min.js).

Атрыбуты дадзеных

Вы можаце выкарыстоўваць усе плагіны Bootstrap выключна праз API разметкі, не напісаўшы ніводнага радка JavaScript. Гэта першакласны API Bootstrap, на які вы павінны звяртаць увагу ў першую чаргу пры выкарыстанні плагіна.

Тым не менш, у некаторых сітуацыях можа быць пажадана адключыць гэтую функцыю. Такім чынам, мы таксама даем магчымасць адключыць API атрыбутаў даных, адмяніўшы прывязку ўсіх падзей у прасторы імёнаў дакумента з data-api. Гэта выглядае так:

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

У якасці альтэрнатывы, каб арыентавацца на пэўны плагін, проста ўключыце імя плагіна ў якасці прасторы імёнаў разам з прасторай імёнаў data-api, як гэта:

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

Праграмны API

Мы таксама лічым, што вы павінны мець магчымасць выкарыстоўваць усе плагіны Bootstrap выключна праз JavaScript API. Усе агульнадаступныя API з'яўляюцца адзінкавымі метадамі з ланцужком і вяртаюць калекцыю, на якую дзейнічаюць.

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

Усе метады павінны прымаць неабавязковы аб'ект опцый, радок, які накіраваны на пэўны метад, або нічога (што ініцыюе плагін з паводзінамі па змаўчанні):

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

Кожны плагін таксама паказвае свой неапрацаваны канструктар ва Constructorўласцівасці: $.fn.popover.Constructor. Калі вы жадаеце атрымаць пэўны асобнік плагіна, атрымайце яго непасрэдна з элемента: $('[rel="popover"]').data('popover').

Налады па змаўчанні

Вы можаце змяніць налады па змаўчанні для плагіна, змяніўшы Constructor.DEFAULTSаб'ект плагіна:

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

Без канфлікту

Часам неабходна выкарыстоўваць плагіны Bootstrap з іншымі структурамі карыстацкага інтэрфейсу. У такіх абставінах перыядычна могуць узнікаць сутыкненні прасторы імёнаў. Калі гэта адбудзецца, вы можаце выклікаць .noConflictплагін, значэнне якога хочаце вярнуць.

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

Падзеі

Bootstrap забяспечвае карыстальніцкія падзеі для большасці унікальных дзеянняў плагінаў. Як правіла, яны бываюць у форме інфінітыва і дзеепрыметніка прошлага часу - дзе інфінітыў (напр. show) спрацоўвае ў пачатку падзеі, а яго форма прошлага дзеепрыметніка (напр. shown) спрацоўвае пасля завяршэння дзеяння.

Пачынаючы з версіі 3.0.0, усе падзеі Bootstrap маюць прасторы імёнаў.

Усе інфінітыўныя падзеі забяспечваюць preventDefaultфункцыянальнасць. Гэта забяспечвае магчымасць спыніць выкананне дзеяння да яго пачатку.

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

Нумары версій

Да версіі кожнага з плагінаў jQuery Bootstrap можна атрымаць доступ праз VERSIONуласцівасць канструктара плагіна. Напрыклад, для плагіна падказкі:

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

Няма спецыяльных рэзервовых варыянтаў, калі JavaScript адключаны

Убудовы Bootstrap не адмаўляюцца асабліва вытанчана, калі JavaScript адключаны. Калі вы клапоціцеся аб узаемадзеянні з карыстальнікам у гэтым выпадку, выкарыстоўвайце <noscript>для тлумачэння сітуацыі (і таго, як паўторна ўключыць JavaScript) вашым карыстальнікам, і/або дадайце свае ўласныя запасныя варыянты.

Пераходы conversion.js

Пра пераходы

Для простых эфектаў пераходу ўключыце transition.jsадзін раз разам з іншымі файламі JS. Калі вы выкарыстоўваеце скампіляваны (або мініфікаваны) bootstrap.js, няма неабходнасці ўключаць гэта — яно ўжо ёсць.

Што ўнутры

Transition.js - гэта асноўны памочнік для transitionEndпадзей, а таксама эмулятар пераходу CSS. Ён выкарыстоўваецца іншымі плагінамі для праверкі падтрымкі пераходаў CSS і для ўлоўлівання завіслых пераходаў.

Адключэнне пераходаў

Пераходы можна глабальна адключыць з дапамогай наступнага фрагмента JavaScript, які павінен з'явіцца пасля загрузкі transition.js(або bootstrap.js, bootstrap.min.jsу залежнасці ад выпадку):

$.support.transition = false

Мадальныя modal.js

Modals - гэта абцякальныя, але гнуткія дыялогавыя падказкі з мінімальнымі неабходнымі функцыянальнымі магчымасцямі і разумнымі наладамі па змаўчанні.

З-за таго, як 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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Выдаліць анімацыю

Для мадалаў, якія проста з'яўляюцца, а не знікаюць для прагляду, выдаліце .fade​​клас з вашай мадальнай разметкі.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Выкарыстанне сістэмы сеткі

Каб скарыстацца перавагамі сеткавай сістэмы Bootstrap у мадальным, проста ўкладзіце .rows у .modal-bodyа затым выкарыстоўвайце звычайныя класы сеткавай сістэмы.

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

Змяненне мадальнага кантэнту на аснове кнопкі запуску

У вас ёсць куча кнопак, якія запускаюць адзін і той жа мадальны рэжым, толькі з трохі розным зместам? Выкарыстоўвайце атрыбуты HTML (магчыма, event.relatedTargetпраз jQuery ), каб змяняць змесціва мадальнага элемента ў залежнасці ад таго, якая кнопка была націснута. Глядзіце дакументацыю мадальных падзей для атрымання падрабязнай інфармацыі аб ,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)
})

Выкарыстанне

Мадальны плагін пераключае ваш схаваны кантэнт па патрабаванні праз атрыбуты дадзеных або JavaScript. Гэта таксама дадае .modal-openда <body>перавызначэння паводзін пракруткі па змаўчанні і стварае .modal-backdropвобласць пстрычкі для адхілення паказаных мадалаў пры пстрычцы па-за межамі мадальнасці.

Праз атрыбуты дадзеных

Актывуйце мадальны без напісання JavaScript. Усталюйце data-toggle="modal"элемент кантролера, напрыклад кнопку, разам з data-target="#foo"або href="#foo", каб нацэліць на пэўны мадаль для пераключэння.

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

Праз JavaScript

Выклік мадальнага з ідэнтыфікатарам myModalз дапамогай аднаго радка JavaScript:

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

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-backdrop="".

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

Выпадальныя меню dropdown.js

Прыклады

Дадайце выпадальныя меню практычна да ўсяго з дапамогай гэтага простага плагіна, у тым ліку да навігацыйнай панэлі, укладак і таблетак.

У панэлі навігацыі

У таблетках

Выкарыстанне

З дапамогай атрыбутаў дадзеных або JavaScript плагін выпадальнага меню пераключае схаваны кантэнт (выпадаючыя меню), пераключаючы .openклас у бацькоўскім пункце спісу.

На мабільных прыладах адкрыццё выпадальнага меню дадае .dropdown-backdropвобласць націску для закрыцця выпадаючых меню пры націсканні па-за межамі меню, патрабаванне для належнай падтрымкі iOS. Гэта азначае, што для пераключэння з адкрытага выпадальнага меню на іншае выпадальнае меню патрабуецца дадатковы націск на мабільным тэлефоне.

Заўвага: data-toggle="dropdown"атрыбут выкарыстоўваецца для закрыцця выпадаючых меню на ўзроўні прыкладанняў, таму добрая ідэя заўсёды выкарыстоўваць яго.

Праз атрыбуты дадзеных

Дадайце data-toggle="dropdown"да спасылкі або кнопкі, каб пераключыць выпадальны спіс.

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

Каб захаваць URL-адрас з кнопкамі спасылкі, выкарыстоўвайце data-targetатрыбут замест href="#".

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

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

Праз JavaScript

Выклік выпадаючых меню праз JavaScript:

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

Параметры

Няма

Метады

$().dropdown('toggle')

Пераключае выпадальнае меню дадзенай панэлі навігацыі або навігацыі з укладкамі.

Падзеі

Усе выпадаючыя падзеі запускаюцца ў .dropdown-menuбацькоўскім элеменце.

Усе выпадаючыя падзеі маюць relatedTargetуласцівасць, значэннем якой з'яўляецца перамыкаючы прывязны элемент.

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

ScrollSpy scrollspy.js

Прыклад у панэлі навігацыі

Плагін ScrollSpy прызначаны для аўтаматычнага абнаўлення мэт навігацыі на аснове пазіцыі пракруткі. Пракруціце вобласць пад панэллю навігацыі і паглядзіце, як змяняецца актыўны клас. Выпадальныя падпункты таксама будуць вылучаны.

Выкарыстанне

Патрабуецца адноснае размяшчэнне

Незалежна ад спосабу рэалізацыі, Scrollspy патрабуе выкарыстання position: relative;на элеменце, за якім вы шпіёніце. У большасці выпадкаў гэта <body>. Калі скруткі шпіёняць за іншымі элементамі, акрамя <body>, пераканайцеся, што ў вас ёсць heightнабор і overflow-y: scroll;ўжыты.

Праз атрыбуты дадзеных

Каб лёгка дадаць шпіёнскія паводзіны пракруткі ў верхнюю панэль навігацыі, дадайце data-spy="scroll"элемент, за якім вы хочаце сачыць (часцей за ўсё гэта будзе <body>). Затым дадайце data-targetатрыбут з ідэнтыфікатарам або класам бацькоўскага элемента любога .navкампанента Bootstrap.

body {
  position: relative;
}

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

Праз JavaScript

Пасля дадання position: relative;вашага CSS выклічце scrollspy праз JavaScript:

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

Метады

.scrollspy('refresh')

Пры выкарыстанні scrollspy у спалучэнні з даданнем або выдаленнем элементаў з DOM вам трэба будзе выклікаць метад абнаўлення так:

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

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-offset="".

Падзеі

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

Перамыкаемыя ўкладкі tab.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>сімваламі з 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
})

Падказкі 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…
})

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

Выкарыстанне

Уключыць усплывальныя вокны праз 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…
})

Кнопкі button.js

Рабіце больш з кнопкамі. Станы кнопак кіравання або стварэнне груп кнопак для дадатковых кампанентаў, такіх як панэлі інструментаў.

Дзяржаўны

Дадаць data-loading-text="Loading...", каб выкарыстоўваць стан загрузкі на кнопцы.

Гэта функцыя састарэла з версіі 3.3.5 і была выдалена ў версіі 4.

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

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

Адзіночны перамыкач

Дадаць data-toggle="button", каб актываваць пераключэнне адной кнопкай.

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

Сцяжок / Радыё

Каб уключыць пераключэнне ў адпаведных стылях, дадайце data-toggle="buttons"ў сцяжок, .btn-groupякі змяшчае сцяжок, або радыёўводы.

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

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

Метады

$().button('toggle')

Пераключае стан націскання. Дае кнопцы выгляд, што яна была актываваная.

$().button('reset')

Скідае стан кнопкі - мяняе тэкст на зыходны тэкст. Гэты метад з'яўляецца асінхронным і вяртаецца да фактычнага завяршэння скіду.

$().button(string)

Мяняе тэкст на любы тэкст, вызначаны дадзенымі.

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

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

Згарнуць collapse.js

Гнуткі плагін, які выкарыстоўвае некалькі класаў для лёгкага пераключэння.

Прыклад

Націсніце кнопкі ніжэй, каб паказаць і схаваць іншы элемент праз змены класа:

• .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"і data-targetда элемента, каб аўтаматычна прызначыць кантроль над складаным элементам. Атрыбут data-targetпрымае селектар CSS для прымянення згортвання. Абавязкова дадайце клас collapseда разборнага элемента. Калі вы хочаце, каб ён быў адкрыты па змаўчанні, дадайце дадатковы клас in.

Каб дадаць кіраванне групамі ў стылі акардэона да згортваемага элемента кіравання, дадайце атрыбут data 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…
})

Карусель carousel.js

Кампанент слайд-шоў для перамяшчэння па элементах, такіх як карусель. Укладзеныя каруселі не падтрымліваюцца.

Прыклады

Папярэдні Далей

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

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

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

Неабавязковыя подпісы

Лёгка дадавайце подпісы да слайдаў з дапамогай .carousel-captionэлемента ў любым .item. Змесціце туды практычна любы дадатковы HTML, і ён будзе аўтаматычна выраўнаваны і адфарматаваны.

Этыкетка першага слайда

Nulla vitae elit libero, a 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;on.affix , для гэтых класаў (незалежна ад гэтага плагіна), каб апрацоўваць фактычныя пазіцыі.

Вось як працуе плагін афіксаў:

1. Для пачатку убудова дадае.affix-top , каб паказаць, што элемент знаходзіцца ў самым верхнім становішчы. На дадзены момант пазіцыянаванне CSS не патрабуецца.
2. Пракрутка міма элемента, які вы хочаце прымацаваць, павінна выклікаць фактычнае прымацаванне. Тут .affixзамяняе .affix-topі ўсталёўвае position: fixed;(прадастаўляецца CSS Bootstrap).
3. Калі вызначана ніжняе зрушэнне, пракрутка міма яго павінна замяніць .affixна .affix-bottom. Паколькі зрушэнні не з'яўляюцца абавязковымі, іх усталяванне патрабуе ўсталявання адпаведнага CSS. У гэтым выпадку дадавайце position: absolute;пры неабходнасці. Убудова выкарыстоўвае атрыбут data або опцыю JavaScript, каб вызначыць, дзе размясціць элемент адтуль.

Выканайце апісаныя вышэй дзеянні, каб наладзіць свой CSS для любога з прыведзеных ніжэй варыянтаў выкарыстання.

Праз атрыбуты дадзеных

Каб лёгка дадаць паводзіны афіксаў да любога элемента, проста дадайце data-spy="affix"да элемента, за якім вы хочаце сачыць. Выкарыстоўвайце зрухі, каб вызначыць, калі пераключаць замацаванне элемента.

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

Праз JavaScript

Выклік плагіна афіксаў праз JavaScript:

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

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-offset-top="200".

Метады

.affix(options)

Актывуе ваш кантэнт як прымацаваны кантэнт. Прымае дадатковыя параметры object.

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

.affix('checkPosition')

Пералічвае стан афікса на аснове памераў, становішча і становішча пракруткі адпаведных элементаў. Класы .affix, .affix-top, і .affix-bottomдадаюцца або выдаляюцца з прымацаванага змесціва ў адпаведнасці з новым станам. Гэты метад неабходна выклікаць кожны раз, калі змяняюцца памеры прымацаванага змесціва або мэтавага элемента, каб забяспечыць правільнае размяшчэнне прымацаванага змесціва.

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

Падзеі

Убудова афіксаў Bootstrap паказвае некалькі падзей для падключэння да функцыянальнасці афіксаў.