Гомуми күзәтү

Индивидуаль яки тупланган

Плагиннар индивидуаль кертелергә мөмкин (Bootstrap'ның аерым *.jsфайлларын кулланып), яки берьюлы (кулланып bootstrap.jsяки минимальләштерелгән bootstrap.min.js).

Javaыелган JavaScript куллану

Икесендә дә bootstrap.jsһәм bootstrap.min.jsбер файлдагы барлык плагиннар бар. Берсен генә кертегез.

Плагинга бәйлелек

Кайбер плагиннар һәм CSS компонентлары бүтән плагиннарга бәйле. Әгәр дә сез плагиннарны аерым кертсәгез, бу бәйләнешләрне документларда тикшерегез. Шулай ук ​​барлык плагиннар jQuery белән бәйле (бу jQuery плагин файллары алдыннан кертелергә тиеш дигәнне аңлата ). JQuery'ның нинди версияләре булышканын белү өчен безнең белән киңәшләшегез.bower.json

Мәгълүмат атрибутлары

Сез барлык Bootstrap плагиннарын JavaScriptның бер сызыгын язмыйча гына маркировкалау API аша куллана аласыз. Бу Bootstrap-ның беренче класслы API һәм плагин кулланганда беренче карашыгыз булырга тиеш.

Димәк, кайбер очракларда бу функцияне сүндерергә кирәк булыр. Шуңа күрә, без шулай ук ​​документ атрибутикасы API-ны сүндерү мөмкинлеген бирәбез, документ исемендәге барлык вакыйгаларны бәйләп data-api. Бу шулай:

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

Альтернатив рәвештә, билгеле бер плагинны максат итү өчен, плагинның исемен исем киңлеге итеп кертегез, шулай ук ​​мәгълүмат-api исем киңлеге:

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

Мәгълүмат атрибутлары аша элементка бер плагин гына

Бер үк элементтагы берничә плагиннан мәгълүмат атрибутларын кулланмагыз. Мәсәлән, төймә икесенең дә корал киңәше була алмый һәм модальне алыштыра алмый. Моны тормышка ашыру өчен, төрү элементын кулланыгыз.

Программатик API

Без шулай ук ​​барлык Bootstrap плагиннарын JavaScript API аша гына куллана белергә тиеш дип саныйбыз. Барлык иҗтимагый API-лар бер, чылбырлы ысуллар, һәм эшләнгән коллекцияне кире кайтаралар.

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

Барлык ысуллар да өстәмә вариантлар объектын, билгеле бер методка юнәлтелгән сызыкны яки бернәрсә дә кабул итмәскә тиеш (бу плагинны килешү тәртибе белән башлый):

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

Eachәр плагин шулай ук ​​чимал конструкторын 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 плагиннарын башка UI рамкалары белән кулланырга кирәк. Бу шартларда вакыт-вакыт исем киңлеге бәрелешләре булырга мөмкин. .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
})

Вариант номерлары

Bootstrap-ның jQuery плагиннарының һәрберсенең версиясенә VERSIONплагин конструкторы милеге аша кереп була. Мәсәлән, корал плагины өчен:

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

JavaScript сүндерелгәндә махсус кимчелекләр юк

JavaScript сүндерелгәндә Bootstrap плагиннары аеруча матур итеп кире кайтмыйлар. Әгәр дә сез бу очракта кулланучының тәҗрибәсе турында кайгыртасыз икән, кулланучыларга <noscript>ситуацияне (һәм JavaScriptны ничек яңадан эшләтеп җибәрергә) аңлату өчен кулланыгыз, һәм / яки үзегезнең гадәттән тыш кимчелекләрегезне өстәгез.

Өченче як китапханәләре

Bootstrap рәсми рәвештә Прототип яки jQuery UI кебек өченче як JavaScript китапханәләрен хупламый . Вакыйгаларга һәм исемнәргә карамастан .noConflict, яраклашу проблемалары булырга мөмкин, аларны үзегез төзәтергә кирәк.

Күчеш күчү.js

Күчешләр турында

Гади күчү эффектлары transition.jsөчен бүтән JS файллары белән бергә кертегез. Әгәр дә сез тупланган (яки минималь) кулланасыз икән, моны bootstrap.jsкертергә кирәк түгел - ул инде бар.

Эчтә нәрсә

Transition.js - вакыйгалар өчен төп ярдәмче, transitionEndшулай ук ​​CSS күчү эмуляторы. Бу бүтән плагиннар тарафыннан CSS күчү ярдәмен тикшерү һәм асылынган күчү өчен кулланыла.

Күчешләрне сүндерү

Күчерелешләр түбәндәге JavaScript сниппеты ярдәмендә глобаль рәвештә инвалид булырга мөмкин, алар йөкләнгәннән соң булырга тиеш transition.js(яки bootstrap.js, очрак буенча):bootstrap.min.js

$.support.transition = false

Modal.js _

Модальләр тәртипкә китерелгән, ләкин сыгылмалы, минималь кирәкле функциональлек һәм акыллы дефолт белән диалог тәкъдим итә.

Берничә ачык модаль ярдәм итми

Икенчесе күренеп торганда, модальне ачмаска онытмагыз. Берьюлы берничә модаль күрсәтү махсус код таләп итә.

Модаль билгеләрне урнаштыру

Modәрвакыт модальнең HTML кодын документыгызда иң югары дәрәҗәдәге урынга урнаштырырга тырышыгыз, модальнең тышкы кыяфәтенә һәм / яки функциясенә тәэсир итүче бүтән компонентлардан сакланыгыз.

Кәрәзле җайланма

Кәрәзле җайланмаларда модаль куллану турында кайбер саклыклар бар. Детальләр өчен безнең браузер ярдәм документларын карагыз .

HTML5 аның семантикасын ничек билгеләгәнгә, autofocusHTML атрибутының 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="...".modalrole="document".modal-dialog

Өстәвенә, сез модаль диалогның тасвирламасын бирә aria-describedbyаласыз .modal.

YouTube видеоларын урнаштыру

YouTube видеоларын модальләргә урнаштыру Bootstrap'та түгел, өстәмә JavaScript таләп итә, уйнауны автоматик рәвештә туктату һәм башкалар. Күбрәк мәгълүмат алу өчен бу файдалы Stack Overflow постын карагыз .

Ихтимал зурлыклар

Модальләрнең ике өстәмә зурлыгы бар, модификатор класслары аша a .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>

Челтәр системасын куллану

Ботстрап челтәр системасыннан файдалану өчен, модаль эчендә оя корыгыз, .rowаннары .modal-bodyгадәти челтәр системасы классларын кулланыгыз.

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

Бераз төрле эчтәлек белән бер үк модальне эшләтеп җибәрүче төймәләр бармы? Кайсы төймәгә басылганына карап модаль эчтәлеген үзгәртү өчен 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 аша

myModalJavaScriptның бер сызыгы булган id белән модальгә шалтыратыгыз :

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-backdrop="".

Исем тибы Килешү тасвирлау
фон буле яки кыл'static' дөрес Модаль-фон элементын үз эченә ала. Альтернатив рәвештә, staticбасу вакытында модальне япмаган фонны күрсәтегез.
клавиатура буле дөрес Качу ачкычы басылганда модальне япа
шоу буле дөрес Башланганда модальне күрсәтә.
дистанцион юл ялган

Бу вариант v3.3.0 елдан искергән һәм v4 бетерелгән. Моның урынына без клиент ягыннан шаблонны яки мәгълүматны бәйләүче рамканы кулланырга, яки jQuery.load шалтыратырга киңәш итәбез .

Әгәр ерак URL бирелсә, эчтәлек бер тапкыр jQuery ысулы белән йөкләнәчәк һәм div-ка кертеләчәк. Әгәр дә сез мәгълүмат-апи кулланасыз икән, сез альтернатив чыганакны күрсәтү өчен атрибутны куллана аласыз. Моның мисалы түбәндә күрсәтелгән:load.modal-contenthref

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

Методлар

Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object.

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

Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modalhidden.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инстанция ысулы чакырылганнан соң җибәрелә.
hidden.bs.modal Бу вакыйга модаль кулланучыдан яшерелгәннән соң эшләнә (CSS күчү тәмамлануын көтәр).
load.bs.modal Бу вакыйга модаль remoteвариантны кулланып эчтәлекне йөкләгәндә җибәрелә.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Тамчы тамчылары

Бу гади плагин белән тамчы менюларны өстәгез, шул исәптән диңгез тактасы, таблицалар, таблеткалар.

Диңгез тактасы эчендә

Таблеткалар эчендә

Мәгълүмат атрибутлары яки 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 аша шалтыратасызмы, яисә мәгълүмат-api кулланасызмы, data-toggle="dropdown"тамчы триггер элементында һәрвакыт булырга тиеш.

Беркем дә юк

Бирелгән диңгез тактасының тамчы менюсын яисә салынган навигацияне алыштыра.

Барлык төшү вакыйгалары ата- .dropdown-menuаналар элементына төшерелә.

Барлык төшү вакыйгалары да бар relatedTarget, аларның кыйммәте якорь элементы.

Вакыйга төре Тасвирлау
show.bs.dropdown Бу вакыйга шоу инстанция ысулы чакырылганда шунда ук янып тора.
күрсәтелгән.bs.dropdown Бу вакыйга тамчы кулланучыга күренгәч (CSS күчүен көтәр, тәмамланыр).
hide.bs.dropdown Бу вакыйга яшерен инстанция ысулы чакырылганнан соң җибәрелә.
hidden.bs.dropdown Бу вакыйга тамчы кулланучыдан яшерелгәннән соң эшләнә (CSS күчүен көтәр, тәмамланыр).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Диңгез тактасында мисал

ScrollSpy плагины әйләндерү позициясенә нигезләнеп диңгез максатларын автоматик рәвештә яңарту өчен. Диңгез тактасы астындагы мәйданны әйләндерегез һәм актив класс үзгәрүен карагыз. Ачылучы суб-әйберләр дә яктыртылачак.

@fat

Реклама легингс клавиатурасы, иртәнге аш сәнгате кичәсе долор хезмәт. Pitchfork yr enim lo-fi алар сатылганчы. Тамбль фермасы-өстәл велосипед хокуклары. Аним кефия карлес кардиган. Велит сейитан mcsweeney фото кабинасы 3 бүре ай ируры. Косби свитер ломо джин шорты, вильямсбург hoodie minim qui сез алар турында ишетмәгәнсездер, һәм кардиган ышаныч фонды culpa biodiesel wes anderson эстетик. Нихил татуировкаланган аккусамус, кредит ирония биодисель кефиех остасы улламко нәтиҗәсе.

@mdo

Вениам марфа мыеклы тимераякта, фугат велит питчорк сакалын үзләштерә. Фриган сакал алико купидат мксвейни веро. Купидатат дүрт локо ниси, хельветика нулла карлес. Татуировкаланган косби свитер азык-төлек машинасы, mcsweeney викторинасы булмаган винил. Lo-fi wes anderson +1 сарториаль. Карлес эстетик булмаган күнегүләр. Бруклинда һөнәрчелек сырасы вице-кейтар дезерунты.

бер

Occaecat commodo aliqua delectus. Сыра сырасы дезерунт тимераякта. Ломо велосипед хокуклары банх ми, велит һәм киләсе дәрәҗәдәге локавор бер чыганаклы кофе магна веньямда. Lifeгары тормыш идентификаторы винил, эхо парк нәтиҗәсендә аликип банх ми питчорк. Vero VHS бәяләү. DIY миним хәбәрче сумкасы. Iphone, тотрыклы 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.

Кейтар тви блог, кулпа хәбәрче сумкасы марфа нинди генә делектус азык машинасы. Sapiente synth id assumenda. Locavore sed helvetica cliche ирония, күк күкрәү, сез алар турында ишетмәгәнсездер. Алар сатылганчы эшләгез, терри Ричардсон проидентлы иртәнге аш. Кардиган һөнәрчелек сырасы сейитан әзер велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco күк күкрәү.

Куллану

Bootstrap nav кирәк

Scrollspy хәзерге вакытта актив сылтамаларны дөрес яктырту өчен Bootstrap nav компонентын куллануны таләп итә .

Чишелә торган ID максатлары кирәк

Navbar сылтамаларында чишелә торган id максатлары булырга тиеш. Мәсәлән <a href="#home">home</a>, DOM кебек нәрсәгә туры килергә тиеш <div id="home"></div>.

Максатсыз :visibleэлементлар санга сукмыйлар

:visibleJQuery буенча булмаган максатчан элементлар санга сукмыйлар һәм аларның тиешле диңгез әйберләре беркайчан да яктыртылмаячак.

Нисби урнашуны таләп итә

Эшләү ысулына карамастан, scrollspy position: relative;сез шпион булган элементны куллануны таләп итә. Күпчелек очракта бу <body>. Аннан башка элементларны әйләндереп алганда , комплектка <body>ия ​​булуыгызга инаныгыз .heightoverflow-y: scroll;

Мәгълүмат атрибутлары аша

Сезнең өстәмә навигациягә scrollspy тәртибен җиңел өстәр data-spy="scroll"өчен, шпион булырга теләгән элементны өстәгез (гадәттә бу шулай булыр иде <body>). Аннары ID яки теләсә нинди Bootstrap компонентының data-targetтөп элементының классы белән атрибутны өстәгез..nav

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript аша

CSS-ны өстәгәннән соң position: relative;, JavaScript аша scrollspy шалтыратыгыз:

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

Методлар

.scrollspy('refresh')

Scrollspy кулланганда DOM элементларын өстәү яки бетерү белән берлектә, яңарту ысулын шулай атарга кирәк:

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-offset="".

Исем тибы Килешү тасвирлау
офсет саны 10 Пиксель әйләндерү позициясен исәпләгәндә өстән офсет.

Вакыйгалар

Вакыйга төре Тасвирлау
активлаштыру.bs.scrollspy Scrollspy белән яңа әйбер активлашканда бу вакыйга янып тора.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Күчереп була торган таблицалар tab.js

Мисал кыстыргычлары

Localирле эчтәлек панельләре аша, хәтта тамчы менюлар аша күчү өчен тиз, динамик кыстыргыч функциясен өстәгез. Ояланган кыстыргычлар ярдәм итми.

Чим джинсы, мөгаен, алар турында джин шорты Остин турында ишетмәгәнсездер. Nesciunt tofu stumptown aliqua, ретро синт мастер чистарту. Мыек кысу температурасы, вильямсбург карлес вегетан гелветика. Репрендерит касапчы ретро кефиех хыялый синт. Косби свитер һәм бан ми, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan америка киеме, касапчы волуптат ниси кви.

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)

Билгеләү

Сез берәр элементны күрсәтеп data-toggle="tab"яки JavaScript язмыйча, таблицаны яки таблетка навигациясен активлаштыра аласыз . Таблицага класслар һәм класслар data-toggle="pill"өстәү Bootstrap салынмасын кулланачак, ә классларны өстәү таблетка стилизациясен кулланачак .navnav-tabsulnavnav-pills

<div>

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

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

</div>

Сүнгән эффект

Таблицалар бетсен өчен, .fadeһәрберсенә өстәгез .tab-pane. Беренче кыстыргыч тактасы шулай ук .in​​башлангыч эчтәлекне күренергә тиеш.

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

Методлар

$().tab

Таблица элементын һәм эчтәлек контейнерын активлаштыра. Таблицада DOM контейнер төене data-targetбулырга тиеш. hrefAboveгарыдагы мисалларда таблицалар - атрибутлар <a>белән .data-toggle="tab"

.tab('show')

Бирелгән кыстыргычны сайлый һәм аның белән бәйле эчтәлекне күрсәтә. Элек сайланган бүтән кыстыргыч сайланмый һәм аның белән бәйле эчтәлек яшерелә. Таблицалар тактасы күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.tabвакыйга булганчы).

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

Вакыйгалар

Яңа кыстыргычны күрсәткәндә вакыйгалар түбәндәге тәртиптә янып тора:

  1. hide.bs.tab(хәзерге актив кыстыргычта)
  2. show.bs.tab(күрсәтеләчәк кыстыргычта)
  3. hidden.bs.tabhide.bs.tab(алдагы актив кыстыргычта, вакыйга белән бер үк )
  4. shown.bs.tabshow.bs.tab(яңа-актив гына күрсәтелгән кыстыргычта, вакыйга белән бер үк )

Әгәр дә бернинди кыстыргыч актив булмаган булса, вакыйгалар hide.bs.tabһәм hidden.bs.tabвакыйгалар атылмаячак.

Вакыйга төре Тасвирлау
show.bs.tab Бу вакыйга таблицада күрсәтелә, ләкин яңа кыстыргыч күрсәтелгәнче. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
күрсәтелгән.bs.tab Бу вакыйга таблицаны күрсәткәннән соң таблицада күрсәтелә. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
hide.bs.tab Бу вакыйга яңа кыстыргыч күрсәтелергә тиеш (һәм шулай итеп алдагы актив кыстыргыч яшерелергә тиеш). event.targetХәзерге актив кыстыргычны һәм event.relatedTargetяңа тиздән актив булачак кыстыргычны кулланыгыз .
hidden.bs.tab Бу вакыйга яңа кыстыргыч күрсәтелгәннән соң янып тора (һәм шулай итеп алдагы актив кыстыргыч яшерелгән). Элеккеге актив кыстыргычны һәм яңа актив кыстыргычны event.targetкулланыгыз .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Джейсон Фрэм язган искиткеч jQuery.tipsy плагины белән илһамланып; Кораллар - яңартылган версия, алар рәсемнәргә таянмыйлар, анимацияләр өчен CSS3 кулланалар, һәм җирле исем саклау өчен мәгълүмат-атрибутлар.

Нуль озынлыгы булган кораллар беркайчан да күрсәтелми.

Мисаллар

Корал киңәшләрен карау өчен түбәндәге сылтамалар өстендә йөрегез:

Киләсе дәрәҗәдәге каты чалбар , сез алар турында ишетмәгәнсездер. Фотогалерея сакал чимал деним хәрефләре вегетариан хәбәрче сумкасы. Ферма-өстәл сейитаны, mcsweeney's fixie тотрыклы квиноа 8 битлы америка киемендә терри ричардсон винил чембрей бар . Сакал боткасы, кардиганнар банх ми ломо күк күкрәү. Тофу биодизель вильямсбург марфа, дүрт локо мксвейни вегетариан камерасын чистарту. Чыннан да, ирония остасы нинди генә ачкыч, сәхнә фермасы-өстәл банкы Остин твиттеры фриган кредит чималы деним бер чыганак кофе вируслы.

Статик корал

Дүрт вариант бар: өске, уң, аскы һәм сул тигезләнгән.

Дүрт юнәлеш

<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атрибут һәм titleHTML элементында сез кораллар булырга телисез. Корал киңәшенең ясалган билгесе бик гади, ләкин ул позиция таләп итә (килешү буенча, 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;Моны булдырмас өчен якорларыгызга өстәгез .

Кнопка төркемнәрендә, кертү төркемнәрендә, таблицаларда кораллар махсус көйләү таләп итә

.btn-groupA яки ан эчендәге элементларга, яисә өстәл белән бәйле элементларга (,,,,) кораллар кулланганда , кирәкмәгән .input-groupначар <td>эффектлардан саклану <th>өчен вариантны күрсәтергә кирәк (мәсәлән, элемент киңәя бара һәм / яисә кораллар очрагы түгәрәк почмакларын югалту).<tr><thead><tbody><tfoot>container: 'body'

Яшерен элементларда корал күрсәтмәләрен күрсәтергә тырышмагыз

$(...).tooltip('show')Максатлы элемент булганда мөрәҗәгать итү корал киңәшенең display: none;дөрес урнашмавына китерәчәк.

Клавиатура һәм ярдәмче технология кулланучылар өчен уңайлы кораллар

Клавиатура белән йөргән кулланучылар, һәм аеруча ярдәмче технологияләрне кулланучылар өчен, сез клавиатура фокуслы элементларга сылтамалар, форма контроле яки tabindex="0"атрибутлы теләсә нинди элемент кебек корал киңәшләрен өстәргә тиеш.

Инвалид элементлар буенча кораллар төрү элементларын таләп итә

disabledКорал киңәшен яки элементка өстәр өчен .disabled, элементны a эченә <div>куегыз һәм аның урынына инструментыгызны кулланыгыз <div>.

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-animation="".

Исем Тип Килешү Тасвирлау
анимация буле дөрес Кораллар киңәшенә CSS сүнгән күчүне кулланыгыз
контейнер кыл | ялган ялган

Корал киңәшен билгеле бер элементка өсти. Мисал : container: 'body'. Бу вариант аеруча файдалы, чөнки ул инструментыгызны документ агымына триггер элементы янында урнаштырырга мөмкинлек бирә - бу тәрәзә размеры вакытында инструментның триггер элементыннан ераклашуына комачаулый.

тоткарлау саны | объект 0

Корал күрсәтмәсен (мс) күрсәтү һәм яшерү - кул белән эшләнгән триггер төренә кагылмый

Әгәр сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла

Объект структурасы:delay: { "show": 500, "hide": 100 }

html буле ялган HTML корал инструментына кертегез. Ялган булса, jQuery textысулы DOMга эчтәлек кертү өчен кулланылачак. XSS һөҗүмнәре турында борчылсагыз, текст кулланыгыз.
урнаштыру кыл | функциясе 'top'

Корал киңәшен ничек урнаштырырга - өстә | аста | сул | уң | автомобиль.
"Авто" күрсәтелгәндә, ул инструмент коралын динамик рәвештә үзгәртәчәк. Мәсәлән, урнаштыру "автоматик сул" булса, корал күрсәтмәсе сул якка күрсәтелә, югыйсә ул уңда күрсәтеләчәк.

Урнаштыруны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак 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.tooltiphidden.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 күчү тәмамлануын көтеп торачак).
insert.bs.tooltip Бу вакыйга show.bs.tooltipDOMга кораллар шаблоны өстәлгәннән соң җибәрелә.
$('#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;Моны булдырмас өчен якорларыгызга өстәгез .

Мисаллар

Статик поповер

Дүрт вариант бар: өске, уң, аскы һәм сул тигезләнгән.

Topгары

Лобортиста посуер консексетуры. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер дөрес

Лобортиста посуер консексетуры. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Түбәндә

Лобортиста посуер консексетуры. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер китте

Лобортиста посуер консексетуры. 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'. Бу вариант аеруча файдалы, чөнки ул поповерны документ агымында триггер элементы янында урнаштырырга мөмкинлек бирә - бу тәрәзә размеры вакытында поповерның этәргеч элементыннан ераклашуына комачаулый.

эчтәлеге кыл | функциясе ''

data-contentӘгәр дә атрибут булмаса , килешү эчтәлеге .

Әгәр дә функция бирелсә, ул thisпоповерга бәйләнгән элементка сылтама белән чакырылачак.

тоткарлау саны | объект 0

Поповерны күрсәтү һәм яшерү (мс) - кул белән эшләнгән триггер төренә кагылмый

Әгәр сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла

Объект структурасы:delay: { "show": 500, "hide": 100 }

html буле ялган Поповерга HTML кертү. Ялган булса, jQuery textысулы DOMга эчтәлек кертү өчен кулланылачак. 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 нигезе.

Поповерның titleинъекциясе .popover-title.

Поповерның contentинъекциясе .popover-content.

.arrowпоповерның укына әйләнәчәк.

Тышкы төрү элементы .popoverкласс булырга тиеш.

исем кыл | функциясе ''

titleӘгәр дә атрибут булмаса , килешү исеме .

Әгәр дә функция бирелсә, ул thisпоповерга бәйләнгән элементка сылтама белән чакырылачак.

триггер кыл 'басыгыз' Поповер ничек башлана - басыгыз | | фокус | кулланма. Сез берничә триггер узарга мөмкин; аларны бушлык белән аерыгыз. manualбүтән триггер белән берләштереп булмый.
күренеш кыл | объект | функциясе {селектор: 'тән', ябыштыру: 0}

Поповерны бу элемент чикләрендә саклый. Мисал: viewport: '#viewport'яки{ "selector": "#viewport", "padding": 0 }

Әгәр дә функция бирелсә, ул бердәнбер аргумент буларак DOM төененең этәргеч элементы белән атала. thisКонтекст поповер инстанциясенә куелган .

Аерым поповерлар өчен мәгълүмат атрибутлары

Индивидуаль поповерлар өчен вариантлар, өстә аңлатылганча, мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.

Методлар

$().popover(options)

Элемент җыю өчен поповерларны башлый.

.popover('show')

Элементның поповерын күрсәтә. Чакыручыга поповер күрсәтелгәнче кире кайта (ягъни shown.bs.popoverвакыйга булганчы). Бу поповерның "кул белән" этәргеч булып санала. Поповерларның исеме дә, эчтәлеге дә нуль озынлыгында күрсәтелми.

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

.popover('hide')

Элементның поповерын яшерә. Чакыручыга поповер яшерелгәнче кире кайта (ягъни hidden.bs.popoverвакыйга булганчы). Бу поповерның "кул белән" этәргеч булып санала.

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

.popover('toggle')

Элементның поповерын алыштыра. Чакыручыга поповер күрсәтелгәнче яки яшерелгәнче кире кайтаshown.bs.popover ( ягъни hidden.bs.popoverвакыйга булганчы). Бу поповерның "кул белән" этәргеч булып санала.

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

.popover('destroy')

Элементның поповерын яшерә һәм юк итә. Делегацияне кулланган поповерлар ( вариант ярдәмендә ясалган )selector нәсел триггер элементларында аерым юк ителми.

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

Вакыйгалар

Вакыйга төре Тасвирлау
show.bs.popover showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән.bs.popover Бу вакыйга кулланучыга күренгәннән соң (CSS күчү тәмамлануын көтеп торачак).
hide.bs.popover Бу вакыйга hideинстанция ысулы чакырылганнан соң җибәрелә.
hidden.bs.popover Бу вакыйга поповер кулланучыдан яшерелгәннән соң җибәрелә (CSS күчү тәмамлануын көтәр).
insert.bs.popover Бу вакыйга show.bs.popoverDOMга поповер шаблоны өстәлгәннән соң җибәрелә.
$('#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Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
ябык Бу вакыйга сигнализация ябылганда эшләнә (CSS күчү тәмамлануын көтәр).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Кнопка төймәсе.js

Кнопкалар белән күбрәк эшләгез. Контроль төймә кораллар плитәсе кебек компонентлар өчен төймәләр төркемнәрен күрсәтә.

Дәүләт

data-loading-text="Loading..."Кнопкага йөкләү халәтен куллану өчен өстәгез .

Бу үзенчәлек v3.3.5 елдан искергән һәм v4 бетерелгән.

Кайсы дәүләт сезгә ошаса, кулланыгыз!

Бу демонстрация өчен без кулланабыз 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>

Apseимерелү.js _

Easyиңел тәртип өчен берничә класс куллана торган сыгылмалы плагин.

Плагинга бәйләнеш

Apseимерелү плагинның 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>

Аккордеон мисалы

Панель компоненты белән аккордеон булдыру өчен, килешү җимерелү тәртибен киңәйтегез.

Anim pariatur cliche reprehenderit, enim eiusmod югары тормыш аккусамус терри ричардсон реклама сквид. 3 бүре ай оффия ауте, купидат булмаган тимераякта долор иртәнге аш. Азык-төлек машинасы quinoa nesciunt laborum eiusmod. Иртәнге 3 бүре ай температурасы, алтик сунт аңа кош куйды, бер чыбыклы кофе нулла ассоменда шоредитч һ.б. Nihil anim keffiyeh helvetica, һөнәрчелек сырасы лабораториясе андерсон кредит nesciunt sapiente ea proident. Реклама вегетарианнан тыш касапчы вице-ломо. Леггинглар окаекат һөнәрчелек сырасы фермасы-өстәл, чимал джинсы эстетик синт нессиунты, сез алар турында ишетмәгәнсездер, мөгаен, VHS гаепләү эше.
Anim pariatur cliche reprehenderit, enim eiusmod югары тормыш аккусамус терри ричардсон реклама сквид. 3 бүре ай оффия ауте, купидат булмаган тимераякта долор иртәнге аш. Азык-төлек машинасы quinoa nesciunt laborum eiusmod. Иртәнге 3 бүре ай температурасы, алтик сунт аңа кош куйды, бер чыбыклы кофе нулла ассоменда шоредитч һ.б. Nihil anim keffiyeh helvetica, һөнәрчелек сырасы лабораториясе андерсон кредит nesciunt sapiente ea proident. Реклама вегетарианнан тыш касапчы вице-ломо. Леггинглар окаекат һөнәрчелек сырасы фермасы-өстәл, чимал джинсы эстетик синт нессиунты, сез алар турында ишетмәгәнсездер, мөгаен, VHS гаепләү эше.
Anim pariatur cliche reprehenderit, enim eiusmod югары тормыш аккусамус терри ричардсон реклама сквид. 3 бүре ай оффия ауте, купидат булмаган тимераякта долор иртәнге аш. Азык-төлек машинасы quinoa nesciunt laborum eiusmod. Иртәнге 3 бүре ай температурасы, алтик сунт аңа кош куйды, бер чыбыклы кофе нулла ассоменда шоредитч һ.б. Nihil anim keffiyeh helvetica, һөнәрчелек сырасы лабораториясе андерсон кредит nesciunt sapiente ea proident. Реклама вегетарианнан тыш касапчы вице-ломо. Леггинглар окаекат һөнәрчелек сырасы фермасы-өстәл, чимал джинсы эстетик синт нессиунты, сез алар турында ишетмәгәнсездер, мөгаен, 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 белән s -ны алыштырырга да мөмкин .list-group.

  • Ботпли
  • Бер итмус ac facilin
  • Икенче эрос

Контрольне киңәйтү / җимерү мөмкинлеге булсын

aria-expandedКонтроль элементка өстәргә онытмагыз . Бу атрибут укучыларны һәм охшаш ярдәмче технологияләрне экранга чыгару өчен җимерелә торган элементның хәзерге торышын ачык итеп билгели. Әгәр җимерелә торган элемент килешү буенча ябылса, аның кыйммәте булырга тиеш aria-expanded="false". Әгәр дә син җимерелә торган элементны inкласс ярдәмендә килешү буенча ачык итеп куйсаң, aria-expanded="true"аның урынына контрольгә куй. Плагин бу атрибутны автоматик рәвештә алыштырачак, җимерелә торган элемент ачылган яки ябылган.

Өстәвенә, сезнең контроль элемент бер җимерелә торган элементны максат итә икән - ягъни data-targetатрибут idселекторга күрсәтә - сез aria-controlsконтроль элементына өстәмә атрибут өсти аласыз id, җимерелә торган элементны үз эченә ала. Заманча экран укучылары һәм охшаш ярдәмче технологияләр бу атрибутны кулланучыларга җимерелә торган элементның үзенә юнәлтү өчен өстәмә кыска юллар белән тәэмин итү өчен кулланалар.

Куллану

Apseимерелү плагины авыр күтәрү өчен берничә класс куллана:

  • .collapseэчтәлекне яшерә
  • .collapse.inэчтәлеген күрсәтә
  • .collapsingкүчү башлангач өстәлә, беткәч бетерелә

Бу классларны табып була component-animations.less.

Мәгълүмат атрибутлары аша

Aимерелә торган элемент белән идарә итүне автоматик рәвештә билгеләү өчен элементка data-toggle="collapse"һәм а өстәгез. Атрибут җимерелүне куллану өчен CSS селекторын кабул итә data-target. data-targetКлассны collapseҗимерелә торган элементка өстәргә онытмагыз. Килешү буенча ачыласыгыз килсә, өстәмә класс өстәгез in.

Accимерелә торган контрольгә аккордеонга охшаган төркем белән идарә итү өчен, мәгълүмат атрибутын өстәгез data-parent="#selector". Моны эштә күрү өчен демога мөрәҗәгать итегез.

JavaScript аша

Кул белән эшләгез:

$('.collapse').collapse()

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-parent="".

Исем тибы Килешү тасвирлау
ата-ана селектор ялган Әгәр дә селектор тәэмин ителсә, бу җимерелә торган әйбер күрсәтелгәндә күрсәтелгән ата-аналар астында барлык җимерелә торган элементлар ябылачак. (традицион аккордеон тәртибенә охшаган - бу panelкласска бәйле)
күчү буле дөрес Чакырыла торган элементны алыштыра

Методлар

.collapse(options)

Эчтәлекне җимерелә торган элемент буларак активлаштыра. Өстәмә вариантларны кабул итә object.

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

.collapse('toggle')

Collимерелә торган элементны күрсәтә яки яшерә. Apsимерелә торган элемент чынбарлыкта күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.collapsehidden.bs.collapse

.collapse('show')

Apsимерелә торган элементны күрсәтә. Apsимерелә торган элемент чынбарлыкта күрсәтелгәнче (ягъни shown.bs.collapseвакыйга булганчы) шалтыратучыга кире кайта.

.collapse('hide')

Apsимерелә торган элементны яшерә. Apsимерелә торган элемент яшерелгәнче шалтыратучыга кире кайта (ягъни алданhidden.bs.collapse вакыйга булганчы) шалтыратучыга кире кайта.

Вакыйгалар

Bootstrap-ның җимерелү классы җимерелү функциясенә кушылу өчен берничә вакыйганы фаш итә.

Вакыйга төре Тасвирлау
show.bs.collapse showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән.bs.collapse Бу вакыйга кулланучыга җимерелгән элемент күренгәндә эшләнә (CSS күчү тәмамлануын көтәр).
hide.bs.collapse Бу вакыйга hideметод чакырылганнан соң ук җибәрелә.
hidden.bs.collapse Бу вакыйга кулланучының таркалу элементы яшерелгәндә эшләнә (CSS күчү тәмамлануын көтәр).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Карусель карусель.js

Карусель кебек элементлар аша велосипед өчен слайдшоу компоненты. Ояланган карусельләр булышмый.

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

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

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

Ихтимал язулар

Слайдларга .carousel-captionтеләсә нинди элемент белән җиңел языгыз .item. Анда теләсә нинди өстәмә HTML урнаштырыгыз, ул автоматик рәвештә тигезләнәчәк һәм форматланачак.

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

Берничә карусель

Карусельләр дөрес эшләсен өчен id, тышкы контейнерда ( ) куллануны таләп итәләр . .carouselБерничә карусель өстәгәндә, яки карусельне алыштырганда id, тиешле контрольне яңартырга онытмагыз.

Мәгълүмат атрибутлары аша

Карусель торышын җиңел контрольдә тоту өчен мәгълүмат атрибутларын кулланыгыз. data-slideачкыч сүзләрне кабул итә prevяки nextслайд позициясен хәзерге торышына үзгәртә. Альтернатив рәвештә, слайд позициясен data-slide-toкарусельгә күчерү өчен кулланыгыз data-slide-to="2", ул слайд позициясен билгеле индекска күчерә0 .

data-ride="carousel"Атрибут карусельне бит йөгеннән башлап җанландыручы итеп билгеләр өчен кулланыла . Аны шул ук карусельнең JavaScript инициализациясе белән (артык һәм кирәксез) ачык кулланып булмый.

JavaScript аша

Карусель белән кул белән шалтыратыгыз:

$('.carousel').carousel()

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-interval="".

Исем тибы Килешү тасвирлау
интервал саны 5000 Автоматик велосипедта велосипедта тоткарлану вакыты. Ялган булса, карусель автоматик рәвештә әйләнмәячәк.
пауза кыл | нуль "каер" "hover"Карусель велосипедын туктатып, карусель mouseenterвелосипедын дәвам итә mouseleave. nullКарусель өстендә йөрү аны туктатмас .
төрү буле дөрес Карусель өзлексез әйләнергә тиешме яки каты тукталышларга ияме.
клавиатура буле дөрес Карусель клавиатура вакыйгаларына реакция бирергә тиешме.

Карусельне өстәмә вариантлар objectбелән башлый һәм әйберләр аша велосипедта йөри башлый.

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

Сулдан уңга карусель әйберләре аша цикллар.

Карусельне велосипедта әйберләр аша туктата.

Карусельне билгеле бер рамкага әйләндерә (0 нигезендә, массивга охшаган).

Алдагы пунктка цикллар.

Киләсе пунктка цикллар.

Bootstrap карусель классы карусель функциясенә керү өчен ике вакыйганы фаш итә.

Ике вакыйганың да түбәндәге өстәмә үзенчәлекләре бар:

  • direction: Карусель сикергән юнәлеш (я "left") "right".
  • relatedTarget: Актив әйбер буларак урынга сузылган DOM элементы.

Барлык карусель вакыйгалары карусельнең үзенә (ягъни <div class="carousel">).

Вакыйга төре Тасвирлау
слайд.bs.carousel slideБу вакыйга инстанция ысулы кулланылгач шунда ук янып тора .
slid.bs.carousel Бу вакыйга карусель слайдка күчүне тәмамлагач атыла.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Аффикс аффикс.js

Мисал

Аффикс плагин кабызыла position: fixed;һәм ябыла, табылган эффектны охшатып position: sticky;. Уң яктагы субнавигация - аффикс плагинының тере демо.


Куллану

Аффикс плагинын мәгълүмат атрибутлары аша яки үзегезнең JavaScript ярдәмендә кулланыгыз.Ике очракта да сез урнаштырылган эчтәлекнең урнашуы һәм киңлеге өчен CSS бирергә тиеш.

Искәрмә: аффикс плагинын чагыштырмача урнашкан элементтагы элементта кулланмагыз, мәсәлән, Safari рендеринг хата аркасында тартылган яки этәрелгән багана кебек .

CSS аша урнашу

Аффикс плагин өч класс арасында күчә, һәрберсе билгеле бер халәтне күрсәтә: .affix,, .affix-topһәм .affix-bottom. Сез стильләрне бирергә тиеш, моннан кала, position: fixed;бу .affixкласслар өчен үзегез (бу плагиннан бәйсез) фактик позицияләрне эшкәртү өчен.

Менә аффикс плагины ничек эшли:

  1. Башлау өчен плагин өсти.affix-top элементның иң югары позициядә булуын күрсәтә. Бу вакытта CSS позициясе кирәк түгел.
  2. Сез кушылган элементны узып китү фактик аффиксны этәрергә тиеш. Монда .affixалыштыралар .affix-topһәм урнаштыралар position: fixed;(Bootstrap's CSS белән тәэмин ителгән).
  3. Әгәр дә аскы офсет билгеләнсә, үткәнне әйләндереп алыштырырга .affixкирәк .affix-bottom. Офсет факультатив булганлыктан, берсен көйләү сезгә тиешле CSS куярга тиеш. Бу очракта position: absolute;кирәк булганда өстәгез. Плагин элементны кая куярга икәнен ачыклау өчен мәгълүмат атрибутын яки JavaScript параметрын куллана.

CSS-ны түбәндәге куллану вариантлары өчен урнаштыру өчен югарыдагы адымнарны үтәгез.

Мәгълүмат атрибутлары аша

Теләсә нинди элементка аффикс тәртибен җиңел өстәр data-spy="affix"өчен, шпион булырга теләгән элементка өстәгез. Элементны кадаклауны кайчан билгеләү өчен офсет кулланыгыз.

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

JavaScript аша

JavaScript аша аффикс плагинына шалтыратыгыз:

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-offset-top="200".

Исем тибы Килешү тасвирлау
офсет саны | функция | объект 10 Пиксель әйләндерү позициясен исәпләгәндә экраннан офсетка. Әгәр бер сан бирелсә, офсет өске һәм аскы юнәлештә кулланылачак. offset: { top: 10 }Уникаль, аскы һәм өске офсет белән тәэмин итү өчен объектны гына бирегез offset: { top: 10, bottom: 5 }. Офсетны динамик рәвештә исәпләргә кирәк булганда функция кулланыгыз.
максат селектор | төен | jQuery элементы windowобъект _ Аффиксның максат элементын күрсәтә.

Методлар

.affix(options)

Сезнең эчтәлекне кушылган эчтәлек итеп активлаштыра. Өстәмә вариантларны кабул итә object.

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

.affix('checkPosition')

Аффиксның торышын тиешле элементларның үлчәмнәренә, позициясенә һәм әйләндерү позициясенә карап кабатлый. .affix,, .affix-topҺәм класслар яңа халәт буенча .affix-bottomкушылган эчтәлеккә өстәлә яки бетерелә. Аффиксланган эчтәлекнең дөрес урнашуын тәэмин итү өчен, бу ысул кушылган эчтәлекнең үлчәмнәре яки максат элементы үзгәргәндә чакырылырга тиеш.

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

Вакыйгалар

Bootstrap аффикс плагины аффикс функциясенә кушылу өчен берничә вакыйганы фаш итә.

Вакыйга төре Тасвирлау
affix.bs.affix Бу вакыйга элемент кушылганчы ук янып тора.
affixed.bs.affix Бу вакыйга элемент кушылганнан соң җибәрелә.
affix-top.bs.affix Бу вакыйга элемент өстенә куелганчы ук янып тора.
affixed-top.bs.affix Бу вакыйга элемент өстенә куелганнан соң җибәрелә.
affix-bottom.bs.affix Бу вакыйга элемент астына куелганчы ук янып тора.
affixed-bottom.bs.affix Бу вакыйга элемент астына куелганнан соң җибәрелә.