Агляд

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

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

Выкарыстанне скампіляванага JavaScript

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

Залежнасці плагіна

Некаторыя ўбудовы і кампаненты CSS залежаць ад іншых убудоў. Калі вы ўключаеце плагіны паасобку, пераканайцеся, што праверылі гэтыя залежнасці ў дакументах. Таксама звярніце ўвагу, што ўсе плагіны залежаць ад jQuery (гэта азначае, што jQuery павінен быць уключаны перад файламі плагінаў). Пракансультуйцеся з наміbower.json , каб даведацца, якія версіі jQuery падтрымліваюцца.

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

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

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

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

У якасці альтэрнатывы, каб арыентавацца на пэўны плагін, проста ўключыце імя плагіна ў якасці прасторы імёнаў разам з прасторай імёнаў 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) вашым карыстальнікам, і/або дадайце свае ўласныя запасныя варыянты.

Бібліятэкі трэціх асоб

Bootstrap афіцыйна не падтрымлівае староннія бібліятэкі JavaScript, такія як Prototype або jQuery UI. Нягледзячы на .noConflict​​падзеі прасторы імёнаў, могуць узнікнуць праблемы сумяшчальнасці, якія вам трэба выправіць самастойна.

Пераходы 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 - гэта абцякальныя, але гнуткія дыялогавыя падказкі з мінімальнымі неабходнымі функцыянальнымі магчымасцямі і разумнымі наладамі па змаўчанні.

Некалькі адкрытых мадалаў не падтрымліваюцца

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

Размяшчэнне мадальнай разметкі

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

Засцярогі для мабільных прылад

Ёсць некаторыя засцярогі адносна выкарыстання мадалаў на мабільных прыладах. Падрабязнасці глядзіце ў дакументах падтрымкі браўзераў .

З-за таго, як HTML5 вызначае сваю семантыку, autofocusатрыбут HTML не мае ніякага эфекту ў мадальных варыянтах Bootstrap. Каб дасягнуць таго ж эфекту, выкарыстоўвайце карыстацкі JavaScript:

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

Прыклады

Статычны прыклад

Візуалізаваны мадальны з загалоўкам, тэкстам і наборам дзеянняў у ніжнім калонтытуле.

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

Жывая дэманстрацыя

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

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

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

Зрабіць мадалы даступнымі

Не забудзьцеся дадаць role="dialog"і aria-labelledby="...", спасылаючыся на мадальны загаловак, да .modalі role="document"да самога .modal-dialogсябе.

Акрамя таго, вы можаце даць апісанне вашага мадальнага дыялогу з aria-describedbyon .modal.

Ўбудаванне відэа YouTube

Убудаванне відэа YouTube у мадальныя формы патрабуе дадатковага JavaScript не ў Bootstrap для аўтаматычнай прыпынку прайгравання і шмат іншага. Глядзіце гэты карысны пост Stack Overflow для атрымання дадатковай інфармацыі.

Дадатковыя памеры

У мадалаў ёсць два неабавязковыя памеры, даступныя праз класы-мадыфікатары, якія размяшчаюцца на .modal-dialog.

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

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

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

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

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

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

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

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

Каб скарыстацца перавагамі сеткавай сістэмы Bootstrap у мадальным, проста ўкладзіце .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="".

Імя тыпу па змаўчанні апісанне
заднік лагічны або радок'static' праўда Уключае элемент мадальнага фону. У якасці альтэрнатывы ўкажыце staticдля фону, які не закрывае мадальнае пры пстрычцы.
клавіятура лагічны праўда Закрывае мадальнае, калі націснута клавіша выхаду
паказаць лагічны праўда Паказвае мадальнае пры ініцыялізацыі.
аддалены шлях ілжывы

Гэтая опцыя састарэла з версіі 3.3.0 і была выдалена ў версіі 4. Мы рэкамендуем замест гэтага выкарыстоўваць шаблоны на баку кліента або структуру прывязкі даных, або самастойна выклікаць jQuery.load .

Калі аддалены URL-адрас, кантэнт будзе загружаны адзін раз з дапамогай метаду jQuery loadі ўведзены ў .modal-contentdiv. Калі вы выкарыстоўваеце data-api, вы можаце ў якасці альтэрнатывы выкарыстоўваць hrefатрыбут для ўказання аддаленай крыніцы. Прыклад гэтага паказаны ніжэй:

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

Метады

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

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

Уручную пераключае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр будзе паказаны або схаваны (г.зн. да таго , як адбудзецца падзея shown.bs.modalабо ).hidden.bs.modal

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

Уручную адкрывае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр быў фактычна паказаны (г.зн. да таго , як shown.bs.modalадбудзецца падзея).

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

Уручную хавае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр быў фактычна схаваны (г.зн. да таго, як hidden.bs.modalадбылася падзея).

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

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

Патрэбны толькі тады, калі вышыня мадальнага элемента змяняецца, калі ён адкрыты.

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

Падзеі

Мадальны клас Bootstrap паказвае некалькі падзей для падключэння да мадальнай функцыянальнасці.

Усе мадальныя падзеі запускаюцца ў сам мадальны (г.зн. у <div class="modal">).

Тып падзеі Апісанне
show.bs.modal Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка. Калі гэта выклікана пстрычкай, націснуты элемент даступны як relatedTargetуласцівасць падзеі.
паказаны.bs.modal Гэта падзея запускаецца, калі мадальны элемент становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS). Калі гэта выклікана пстрычкай, націснуты элемент даступны як relatedTargetуласцівасць падзеі.
hide.bs.modal Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
схаваны.bs.мадальны Гэта падзея запускаецца, калі мадальны элемент перастае быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
loaded.bs.modal Гэта падзея запускаецца, калі мадальны рэжым загрузіў кантэнт з дапамогай remoteопцыі.
$('#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()

data-toggle="dropdown"яшчэ патрабуецца

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

Няма

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

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

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

Тып падзеі Апісанне
show.bs.dropdown Гэта падзея спрацоўвае неадкладна пры выкліку метаду паказу экземпляра.
паказаны.bs.выпадальны спіс Гэта падзея запускаецца, калі выпадальнае меню становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.dropdown Гэта падзея запускаецца неадкладна, калі быў выкліканы метад экзэмпляра hide.
hidden.bs.dropdown Гэта падзея запускаецца, калі выпадальнае меню скончана хавацца ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

@тоўсты

Рэкламныя легінсы кейтар, бранч ід арт вечарынка долар працы. Pitchfork yr enim lo-fi, перш чым яны раскупілі qui. Правы на веласіпеды Tumblr ад фермы да стала. Кардіган Anim keffiyeh Carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Швэдар Cosby, джынсавыя шорты ў стылі лома, талстоўка з капюшонам Williamsburg, мінімальная талстоўка, пра якую вы, напэўна, не чулі, і кардыган, траставы фонд, эстэтыка біядызеля Уэса Андэрсана. Nihil вытатуяваны акузамус, іронія біядызель keffiyeh рамеснік ullamco consequat.

@mdo

Веніям марфа вусы скейтборд, адзіпісінг фугіат вяліт вілы барада. Барада Фрыгана, як купідатат Вера Максуіні. Cupidatat four loko nisi, ea helvetica nulla carles. Швэдар Косбі з татуіроўкамі, фуд-трак, вінілавая кружэлка mcsweeney's quis non freegan. Lo-fi Уэс Андэрсан +1 швейнае майстэрства. Carles неэстэтычнае практыкаванне quis gentrify. Brooklyn adipisicing vice beer vice keytar deserunt.

адзін

Occaecat commodo aliqua delectus. Fap крафтавае піва дэзерунт скейтборд ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin кава in magna veniam. High life id вініл, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi мініяцюрная сумка DIY. Cred ex in, sustainable delectus consectetur fanny pack iphone.

два

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Сапіентэ сінтэз ідэнтыфікатар мяркуецца. Locavore sed helvetica cliche іронія, thundercats, вы напэўна не чулі пра іх consequat талстоўка без глютена lo-fi fap aliquip. Labore elit placeat, перш чым яны былі распрададзеныя, Тэры Рычардсан прадастаўляў позні сняданак, не знайшоўшы касбі швэдар, парыятур кефія, або helvetica artisan. Кардіган крафтавы піва сейтан гатовы веліт. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

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

Патрабуецца навігацыя Bootstrap

У цяперашні час Scrollspy патрабуе выкарыстання навігацыйнага кампанента Bootstrap для правільнага вылучэння актыўных спасылак.

Патрабуюцца вырашальныя мэты ID

Спасылкі на панэлі навігацыі павінны мець дазвольныя ідэнтыфікатары. Напрыклад, <a href="#home">home</a>павінен адпавядаць чаму-небудзь у DOM, напрыклад <div id="home"></div>.

Немэтавыя :visibleэлементы ігнаруюцца

Мэтавыя элементы, якія не адпавядаюць :visiblejQuery , будуць ігнаравацца, а іх адпаведныя элементы навігацыі ніколі не будуць вылучаны.

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

Незалежна ад спосабу рэалізацыі, 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="".

Імя тыпу па змаўчанні апісанне
зрушэнне лік 10 Пікселі для зрушэння ад верху пры разліку пазіцыі пракруткі.

Падзеі

Тып падзеі Апісанне
activate.bs.scrollspy Гэта падзея спрацоўвае кожны раз, калі новы элемент актывуецца ScrollSpy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Перамыкаемыя ўкладкі tab.js

Прыклады ўкладак

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

Неапрацаваны дэнім, вы напэўна не чулі пра іх джынсавыя шорты Осцін. Nesciunt tofu stumptown aliqua, рэтра-сінтэзатар майстар ачысткі. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Швэдар Cosby eu banh mi, qui irure Тэры Рычардсан былы кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis кардыган амерыканскае адзенне, мяснік voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Пашырае навігацыю з укладкамі

Гэты плагін пашырае кампанент навігацыі з укладкамі для дадання абласцей з укладкамі.

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

Уключыць укладкі з дапамогай JavaScript (кожную ўкладку неабходна актываваць асобна):

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

Вы можаце актываваць асобныя ўкладкі некалькімі спосабамі:

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

Разметка

Вы можаце актываваць навігацыю па ўкладках або таблетках без напісання JavaScript, проста ўказаўшы data-toggle="tab"або data-toggle="pill"на элеменце. Даданне класаў navі nav-tabsна ўкладку ulпрыменіць стыль укладкі Bootstrap , у той час як даданне класаў і navпрыменіць стыль таблеткі .nav-pills

<div>

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

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

</div>

Эфект выцвітання

Каб укладкі знікалі, дадайце .fadeда кожнай .tab-pane. Першая панэль укладак таксама павінна .inзрабіць пачатковы кантэнт бачным.

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

Метады

$().tab

Актывуе элемент укладкі і кантэйнер змесціва. На ўкладцы павінна быць альбо data-targetабо, hrefарыентаванае на вузел кантэйнера ў DOM. У прыведзеных вышэй прыкладах табуляцыі з'яўляюцца <a>сімваламі з 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не будуць запушчаны.

Тып падзеі Апісанне
паказаць.bs.tab Гэта падзея запускаецца падчас паказу ўкладак, але да таго, як будзе паказана новая ўкладка. Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку (калі ёсць) адпаведна.
паказаны.bs.tab Гэта падзея спрацоўвае падчас паказу ўкладак пасля паказу ўкладкі. Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку (калі ёсць) адпаведна.
hide.bs.tab Гэта падзея спрацоўвае, калі трэба паказаць новую ўкладку (і, такім чынам, папярэднюю актыўную ўкладку трэба схаваць). Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на бягучую актыўную ўкладку і новую ўкладку, якая хутка стане актыўнай, адпаведна.
схаваная.bs.ўкладка Гэта падзея спрацоўвае пасля таго, як новая ўкладка паказваецца (і, такім чынам, папярэдняя актыўная ўкладка схавана). Выкарыстоўвайце event.targetі event.relatedTarget, каб нацэліць на папярэднюю актыўную ўкладку і на новую актыўную ўкладку адпаведна.
$('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 для анімацыі і атрыбуты даных для лакальнага захоўвання загалоўкаў.

Падказкі з загалоўкамі нулявой даўжыні ніколі не адлюстроўваюцца.

Прыклады

Навядзіце курсор на спасылкі ніжэй, каб убачыць падказкі:

Вузкія штаны новага ўзроўню кефія , вы напэўна не чулі пра іх. Photobooth beard raw denim highprint веганская сумка-мессенджер stumptown. Сейтан ад фермы да стала, 8-бітнае амерыканскае адзенне McSweeney's Sustainable quinoa мае вінілавае шамбрэ Тэры Рычардсана . Барада стамптаун, кардіганы banh mi lomo thundercats. Біядызельнае паліва тофу, уільямсбургская марфа, веганскі шамбре з чатырох лока Максвіні. Сапраўды іранічны рамеснік незалежна ад таго, кейтар , сцэніст ад фермы да стала, Бэнксі Осцін, твітэр, ручка , фрыган, крэда, сырая джынсавая кава, вірус аднаго паходжання.

Статычная падказка

Даступныя чатыры варыянты: выраўноўванне паверсе, справа, унізе і па левым краі.

Чатыры кірункі

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

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

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

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

Функцыянальнасць выбару

З меркаванняў прадукцыйнасці Tooltip і Popover data-apis з'яўляюцца выбарнымі, што азначае, што вы павінны ініцыялізаваць іх самастойна .

Адзін са спосабаў ініцыялізаваць усе падказкі на старонцы - выбраць іх па data-toggleатрыбутах:

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

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

Убудова ўсплывальнай падказкі стварае кантэнт і разметку па патрабаванні і па змаўчанні размяшчае ўсплывальныя падказкі пасля элемента запуску.

Запусціць падказку праз JavaScript:

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

Разметка

Неабходная разметка для ўсплываючай падказкі - гэта толькі dataатрыбут, а titleна HTML-элеменце вы хочаце мець падказку. Створаная разметка ўсплываючай падказкі даволі простая, хаця для яе патрабуецца пазіцыя (па змаўчанні, усталяваная topўбудовай).

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

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

Шматрадковыя спасылкі

Часам вы хочаце дадаць падказку да гіперспасылкі, якая ахоплівае некалькі радкоў. Па змаўчанні ўбудова ўсплывальнай падказкі адцэнтравана па гарызанталі і вертыкалі. white-space: nowrap;Каб пазбегнуць гэтага, дадайце ў свае якары.

Падказкі ў групах кнопак, групах уводу і табліцах патрабуюць спецыяльнай налады

Пры выкарыстанні ўсплывальных падказак для элементаў у межах a .btn-groupабо .input-group, або для элементаў, звязаных з табліцай ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), вам трэба будзе пазначыць опцыю container: 'body'(дакументавана ніжэй), каб пазбегнуць непажаданых пабочных эфектаў (напрыклад, пашырэнне элемента і/ або страта закругленых вуглоў пры спрацоўванні падказкі).

Не спрабуйце паказваць падказкі на схаваных элементах

Выклік $(...).tooltip('show'), калі мэтавы элемент ёсць display: none;, прывядзе да няправільнага размяшчэння ўсплывальнай падказкі.

Даступныя падказкі для карыстальнікаў клавіятуры і дапаможных тэхналогій

Для карыстальнікаў, якія перамяшчаюцца з дапамогай клавіятуры, і, у прыватнасці, для карыстальнікаў дапаможных тэхналогій, вы павінны дадаваць усплывальныя падказкі толькі да элементаў, якія факусуюцца з клавіятуры, такіх як спасылкі, элементы кіравання формамі або любыя адвольныя элементы з tabindex="0"атрыбутамі.

Падказкі для адключаных элементаў патрабуюць элементаў-абгортак

Каб дадаць падказку да элемента disabledабо .disabled, змясціце элемент у а <div>і прымяніце да яго ўсплывальную падказку <div>.

Параметры

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

Імя Тып Па змаўчанні Апісанне
анімацыя лагічны праўда Прымяніце пераход знікнення CSS да падказкі
кантэйнер радок | ілжывы ілжывы

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

затрымка нумар | аб'ект 0

Затрымка паказу і хавання ўсплывальнай падказкі (мс) - не прымяняецца да ручнога тыпу трыгера

Калі ўказана лічба, затрымка прымяняецца як для схавання, так і для паказу

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

html лагічны ілжывы Устаўце HTML у падказку. Калі false, textдля ўстаўкі кантэнту ў DOM будзе выкарыстоўвацца метад jQuery. Выкарыстоўвайце тэкст, калі вы турбуецеся аб атаках XSS.
размяшчэнне радок | функцыя "топ"

Як размясціць падказку - зверху | унізе | злева | справа | аўто.
Калі пазначана «аўтаматычна», падказка будзе дынамічна пераарыентавацца. Напрыклад, калі размяшчэнне "аўтаматычна злева", падказка будзе адлюстроўвацца злева, калі гэта магчыма, у адваротным выпадку - справа.

Калі функцыя выкарыстоўваецца для вызначэння размяшчэння, яна выклікаецца з вузлом DOM падказкі ў якасці першага аргумента і вузлом DOM элемента запуску ў якасці другога. Кантэкст thisусталяваны для асобніка падказкі.

селектар радок ілжывы Калі прадастаўляецца селектар, аб'екты ўсплывальнай падказкі будуць дэлегаваны ўказаным мэтам. На практыцы гэта выкарыстоўваецца для таго, каб дадаваць падказкі да дынамічнага зместу HTML. Глядзіце гэта і інфарматыўны прыклад .
шаблон радок '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Базавы HTML для выкарыстання пры стварэнні падказкі.

Падказка titleбудзе ўстаўлена ў .tooltip-inner.

.tooltip-arrowстане стрэлкай падказкі.

Самы знешні элемент-абгортка павінен мець .tooltipклас.

назва радок | функцыя ''

Значэнне загалоўка па змаўчанні, калі titleатрыбут адсутнічае.

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

трыгер радок "фокус пры навядзенні" Як спрацоўвае падказка - націсніце | лунаць | фокус | кіраўніцтва. Вы можаце перадаць некалькі трыгераў; падзяліце іх прабелам. manualнельга спалучаць з любым іншым трыгерам.
акно прагляду радок | аб'ект | функцыя { селектар: 'цела', абіўка: 0}

Захоўвае падказку ў межах гэтага элемента. Прыклад: viewport: '#viewport'ці{ "selector": "#viewport", "padding": 0 }

Калі функцыя зададзена, яна выклікаецца з запускаючым элементам вузла DOM у якасці адзінага аргумента. Кантэкст thisусталяваны для асобніка падказкі.

Атрыбуты дадзеных для асобных падказак

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

Метады

$().tooltip(options)

Далучае апрацоўшчык падказкі да калекцыі элементаў.

.tooltip('show')

Адкрывае падказку элемента. Вяртаецца да абанента да таго, як была фактычна паказана ўсплывальная падказка (г.зн. да таго , як shown.bs.tooltipадбудзецца падзея). Гэта лічыцца «ручным» запускам падказкі. Падказкі з загалоўкамі нулявой даўжыні ніколі не адлюстроўваюцца.

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

.tooltip('hide')

Хавае падказку элемента. Вяртаецца да абанента да таго, як падказка была фактычна схавана (г.зн. да таго, як hidden.bs.tooltipадбылася падзея). Гэта лічыцца «ручным» запускам падказкі.

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

.tooltip('toggle')

Пераключае падказку элемента. Вяртаецца да абанента да таго, як падказка была фактычна паказана або схавана (г.зн. да таго , як адбудзецца падзея shown.bs.tooltipабо ). hidden.bs.tooltipГэта лічыцца «ручным» запускам падказкі.

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

.tooltip('destroy')

Хавае і знішчае падказку элемента. Усплывальныя падказкі, якія выкарыстоўваюць дэлегаванне (якія ствараюцца з выкарыстаннем параметра ) selector, не могуць быць індывідуальна знішчаны на нашчадных трыгерных элементах.

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

Падзеі

Тып падзеі Апісанне
show.bs.tooltip Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
паказаны.bs.tooltip Гэта падзея запускаецца, калі падказка становіцца бачнай для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.tooltip Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
hidden.bs.tooltip Гэта падзея запускаецца, калі падказка перастае быць схаванай ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
inserted.bs.tooltip Гэта падзея запускаецца пасля show.bs.tooltipпадзеі, калі шаблон падказкі быў дададзены ў DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popover popover.js

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

Усплывальныя вокны, назва і змест якіх маюць нулявую даўжыню, ніколі не адлюстроўваюцца.

Залежнасць плагіна

Усплывальныя падказкі патрабуюць, каб у вашу версію Bootstrap быў уключаны плагін падказкі .

Функцыянальнасць выбару

З меркаванняў прадукцыйнасці Tooltip і Popover data-apis з'яўляюцца выбарнымі, што азначае, што вы павінны ініцыялізаваць іх самастойна .

Адзін са спосабаў ініцыялізаваць усе ўсплывальныя вокны на старонцы - выбраць іх па data-toggleатрыбутах:

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

Усплывальныя вобразы ў групах кнопак, групах уводу і табліцах патрабуюць спецыяльнай налады

Пры выкарыстанні ўсплываючых элементаў на элементах у .btn-groupабо .input-group, або на элементах, звязаных з табліцай ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), вам трэба будзе пазначыць опцыю container: 'body'(дакументавана ніжэй), каб пазбегнуць непажаданых пабочных эфектаў (напрыклад, пашырэння элемента і/ або страта закругленых вуглоў, калі спрацоўвае ўсплывальнае акно).

Не спрабуйце паказаць усплывальныя элементы на схаваных элементах

Выклік $(...).popover('show'), калі мэтавы элемент ёсць display: none;, прывядзе да няправільнага размяшчэння ўсплываючага акна.

Усплывальныя элементы на адключаных элементах патрабуюць элементаў-абгортак

Каб дадаць усплывальнае акно да элемента disabledабо .disabled, змясціце элемент унутр а <div>і прымяніце да яго ўсплывальнае акно <div>.

Шматрадковыя спасылкі

Часам вы хочаце дадаць усплывальнае акно да гіперспасылкі, якая ахоплівае некалькі радкоў. Паводзін плагіна ўсплываючага меню па змаўчанні - адцэнтраваць яго па гарызанталі і вертыкалі. white-space: nowrap;Каб пазбегнуць гэтага, дадайце ў свае якары.

Прыклады

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

Даступныя чатыры варыянты: выраўноўванне паверсе, справа, унізе і па левым краі.

Поповер топ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Усплыванне справа

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер знізу

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер сышоў

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Жывая дэманстрацыя

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

Чатыры кірункі

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

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

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

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

Адхіліць пры наступным пстрычцы

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

Спецыяльная разметка патрабуецца для адхілення пры наступным пстрычцы

Для належнага крос-браўзернага і крос-платформеннага паводзінаў вы павінны выкарыстоўваць <a>тэг, а не тэг <button>, і вы таксама павінны ўключыць атрыбуты role="button"і .tabindex

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

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

Уключыць усплывальныя вокны праз JavaScript:

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

Параметры

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

Імя Тып Па змаўчанні Апісанне
анімацыя лагічны праўда Прымяніце пераход знікнення CSS да ўсплываючага акна
кантэйнер радок | ілжывы ілжывы

Дадае ўсплывальнае акно да пэўнага элемента. Прыклад: container: 'body'. Гэтая опцыя асабліва карысная ў тым плане, што яна дазваляе размясціць усплывальнае акно ў патоку дакумента побач з запускаючым элементам, што прадухіліць адплыванне ўсплывальнага акна ад запускаючага элемента падчас змены памеру акна.

змест радок | функцыя ''

Значэнне змесціва па змаўчанні ifdata-content атрыбут адсутнічае.

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

затрымка нумар | аб'ект 0

Затрымка паказу і схавання ўсплываючага акна (мс) - не прымяняецца да ручнога тыпу запуску

Калі ўказана лічба, затрымка прымяняецца як для схавання, так і для паказу

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

html лагічны ілжывы Устаўце HTML ва ўсплывальнае акно. Калі false, textдля ўстаўкі кантэнту ў DOM будзе выкарыстоўвацца метад jQuery. Выкарыстоўвайце тэкст, калі вы турбуецеся аб атаках XSS.
размяшчэнне радок | функцыя "права"

Як размясціць повер - зверху | унізе | злева | справа | аўто.
Калі пазначана "аўта", гэта будзе дынамічна пераарыентаваць усплывальнае вобраз. Напрыклад, калі размяшчэнне "аўтаматычна злева", усплывальнае акно будзе адлюстроўвацца злева, калі гэта магчыма, у адваротным выпадку яно будзе адлюстроўвацца справа.

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

селектар радок ілжывы Калі прадастаўляецца селектар, усплывальныя аб'екты будуць дэлегаваны ўказаным мэтам. На практыцы гэта выкарыстоўваецца для таго, каб у дынамічны HTML-кантэнт дадаваліся ўсплывальныя вобразы. Глядзіце гэта і інфарматыўны прыклад .
шаблон радок '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Базавы HTML для выкарыстання пры стварэнні ўсплывальнага акна.

Popover's titleбудзе ўведзены ў .popover-title.

Popover's contentбудзе ўведзены ў .popover-content.

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

Самы знешні элемент-абгортка павінен мець .popoverклас.

назва радок | функцыя ''

Значэнне загалоўка па змаўчанні iftitleатрыбут адсутнічае.

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

трыгер радок "клік" Як спрацоўвае ўсплывальнае акно - націсніце | лунаць | фокус | кіраўніцтва. Вы можаце перадаць некалькі трыгераў; падзяліце іх прабелам. manualнельга спалучаць з любым іншым трыгерам.
акно прагляду радок | аб'ект | функцыя { селектар: 'цела', абіўка: 0}

Захоўвае ўсплывальнае акно ў межах гэтага элемента. Прыклад: viewport: '#viewport'ці{ "selector": "#viewport", "padding": 0 }

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

Атрыбуты даных для асобных усплываючых акцый

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

Метады

$().popover(options)

Ініцыялізуе ўсплывальныя вокны для калекцыі элементаў.

.popover('show')

Выяўляе ўсплывальнае акно элемента. Вяртаецца да абанента да таго, як усплывальнае акно будзе фактычна паказана (г.зн. да таго , як shown.bs.popoverадбудзецца падзея). Гэта лічыцца "ручным" запускам усплывальнага экрана. Усплывальныя вокны, назва і змест якіх маюць нулявую даўжыню, ніколі не адлюстроўваюцца.

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

.popover('hide')

Хавае ўсплывальнае акно элемента. Вяртаецца да абанента да таго, як усплывальнае акно было фактычна схавана (г.зн. да таго , як hidden.bs.popoverадбудзецца падзея). Гэта лічыцца "ручным" запускам усплывальнага экрана.

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

.popover('toggle')

Уключае ўсплывальнае акно элемента. Вяртаецца да абанента да таго, як усплывальнае акно было фактычна паказана або схавана (г.зн. да таго , як адбудзецца падзея shown.bs.popoverабо ). hidden.bs.popoverГэта лічыцца "ручным" запускам усплывальнага экрана.

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

.popover('destroy')

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

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

Падзеі

Тып падзеі Апісанне
show.bs.popover Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
паказаны.bs.popover Гэта падзея запускаецца, калі ўсплывальнае акно становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.popover Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
hidden.bs.popover Гэта падзея запускаецца, калі ўсплывальнае акно перастае быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
устаўлена.bs.popover Гэта падзея запускаецца пасля show.bs.popoverпадзеі, калі ўсплывальны шаблон быў дададзены ў DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Абвесткі alert.js

Прыклады абвестак

Дадайце функцыю адхілення да ўсіх папярэджанняў з дапамогай гэтага плагіна.

Пры выкарыстанні .closeкнопкі яна павінна быць першым даччыным элементам, .alert-dismissibleі ніякае тэкставае змесціва не можа стаяць перад ёй у разметцы.

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

Проста дадайце data-dismiss="alert"да кнопкі закрыцця, каб аўтаматычна даць функцыю закрыцця папярэджання. Закрыццё абвесткі выдаляе яе з DOM.

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

Каб вашы абвесткі выкарыстоўвалі анімацыю пры закрыцці, пераканайцеся, што да іх ужо прыменены класы .fadeі ..in

Метады

$().alert()

Праслухоўвае папярэджанне аб падзеях пстрычак на элементах-нашчадках, якія маюць data-dismiss="alert"атрыбут. (Не абавязкова пры выкарыстанні аўтаматычнай ініцыялізацыі data-api.)

$().alert('close')

Закрывае папярэджанне, выдаляючы яго з DOM. Калі ў элеменце прысутнічаюць класы .fadeі .in, папярэджанне згасне, перш чым ён будзе выдалены.

Падзеі

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

Тып падзеі Апісанне
close.bs.alert Гэта падзея запускаецца неадкладна пры closeвыкліку метаду асобніка.
closed.bs.alert Гэта падзея запускаецца, калі абвестка была закрыта (будзе чакаць завяршэння пераходаў CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Кнопкі button.js

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

Кросбраузерная сумяшчальнасць

Firefox захоўвае стан кантролю формы (адключанасць і праверка) пры загрузцы старонак . Абыходным шляхам для гэтага з'яўляецца выкарыстанне autocomplete="off". Глядзіце памылку Mozilla №654072 .

Дзяржаўны

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

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

Выкарыстоўвайце любы стан, які вам падабаецца!

Дзеля гэтай дэманстрацыі мы выкарыстоўваем data-loading-textі $().button('loading'), але гэта не адзіны стан, які вы можаце выкарыстоўваць. Глядзіце больш аб гэтым ніжэй у $().button(string)дакументацыі .

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

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

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

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

Папярэдне пераключаныя кнопкі патрэбныя .activeіaria-pressed="true"

Для папярэдне пераключаных кнопак вы павінны дадаць .activeклас і aria-pressed="true"атрыбут да buttonсябе.

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

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

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

Патрэбныя загадзя выбраныя параметры.active

Для загадзя выбраных параметраў вы павінны самастойна дадаць .activeклас да ўводу label.

Стан візуальнай праверкі абнаўляецца толькі пры пстрычцы

Калі адзначаны стан кнопкі сцяжка абнаўляецца без запуску clickпадзеі на кнопцы (напрыклад, праз <input type="reset">або праз наладжванне checkedўласцівасці ўваходу), вам трэба будзе самастойна пераключыць .activeклас на ўваходзе label.

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

Метады

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

Згарнуць collapse.js

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

Залежнасць плагіна

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

Прыклад

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

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

Вы можаце выкарыстоўваць спасылку з hrefатрыбутам або кнопку з data-targetатрыбутам. У абодвух выпадках data-toggle="collapse"патрабуецца.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Прыклад акардэона

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

Анімацыйны клішэ асуджаны, аніміраваны светскага жыцця абвінавачаны Тэры Рычардсан і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Сняданак 3 воўчы месяц, час, сонца, алеква, паклала птушку на гэта, кальмары, кава адзінага паходжання, нулла, прыпускаецца, шорэдыч і інш. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Аб'яву вегана, акрамя віцэ-мясніка. Легінсы occaecat крафтавае піва з фермы да стала, неапрацаваны джынсавы эстэтычны сінтэз, што вы, напэўна, не чулі пра іх, акузамус, устойлівы VHS.
Анімацыйны клішэ асуджаны, аніміраваны светскага жыцця абвінавачаны Тэры Рычардсан і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Сняданак 3 воўчы месяц, час, сонца, алеква, паклала птушку на гэта, кальмары, кава адзінага паходжання, нулла, прыпускаецца, шорэдыч і інш. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Аб'яву вегана, акрамя віцэ-мясніка. Легінсы occaecat крафтавае піва з фермы да стала, неапрацаваны джынсавы эстэтычны сінтэз, што вы, напэўна, не чулі пра іх, акузамус, устойлівы VHS.
Анімацыйны клішэ асуджаны, аніміраваны светскага жыцця абвінавачаны Тэры Рычардсан і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Сняданак 3 воўчы месяц, час, сонца, алеква, паклала птушку на гэта, кальмары, кава адзінага паходжання, нулла, прыпускаецца, шорэдыч і інш. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Аб'яву вегана, акрамя віцэ-мясніка. Легінсы occaecat крафтавае піва з фермы да стала, неапрацаваны джынсавы эстэтычны сінтэз, што вы, напэўна, не чулі пра іх, акузамус, устойлівы VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Таксама можна замяніць .panel-bodys на .list-groups.

  • Bootply
  • Адзін itmus ac facilin
  • Другі эрас

Зрабіць даступнымі элементы кіравання разгарнуць/згарнуць

Абавязкова дадайце aria-expandedэлемент кіравання. Гэты атрыбут відавочна вызначае бягучы стан складнага элемента для праграм чытання з экрана і падобных дапаможных тэхналогій. Калі складны элемент зачынены па змаўчанні, ён павінен мець значэнне aria-expanded="false". Калі вы ўсталявалі, што згортваецца элемент адкрыты па змаўчанні з дапамогай inкласа, усталюйцеaria-expanded="true" замест гэтага ўсталюйце элемент кіравання. Убудова будзе аўтаматычна пераключаць гэты атрыбут у залежнасці ад таго, быў адкрыты або зачынены разборны элемент.

Акрамя таго, калі ваш элемент кіравання арыентаваны на адзіны згортваецца элемент - г.зн. data-targetатрыбут паказвае на idселектар - вы можаце дадаць дадатковы aria-controlsатрыбут да элемента кіравання, які змяшчае idэлемент згортвання. Сучасныя праграмы чытання з экрана і падобныя дапаможныя тэхналогіі выкарыстоўваюць гэты атрыбут, каб даць карыстальнікам дадатковыя цэтлікі для навігацыі непасрэдна да самога разборнага элемента.

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

Плагін згортвання выкарыстоўвае некалькі класаў для апрацоўкі цяжкай працы:

  • .collapseхавае змест
  • .collapse.inпаказвае змест
  • .collapsingдадаецца, калі пераход пачынаецца, і выдаляецца, калі ён заканчваецца

Гэтыя класы можна знайсці ў component-animations.less.

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

Проста дадайце data-toggle="collapse"і data-targetда элемента, каб аўтаматычна прызначыць кантроль над складаным элементам. Атрыбут data-targetпрымае селектар CSS для прымянення згортвання. Абавязкова дадайце клас collapseда разборнага элемента. Калі вы хочаце, каб ён быў адкрыты па змаўчанні, дадайце дадатковы клас in.

Каб дадаць кіраванне групамі ў стылі акардэона да згортваемага элемента кіравання, дадайце атрыбут data data-parent="#selector". Звярніцеся да дэманстрацыі, каб убачыць гэта ў дзеянні.

Праз JavaScript

Уключыць уручную з дапамогай:

$('.collapse').collapse()

Параметры

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

Імя тыпу па змаўчанні апісанне
бацька селектар ілжывы Калі прадастаўляецца селектар, то ўсе згортваемыя элементы пад названым бацькам будуць зачыненыя, калі гэты згортваемы элемент будзе паказаны. (падобна паводзінам традыцыйнага акардэона - гэта залежыць ад panelкласа)
пераключаць лагічны праўда Пераключае складны элемент пры выкліку

Метады

.collapse(options)

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

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

.collapse('toggle')

Пераключае складны элемент на паказны або схаваны. Вяртаецца да таго, хто выклікае, перш чым згортваемы элемент быў фактычна паказаны або схаваны (г.зн. да таго , як адбудзецца падзея shown.bs.collapseабо ).hidden.bs.collapse

.collapse('show')

Паказвае разборны элемент. Вяртаецца да абанента да таго, як элемент, які згортваецца, быў фактычна паказаны (г.зн. да таго , як shown.bs.collapseадбудзецца падзея).

.collapse('hide')

Хавае разборны элемент. Вяртаецца да таго, хто выклікае, перш чым згортваецца элемент быў фактычна схаваны (г.зн. да таго , як hidden.bs.collapseадбудзецца падзея).

Падзеі

Клас згортвання Bootstrap паказвае некалькі падзей для падключэння да функцыянальнасці згортвання.

Тып падзеі Апісанне
show.bs.collapse Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
паказаны.bs.згарнуць Гэта падзея запускаецца, калі элемент згортвання робіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.collapse Гэта падзея запускаецца адразу пасля hideвыкліку метаду.
hidden.bs.collapse Гэта падзея запускаецца, калі элемент згортвання быў схаваны ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
$('#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, і ён будзе аўтаматычна выраўнаваны і адфарматаваны.

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

Некалькі каруселяў

Каруселі патрабуюць выкарыстання idна крайнім кантэйнеры ( .carousel), каб элементы кіравання каруселлю функцыянавалі належным чынам. Пры даданні некалькіх каруселяў або пры змене каруселі idне забудзьцеся абнавіць адпаведныя элементы кіравання.

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

Выкарыстоўвайце атрыбуты дадзеных, каб лёгка кіраваць становішчам каруселі. data-slideпрымае ключавыя словы prevабо next, што змяняе становішча слайда адносна яго бягучага становішча. У якасці альтэрнатывы выкарыстоўвайцеdata-slide-to каб перадаць неапрацаваны індэкс слайда ў карусель data-slide-to="2", якая зрушвае пазіцыю слайда да пэўнага індэксу, які пачынаецца з 0.

Атрыбут data-ride="carousel"выкарыстоўваецца, каб пазначыць карусель як аніміраваную, пачынаючы з загрузкі старонкі.Яго нельга выкарыстоўваць у спалучэнні з (залішняй і непатрэбнай) відавочнай ініцыялізацыяй JavaScript той жа каруселі.

Праз JavaScript

Выклік каруселі ўручную з дапамогай:

$('.carousel').carousel()

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

Імя тыпу па змаўчанні апісанне
інтэрвал лік 5000 Колькасць часу затрымкі паміж аўтаматычным цыклам элемента. Калі false, карусель не будзе аўтаматычна працаваць.
паўза радок | нуль "парыць" Калі ўстаноўлена "hover", прыпыняе цыкл каруселі на mouseenterі аднаўляе цыкл на mouseleave. Калі зададзена значэнне null, навядзенне курсора на карусель не прыпыніць яе.
абгарнуць лагічны праўда Ці павінна карусель круціцца бесперапынна ці мець жорсткія прыпынкі.
клавіятура лагічны праўда Ці павінна карусель рэагаваць на падзеі клавіятуры.

Ініцыялізуе карусель дадатковымі опцыямі objectі пачынае цыклічна перамяшчаць элементы.

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

Пераключаецца па элементах каруселі злева направа.

Спыняе пераход каруселі паміж прадметамі.

Пераключае карусель на пэўны кадр (на аснове 0, падобна да масіва).

Пераход да папярэдняга элемента.

Пераход да наступнага элемента.

Клас каруселі Bootstrap паказвае дзве падзеі для падлучэння да функцыянальнасці каруселі.

Абедзве падзеі маюць наступныя дадатковыя ўласцівасці:

  • direction: Напрамак, у якім слізгае карусель ( "left"або "right").
  • relatedTarget: Элемент DOM, які ўстаўляецца на месца як актыўны элемент.

Усе падзеі каруселі запускаюцца ў самой каруселі (г.зн. у <div class="carousel">).

Тып падзеі Апісанне
slide.bs.carousel Гэта падзея спрацоўвае неадкладна, калі slideвыклікаецца метад асобніка.
slid.bs.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".

Імя тыпу па змаўчанні апісанне
зрушэнне нумар | функцыя | аб'ект 10 Пікселі, якія трэба зрушыць з экрана пры разліку пазіцыі пракруткі. Калі ўказана адно лік, зрушэнне будзе прымяняцца як у верхнім, так і ўнізе напрамках. Каб забяспечыць унікальнае ніжняе і верхняе зрушэнне, проста ўвядзіце аб'ект offset: { top: 10 }або offset: { top: 10, bottom: 5 }. Выкарыстоўвайце функцыю, калі вам трэба дынамічна вылічыць зрушэнне.
мішэнь селектар | вузел | элемент jQuery windowаб'ект _ Вызначае мэтавы элемент афікса.

Метады

.affix(options)

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

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

.affix('checkPosition')

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

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

Падзеі

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

Тып падзеі Апісанне
афікс.бс.афікс Гэта падзея запускаецца непасрэдна перад прымацаваннем элемента.
прымацаваны.бс.прымацаваны Гэта падзея запускаецца пасля прымацавання элемента.
affix-top.bs.affix Гэта падзея спрацоўвае непасрэдна перад тым, як элемент будзе прымацаваны ўверсе.
affixed-top.bs.affix Гэта падзея запускаецца пасля таго, як элемент быў прымацаваны зверху.
affix-bottom.bs.affix Гэта падзея запускаецца непасрэдна перад тым, як элемент быў прымацаваны ўнізе.
прымацаваны-знізу.бс.афікс Гэта падзея запускаецца пасля таго, як элемент быў прымацаваны ўнізе.