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

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

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

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

Сез барлык 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
})

Санитизатор

Кораллар һәм поповерлар HTML-ны кабул иткән вариантларны санитарлаштыру өчен безнең урнаштырылган санитизаторны кулланалар.

Килешенгән whiteListкыйммәт түбәндәгеләр:

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

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

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

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

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

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

Әгәр дә сез безнең санитизаторны узып китәсегез килсә, сез махсус китапханә куллануны өстен күрәсез, мәсәлән , DOMPurify , сез түбәндәгеләрне эшләргә тиеш:

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

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

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

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

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

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

Күчеш күчү.js

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

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

Эчтә нәрсә

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

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

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

$.support.transition = false

Modal.js _

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

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>

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

Модальләрнең ике өстәмә зурлыгы бар, модификатор класслары аша 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" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

Анимацияне бетерегез

Күрү урынына сүнгән түгел, ә күренгән модальләр өчен .fadeклассны модаль билгеләрегездән алыгыз.

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

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

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

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

Тригер төймәсенә нигезләнеп төрле модаль эчтәлек

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

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

Методлар

.modal(options)

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

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

.modal('toggle')

Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modalhidden.bs.modal

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

.modal('show')

Кул белән модаль ачыла. Модаль күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.modalвакыйга булганчы).

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

.modal('hide')

Модальне кул белән яшерә. Модаль яшерелгәнче шалтыратучыга кире кайта (ягъни hidden.bs.modalвакыйга булганчы).

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

.modal('handleUpdate')

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

Модаль биеклеге ачык булганда үзгәргәндә генә кирәк.

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

Вакыйгалар

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

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

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

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

Мисаллар

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

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

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

Куллану

Мәгълүмат атрибутлары яки JavaScript аша, тамчы плагин яшерен эчтәлекне (тамчы менюларны) .openата-аналар исемлегендә классны алыштырып алыштыра.

Кәрәзле җайланмаларда, тамчы .dropdown-backdropачылу менюдан читтә кагылганда тамчы менюларны ябу өчен кран өлкәсе булып тора, дөрес iOS ярдәме таләбе. Димәк, ачык тамчы менюдан бүтән тамчы менюга күчү мобильдә өстәмә таптауны таләп итә.

Искәрмә: data-toggle="dropdown"атрибут кушымта дәрәҗәсендә тамчы менюларны ябу өчен таяна, шуңа күрә аны һәрвакыт куллану яхшы идея.

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

Ачылуны data-toggle="dropdown"алыштыру өчен сылтамага яки төймәгә өстәгез.

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

URL-ны сылтама төймәләре белән саклап калу өчен, data-targetатрибутны кулланыгыз href="#".

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

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

JavaScript аша

JavaScript аша тамчыларга шалтыратыгыз:

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

Вариантлар

Беркем дә юк

Методлар

$().dropdown('toggle')

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

Вакыйгалар

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

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

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

ScrollSpy scrollspy.js

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

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

Куллану

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

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

Вакыйгалар

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

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

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

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

Куллану

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вакыйгалар атылмаячак.

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

Tooltips tooltip.js

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

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

Мисаллар

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

Статик корал

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

Дүрт юнәлеш

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

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

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

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

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

Куллану

Кораллар плагины таләп буенча эчтәлек һәм билгеләр чыгара, һәм триггер элементыннан соң корал күрсәтмәләрен урнаштыра.

JavaScript аша корал киңәшен эшләгез:

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

Билгеләү

Корал киңәше өчен кирәкле билгеләр - бары тик dataатрибут һәм 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>

Вариантлар

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

Методлар

$().tooltip(options)

Элемент коллекциясенә инструменты эшкәртүчене бәйли.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

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

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

Вакыйгалар

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

Popover popover.js

Икенчел информация өчен теләсә нинди элементка, iPadдагы кебек, кечкенә эчтәлекне өстәгез.

Поповерларның исеме дә, эчтәлеге дә нуль озынлыгында күрсәтелми.

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

Мисаллар

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

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

Тере демо

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

Дүрт юнәлеш

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

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

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

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

Киләсе чирттерүдә ташлагыз

focusКулланучының ясаган чираттагы баскычында поповерларны җибәрү өчен триггер кулланыгыз .

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

Куллану

JavaScript аша поповерларны рөхсәт итегез:

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

Вариантлар

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

Методлар

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

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

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

Вакыйгалар

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

Сигнализация хәбәрләре alert.js

Мисал хәбәрләре

Бу плагин белән барлык уяу хәбәрләргә эштән чыгару функциясен өстәгез.

Кнопка кулланганда .close, ул беренче баласы булырга тиеш, .alert-dismissibleһәм билгеле бер текст эчтәлеге аның алдына чыга алмый.

Куллану

Якын data-dismiss="alert"функцияне автоматик рәвештә бирү өчен, ябык төймәгә өстәгез. Сигнализацияне ябу аны DOMдан бетерә.

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

Ябылганда сезнең хәбәрләр анимация куллану өчен, аларда класслар .fadeһәм .inкласслар барлыгына инаныгыз.

Методлар

$().alert()

data-dismiss="alert"Атрибутка ия ​​булган нәсел элементларындагы вакыйгаларны басу өчен уяу тыңлый . (Data-api-ның авто-инициализациясен кулланганда кирәк түгел.)

$().alert('close')

DOM-тан алып, кисәтүне япа. Әгәр .fadeдә.in класслар булса, кисәтү бетерелгәнче юкка чыгачак.

Вакыйгалар

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

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

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

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

Дәүләт

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

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

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

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

Ялгыз күчү

data-toggle="button"Бер төймәгә күчүне активлаштыру өчен өстәгез .

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

Такталар / Радио

Тиешле стильдә күчү мөмкинлеген кертү өчен, тартмага яки радио керемнәренә өстәгез data-toggle="buttons"..btn-group

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

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

Методлар

$().button('toggle')

Күчереп тору. Кнопкага активлашкан кыяфәт бирә.

$().button('reset')

Кнопка халәтен үзгәртә - текстны оригиналь текстка алыштыра. Бу ысул асинхрон һәм яңадан урнаштыру тәмамланганчы кайта.

$().button(string)

Текстны теләсә нинди мәгълүматка текст текстына алыштыра.

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

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

Apseимерелү.js _

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

Мисал

Класс үзгәртүләре аша бүтән элементны күрсәтү һәм яшерү өчен астагы төймәләргә басыгыз:

• .collapseэчтәлекне яшерә
• .collapsingкүчү вакытында кулланыла
• .collapse.inэчтәлеген күрсәтә

Сез атрибут белән сылтама href, яки атрибутлы төймә куллана аласыз data-target. Ике очракта data-toggle="collapse"да таләп ителә.

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

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

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

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

.panel-bodyS белән s -ны алыштырырга да мөмкин .list-group.

Куллану

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

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

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

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

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

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

JavaScript аша

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

$('.collapse').collapse()

Вариантлар

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

Методлар

.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-ның җимерелү классы җимерелү функциясенә кушылу өчен берничә вакыйганы фаш итә.

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

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

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

Мисаллар

Алдагы Алга

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

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

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

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

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

Беренче слайд ярлыгы

Nulla vitae elit libero, pharetra augue mollis interdum.

Икенче слайд ярлыгы

Лорем ипсум долор амет утыра, консексетур элип.

Өченче слайд ярлыгы

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Алдагы Алга

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

Куллану

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

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

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

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

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

JavaScript аша

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

$('.carousel').carousel()

Вариантлар

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

Методлар

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

Вакыйгалар

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

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

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

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

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

Аффикс аффикс.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".

Методлар

.affix(options)

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

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

.affix('checkPosition')

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

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

Вакыйгалар

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