Gysgaça syn

Şahsy ýa-da düzülen

Plaginler aýratynlykda (Bootstrap-yň aýratyn *.jsfaýllaryny ulanyp) ýa-da birbada (ulanylyp bootstrap.jsýa-da kiçeldilip bootstrap.min.js) girizilip bilner.

Maglumat atributlary

Bootstrap plaginleriniň hemmesini JavaScript-iň bir setirini ýazman diňe bellik API arkaly ulanyp bilersiňiz. Bu “Bootstrap” -yň birinji derejeli API-si we bir plugin ulananyňyzda ilkinji üns bermeli.

Saidagny, käbir ýagdaýlarda bu funksiýany öçürmek islenip bilner. Şol sebäpden, resminamanyň atlary bilen ýazylan ähli hadysalary birleşdirip, maglumat atributy API-ni öçürmek mümkinçiligini berýäris data-api. Bu meňzeýär:

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

Ativea-da bolmasa, belli bir plagini nyşana almak üçin, plugin adyny at giňişligi hökmünde maglumat-api at giňişligi bilen birlikde goşuň:

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

Programmatiki API

Şeýle hem, ähli Bootstrap pluginlerini diňe JavaScript API arkaly ulanyp biljekdigiňize ynanýarys. Publichli jemgyýetçilik API-leri ýeke-täk, zynjyrly usullardyr we ýerine ýetirilen kolleksiýany yzyna gaýtaryp berýär.

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

Methodshli usullar goşmaça opsiýa obýektini, belli bir usuly nyşana alýan setiri ýa-da hiç zady kabul etmeli däldir (başlangyç hereketi bilen bir plugin açýar):

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

Her bir plugin, çig konstruktoryny bir Constructoremläkde açýar : $.fn.popover.Constructor. Belli bir plugin mysalyny almak isleseňiz, göni bir elementden alyň : $('[rel="popover"]').data('popover').

Bellenen sazlamalar

Bir plugin üçin deslapky sazlamalary üýtgedip bilersiňiz Constructor.DEFAULTS:

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

Dawa ýok

Käwagt beýleki UI çarçuwalary bilen Bootstrap plaginlerini ulanmaly bolýar. Bu ýagdaýlarda at giňişliginde wagtal-wagtal çaknyşyklar bolup biler. .noConflictŞeýle ýagdaý ýüze çyksa, bahasyny yzyna öwürmek isleýän pluginiňize jaň edip bilersiňiz.

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

Wakalar

“Bootstrap”, pluginleriň özboluşly hereketleri üçin ýörite wakalary üpjün edýär. Umuman aýdylanda, bular infinitif we geçmiş gatnaşygy görnüşinde gelýär - bu ýerde showbir hadysanyň başynda infinitif (mysal üçin shown) ýüze çykýar we bir iş gutarandan soň öňki gatnaşygy görnüşi (mysal üçin) ýüze çykýar.

3.0.0-a çenli, “Bootstrap” wakalarynyň hemmesi at giňişliginde.

Infhli infinitif hadysalar preventDefaultişlemegi üpjün edýär. Bu, hereketiň başlamazdan ozal ýerine ýetirilmegini togtatmak ukybyny üpjün edýär.

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

Wersiýa belgileri

VERSION“Bootstrap” -yň jQuery pluginleriniň hersiniň wersiýasyna plugin konstruktorynyň eýeçiligi arkaly girip bolýar . Mysal üçin, gurallar üçin plugin üçin:

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

JavaScript ýapylanda aýratyn ýalňyşlyklar ýok

“JavaScript” ýapylanda “Bootstrap” -yň pluginleri aýratyn yza çekilmeýär. Bu ýagdaýda ulanyjynyň tejribesi barada alada edýän bolsaňyz, ulanyjylaryňyza <noscript>ýagdaýy (we JavaScript-i nädip täzeden işletmelidigini) düşündirmek we / ýa-da öz ýalňyşlaryňyzy goşmak üçin ulanyň.

Geçişler.js _

Geçişler hakda

Simpleönekeý geçiş effektleri transition.jsüçin beýleki JS faýllary bilen bir gezek goşuň. Eger düzülen (ýa-da kiçeldilen) ulanýan bolsaňyz, bootstrap.jsmuny goşmagyň zerurlygy ýok - ol eýýäm bar.

Içindäki zatlar

transitionEndTransition.js wakalar üçin esasy kömekçi , CSS geçiş emulýatorydyr. Beýleki pluginler tarapyndan CSS geçiş goldawyny barlamak we asylan geçişleri tutmak üçin ulanylýar.

Geçişleri öçürmek

transition.jsGeçişler (ýa bootstrap.js-da bootstrap.min.jsýagdaýyna görä) ýüklenenden soň gelmeli aşakdaky JavaScript parçasyny ulanyp, bütin dünýäde ýapylyp bilner :

$.support.transition = false

Modal.js _

Modallar tertipli, ýöne çeýe, iň az talap edilýän işleýiş we akylly defoltlar bilen gepleşik teklip edýär.

HTML5 semantikasyny nädip kesgitleýändigi sebäpli, autofocusHTML atributynyň Bootstrap modallarynda täsiri ýok. Şol bir effekt gazanmak üçin käbir JavaScript ulanyň:

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

Mysallar

Statik mysal

Aşakdaky sözbaşy, göwre we hereketler toplumy bilen görkezilen modal.

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

Göni görkeziş

Aşakdaky düwmä basyp, JavaScript arkaly modal çalşyň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

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

Meýletin ululyklar

Modallarda iki sany goşmaça ululyk bar, a-da goýuljak üýtgediji synplar arkaly .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>

Animasiýany aýyryň

Görmek üçin ýitip gitmän, ýönekeý görünýän modallar üçin .fadesynpy modal belligiňizden aýyryň.

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

Tor ulgamyny ulanmak

“Bootstrap” grid ulgamyndan modalyň içinde peýdalanmak üçin diňe höwürtge dörediň, .rowsoňra .modal-bodyadaty gözenek ulgamy sapaklaryny ulanyň.

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

Trigger düwmesine esaslanýan modal mazmuny üýtgetmek

Birneme üýtgeşik mazmun bilen birmeňzeş modaly herekete getirýän bir topar düwme barmy? Modalyň mazmunyny haýsy düwmä basylandygyna görä üýtgetmek üçin event.relatedTargetHTML atributlaryny data-*( ähtimal jQuery arkaly ) ulanyň . Jikme-jiklikler üçin Modal wakalar resminamalaryna serediň 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)
})

Ulanylyşy

Modal plugin, gizlin mazmunyňyzy maglumat atributlary ýa-da JavaScript arkaly islege görä üýtgedýär. Şeýle hem , deslapky aýlanyş häsiýetini ýok etmek .modal-openüçin goşant goşýar we modalyň daşyna basanyňyzda görkezilen modallary <body>ýatyrmak üçin basmak meýdançasyny döredýär..modal-backdrop

Maglumat atributlary arkaly

JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-toggle="modal"elementi, düwme ýaly, data-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.

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

JavaScript arkaly

myModalJavaScript-iň bir setiri bolan idli modala jaň ediň :

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-backdrop="".

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

Usullar

.modal(options)

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

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

.modal('toggle')

Modal bilen el bilen çalşyň. Modal hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.modalýa-da hidden.bs.modalwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.

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

.modal('show')

Modal bilen el bilen açýar. Modal görkezilmänkä (ýagny shown.bs.modalwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

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

.modal('hide')

Modaly el bilen gizleýär. Modal aslynda gizlenmänkä (ýagny waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär .hidden.bs.modal

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

.modal('handleUpdate')

Modalyň çepe bökmegine sebäp boljak bir ýagdaý ýüze çyksa, aýlaw paneline garşy durmak üçin modalyň ýerleşişini sazlaň.

Diňe modalyň beýikligi açyk wagty üýtgän mahaly zerur.

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

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär.

Modhli modal wakalar modalyň özünde (ýagny <div class="modal">).

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

Açylýan damjalar.js

Mysallar

Bu ýönekeý plugin, deňiz paneli, goýmalar we dermanlar ýaly islendik zada diýen ýaly açylýan menýulary goşuň.

Gämi duralgasynyň içinde

Dermanlaryň içinde

Ulanylyşy

.openMaglumat atributlary ýa-da JavaScript arkaly, açylan plugin ene mazmuny sanawynda synpy üýtgedip gizlin mazmuny (açylýan menýular) üýtgedýär .

Jübi enjamlarynda, açylan menýuny ýapmak üçin menýu daşyna degeninde ýapylýan menýulary ýapmak üçin bir ýer goşýar, .dropdown-backdropbu iOS goldawynyň talaby. Diýmek, açyk açylýan menýudan başga açylýan menýuda geçmek, ykjam telefonda goşmaça kran talap edýär.

Bellik: Aýratynlyk data-toggle="dropdown"programma derejesinde açylýan menýulary ýapmak üçin esaslanýar, şonuň üçin ony hemişe ulanmak gowy zat.

Maglumat atributlary arkaly

data-toggle="dropdown"Açylan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .

<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-leri baglanyşyk düwmeleri bilen saklamazlyk üçin, data-targetýerine atribut ulanyň 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 arkaly

JavaScript arkaly açylanlara jaň ediň:

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

Görnüş

Hiç

Usullar

$().dropdown('toggle')

Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny üýtgedýär.

Wakalar

.dropdown-menuDownhli açylan wakalar ene-atanyň elementine atylýar .

Downhli açylýan hadysalaryň relatedTargetgymmaty üýtgeýän labyr elementi bolan bir häsiýet bar.

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

ScrollSpy scrollspy.js

Deňiz panelinde mysal

“ScrollSpy” plugin, aýlaw pozisiýasyna esaslanyp nav nyşanlaryny awtomatiki täzelemek üçin. Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan aşaky elementler hem görkeziler.

Ulanylyşy

Otnositel ýerleşişini talap edýär

Geçiriş usulyna garamazdan, scrollspy position: relative;içalyçylyk edýän elementiňizde ulanylmagyny talap edýär. Köp halatlarda bu <body>. Ondan başga elementleri aýlanyňyzda, toplumyň we ulanyljakdygyna <body>göz ýetiriň .heightoverflow-y: scroll;

Maglumat atributlary arkaly

Topbar nawigasiýaňyza skrollspy häsiýetini aňsatlyk bilen goşmak data-spy="scroll"üçin içalyçylyk etmek isleýän elementiňize goşuň (köplenç bu şeýle bolar <body>). Soňra islendik Bootstrap komponentiniň data-targetesasy elementiniň ID ýa-da synpy bilen atribut goşuň..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 arkaly

CSS-ä goşanyňyzdan soň position: relative;, JavaScript arkaly scrollspy jaň ediň:

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

Usullar

.scrollspy('refresh')

DOM-dan elementleri goşmak ýa-da aýyrmak bilen bilelikde scrollspy ulananyňyzda, täzeleniş usulyna şeýle jaň etmeli bolarsyňyz:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset="".

Wakalar

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

Çekip bolýan tablar tab.js

Mysal bellikleri

Contenterli mazmun panellerinden, hatda aşak düşýän menýulardan geçmek üçin çalt, dinamiki tab funksiýasyny goşuň. Içerki goýmalar goldanylmaýar.

Ulanylyşy

JavaScript arkaly tablisa tablisalaryny açyň (her tab aýratynlykda işjeňleşdirilmeli):

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

Aýry-aýry bellikleri birnäçe usul bilen işjeňleşdirip bilersiňiz:

$('#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)

Bellik

data-toggle="tab"Diňe bir elementi ýa-da bir elementi görkezip, hiç hili JavaScript ýazmazdan bir tab ýa-da tablet nawigasiýasyny işjeňleşdirip bilersiňiz data-toggle="pill". navSalgylary we nav-tabssapaklary goşmak, ul“Bootstrap ” goýmasynyň stilini ulanar , şol bir wagtyň özünde sapaklary goşmak bilen navtabletka stilini ulanar .nav-pills

<div>

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

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

</div>

Öçürilen effekt

Salgylaryň ýitmegi .fadeüçin hersine goşuň .tab-pane. Ilkinji goýma paneli .inbaşlangyç mazmuny görünmeli.

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

Usullar

$().tab

Salgy elementini we mazmun gapyny işjeňleşdirýär. Salgyda ýa data-target-da hrefDOM-da konteýner düwünini nyşana alýan bolmaly. Aboveokardaky mysallarda, bellikler atributlary bolan <a>s .data-toggle="tab"

.tab('show')

Berlen goýmany saýlaýar we baglanyşykly mazmuny görkezýär. Öň saýlanan başga bir tab saýlanmaýar we oňa bagly mazmun gizlenýär. Salgy paneli hakykatdanam görkezilmänkä (ýagny shown.bs.tabwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

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

Wakalar

Täze tab görkezilende wakalar aşakdaky tertipde ýanýar:

1. hide.bs.tab(häzirki işjeň goýmada)
2. show.bs.tab(görkezilmeli goýmada)
3. hidden.bs.tabhide.bs.tab(öňki işjeň goýmada, waka bilen birmeňzeş )
4. shown.bs.tabshow.bs.tab(täze işjeň görkezilen ýaňy görkezilen goýmada, waka bilen birmeňzeş )

Hiç bir goýma eýýäm işjeň bolmadyk bolsa, wakalar hide.bs.tabwe hidden.bs.tabwakalar atylmaz.

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

Gurallar gurallary.js

Jeýson Frame tarapyndan ýazylan ajaýyp jQuery.tipsy plugininden ylham aldy; Gurallar maslahatlary, şekillere bil baglamaýan, animasiýa üçin CSS3 we ýerli at saklamak üçin maglumat atributlaryny ulanýan täzelenen wersiýa.

Nol uzynlykdaky atlar bilen gurallar hiç haçan görkezilmeýär.

Mysallar

Gural görkezmelerini görmek üçin aşakdaky baglanyşyklara basyň:

Statik gurallar

Dört wariant bar: ýokarky, sag, aşaky we çep deňleşdirilen.

Dört ugur

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

Ulanylyşy

Gurallar üçin plugin isleg boýunça mazmun we bellik döredýär we adaty ýagdaýda gural elementlerini trigger elementinden soň ýerleşdirýär.

Gurallar maslahatyny JavaScript arkaly işlediň:

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

Bellik

Gurallar üçin zerur bellik diňe bir dataatribut bolup title, gurallar maslahatyny almak isleýän HTML elementiňizde. Gurallar maslahatynyň döredilen belligi gaty ýönekeý, ýöne bir pozisiýa talap edýär (deslapky görnüşde, topplugin tarapyndan kesgitlenýär).

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Usullar

$().tooltip(options)

Gurallar işleýjisini elementler ýygyndysyna dakýar.

.tooltip('show')

Bir elementiň gural görkezmesini açýar. Gural görkezmesi hakykatdanam görkezilmänkä (ýagny shown.bs.tooltipwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär. Bu gurallar maslahatynyň "gollanma" başlangyjy hasaplanýar. Nol uzynlykdaky atlar bilen gurallar hiç haçan görkezilmeýär.

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

.tooltip('hide')

Bir elementiň gural görkezmesini gizleýär. Gurallar maslahaty hakykatdanam gizlenmänkä (ýagny hidden.bs.tooltipwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu gurallar maslahatynyň "gollanma" başlangyjy hasaplanýar.

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

.tooltip('toggle')

Bir elementiň gurallar maslahatyny üýtgedýär. Gurallar görkezmesi hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.tooltipýa-da hidden.bs.tooltipwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu gurallar maslahatynyň "gollanma" başlangyjy hasaplanýar.

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

.tooltip('destroy')

Bir elementiň gural görkezmesini gizleýär we ýok edýär. Delegasiýany ulanýan gurallar (opsiýany ulanyp döredilýär ) selectornesil trigger elementlerinde aýratyn ýok edilip bilinmez.

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

Wakalar

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

Popover popover.js

Ikinji derejeli maglumat üçin islendik elemente, “iPad” -daky ýaly mazmunyň kiçi gatlaklaryny goşuň.

Iki ady we mazmuny nol uzynlykdaky popovers hiç haçan görkezilmeýär.

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

Mysallar

Statik popover

Dört wariant bar: ýokarky, sag, aşaky we çep deňleşdirilen.

Göni görkeziş

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

Dört ugur

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

Indiki gezek basyň

focusUlanyjynyň indiki basanynda açylanlary aýyrmak üçin trigger ulanyň .

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

Ulanylyşy

JavaScript arkaly açylýan ýerleri açyň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Usullar

$().popover(options)

Element ýygnamak üçin açylanlary başlaýar.

.popover('show')

Bir elementiň açylýan ýerini açýar. Açylýan ýer görkezilmänkä (ýagny shown.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň "gollanma" başlangyjy hasaplanýar. Iki ady we mazmuny nol uzynlykdaky popovers hiç haçan görkezilmeýär.

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

.popover('hide')

Bir elementiň açylýan ýerini gizleýär. Açylýan ýer hakykatdanam gizlenmänkä (ýagny hidden.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň "gollanma" başlangyjy hasaplanýar.

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

.popover('toggle')

Bir elementiň açylýan ýerini üýtgedýär. Açylýan ýer görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.popoverýa-da hidden.bs.popoverwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu popoveriň "gollanma" başlangyjy hasaplanýar.

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

.popover('destroy')

Bir elementiň açylýan ýerini gizleýär we ýok edýär. Delegasiýany ulanýan poplar (opsiýany ulanyp döredilýär ) selectornesil trigger elementlerinde aýratyn ýok edilip bilinmez.

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

Wakalar

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

Duýduryş habarlary alert.js

Mysal duýduryşlary

Bu plugin bilen ähli duýduryş habarlaryna işden çykarmak funksiýasyny goşuň.

Bir .closedüwme ulanylanda, ol ilkinji çagasy bolmaly .alert-dismissiblewe bellikde hiç hili tekst mazmuny gelip bilmez.

Ulanylyşy

data-dismiss="alert"Duýduryşyň ýakyn işlemegini awtomatiki bermek üçin diňe ýakyn düwmäňize goşuň . Duýduryşy ýapmak ony DOM-dan aýyrýar.

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

.fadeIngapylanda duýduryşlaryňyzy animasiýa ulanmagy üçin, eýýäm olara we .insapaklara degişlidigine göz ýetiriň .

Usullar

$().alert()

Aýratynlygy bolan nesil elementlerine basmak hadysalaryny duýduryş diňleýär data-dismiss="alert". (Data-api-iň awtomatiki başlangyjy ulanylanda hökman däl.)

$().alert('close')

DOM-dan aýyrmak bilen duýduryşy ýapýar. Eger elementde .fadewe .insynplar bar bolsa, duýduryş aýrylmazdan ozal öçer.

Wakalar

“Bootstrap” -yň duýduryş plugin, duýduryş funksiýasyna girmek üçin birnäçe wakany paş edýär.

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

Düwmeler düwmesi.js

Düwmeler bilen has köp iş ediň. Dolandyryş düwmesi gurallar paneli ýaly has köp komponentler üçin düwmeler toparyny görkezýär ýa-da döredýär.

Döwlet

data-loading-text="Loading..."Bir düwmä ýüklemek ýagdaýyny ulanmak üçin goşuň .

Bu aýratynlyk v3.3.5-den bäri köneldi we v4-de aýryldy.

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

Leeke üýtgetmek

data-toggle="button"Bir düwmede üýtgemegi işjeňleşdirmek üçin goşuň .

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

Bellik gutusy / Radio

Degişli stilde üýtgetmek mümkinçiligini öz içine alýan gutujyga ýa-da radio girişlerine data-toggle="buttons"goşuň ..btn-group

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

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

Usullar

$().button('toggle')

Toggles ýagdaýy basýar. Düwmä işjeňleşdirilen görnüşini berýär.

$().button('reset')

Düwme ýagdaýyny täzeden düzýär - teksti asyl tekste çalyşýar. Bu usul asynkron bolup, täzeden düzmek gutarmanka gaýdyp gelýär.

$().button(string)

Teksti islendik maglumat kesgitlenen tekst ýagdaýyna çalyşýar.

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

Apseykylmak.js _

Özüňi alyp barşyňy aňsatlaşdyrmak üçin sanlyja synpy ulanýan çeýe plugin.

Mysal

Synp üýtgeşmeleri arkaly başga bir elementi görkezmek we gizlemek üçin aşakdaky düwmelere basyň:

• .collapsemazmuny gizleýär
• .collapsinggeçiş döwründe ulanylýar
• .collapse.inmazmunyny görkezýär

Sypat bilen hrefbaglanyşyk ýa-da atributly düwme ulanyp bilersiňiz data-target. Iki ýagdaýda-da data-toggle="collapse"talap edilýär.

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

Akkordeon mysaly

Panel komponenti bilen akkordeon döretmek üçin deslapky çöküş häsiýetini giňeldiň.

<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 bilen s -leri çalyşmak hem mümkin .list-group.

Ulanylyşy

Apseykylýan plugin agyr götermek üçin birnäçe synp ulanýar:

• .collapsemazmuny gizleýär
• .collapse.inmazmunyny görkezýär
• .collapsinggeçiş başlanda goşulýar we gutarandan soň aýrylýar

Bu sapaklary tapyp bilersiňiz component-animations.less.

Maglumat atributlary arkaly

Aykylýan elementiň gözegçiligini awtomatiki bellemek üçin elemente data-toggle="collapse"we a goşuň . data-targetAýratynlyk data-target, çökmegi ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy collapseýykylýan elemente goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň in.

Apsykylýan dolandyryşa akkordeona meňzeş topar dolandyryşyny goşmak üçin maglumat atributyny goşuň data-parent="#selector". Muny hereketde görmek üçin demo serediň.

JavaScript arkaly

El bilen işlediň:

$('.collapse').collapse()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-parent="".

Usullar

.collapse(options)

Mazmunyňyzy çökýän element hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

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

.collapse('toggle')

Görkezilýän ýa-da gizlenýän elementi çalyşýar. Apsykylýan element hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.collapseýa-da hidden.bs.collapsewaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

.collapse('show')

Apsykylýan elementi görkezýär. Apsykylýan element hakykatdanam görkezilmänkä (ýagny shown.bs.collapsewaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

.collapse('hide')

Apsykylýan elementi gizleýär. Apsykylýan element aslynda gizlenmänkä (ýagny hidden.bs.collapsewaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

Wakalar

“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.

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

Karusel karusel.js

Karusel ýaly elementleriň üsti bilen tigir sürmek üçin slaýdşow komponenti. Höwürtgelenen karuseller goldanylmaýar.

Mysallar

Öňki Indiki

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

Meýletin ýazgylar

Slaýdlaryňyza ýazgylary .carousel-captionislendik element bilen aňsatlyk bilen goşuň .item. Islendik goşmaça HTML-i şol ýerde ýerleşdiriň we awtomatiki usulda düzüler we formatlanar.

Ilki slaýd belligi

Nulla vitae elit libero, pharetra augue mollis interdum.

Ikinji slaýd belligi

“Lorem ipsum dolor” oturýar.

Üçünji slaýd belligi

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Öňki Indiki

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

Ulanylyşy

Birnäçe karusel

Karuseller , karusel dolandyryşlarynyň kadaly işlemegi üçin iddaşarky gapda ( ) ulanylmagyny talap edýär . .carouselBirnäçe karusel goşanyňyzda ýa-da karuseliň çalşylanda id, degişli dolandyryşlary täzeläň.

Maglumat atributlary arkaly

Karuseliň ýagdaýyny aňsatlyk bilen dolandyrmak üçin maglumat atributlaryny ulanyň. data-slideaçar sözleri kabul edýär prevýa-da nextslaýd ýagdaýyny häzirki ýagdaýyna görä üýtgedýär. Alterna- da bolmasa, slaýd ýagdaýyny başlaýan belli bir görkezijä geçirýän data-slide-tokarusele çig slaýd indeksini geçirmek üçin ulanyň .data-slide-to="2"0

Bu data-ride="carousel"atribut, karuseli sahypa ýükünden başlap janlandyryjy hökmünde bellemek üçin ulanylýar. Şol bir karuseliň aç-açan JavaScript başlangyjy bilen (artykmaç we gereksiz) bilelikde ulanylyp bilinmez.

JavaScript arkaly

Karusel bilen el bilen jaň ediň:

$('.carousel').carousel()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-interval="".

Usullar

.carousel(options)

Karuseli islege bagly görnüşler objectbilen başlaýar we zatlaryň üsti bilen tigir sürüp başlaýar.

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

.carousel('cycle')

Karusel önümleriniň çepden saga aýlanmagy.

.carousel('pause')

Karuseliň zatlaryň üsti bilen tigir sürmegini bes edýär.

.carousel(number)

Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly).

.carousel('prev')

Öňki elemente aýlawlar.

.carousel('next')

Indiki elemente aýlawlar.

Wakalar

“Bootstrap” -yň karusel synpy karuseliň işlemegi üçin iki hadysany paş edýär.

Iki hadysanyň hem aşakdaky goşmaça aýratynlyklary bar:

• direction: Karuseliň süýşýän ugry (ýa "left"-da "right").
• relatedTarget: Işjeň element hökmünde ýerine süýşürilýän DOM elementi.

Karusel hadysalarynyň hemmesi karuseliň özüne (ýagny <div class="carousel">).

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

Affix affix.js

Mysal

Affiks plugin position: fixed;, tapylan effekti öýkünip, ýapýar position: sticky;. Sag tarapdaky subnawigasiýa affiks plagininiň göni ýaýlymydyr.

Ulanylyşy

Affiks plaginini maglumat atributlary ýa-da öz JavaScript bilen el bilen ulanyň. Iki ýagdaýda-da berkidilen mazmunyň ýerleşişi we giňligi üçin CSS-i üpjün etmeli.

Bellik: Safari hödürlemek ýalňyşlygy sebäpli çekilen ýa-da iteklenen sütün ýaly birneme ýerleşen elementdäki affiks pluginini ulanmaň .

CSS arkaly ýerleşiş

Affiks plugin üç synpyň arasynda üýtgeýär, hersi belli bir ýagdaýy görkezýär : .affix, .affix-topwe .affix-bottom. position: fixed;Hakyky pozisiýalary .affixdolandyrmak üçin bu synplar üçin özüňiz (bu plugin garaşsyz) stilleri üpjün etmeli .

Affiks plugininiň işleýşi:

1. Başlamak üçin, plugin .affix-topelementiň iň ýokary derejededigini görkezýär. Bu pursatda hiç hili CSS ýerleşişi talap edilmeýär.
2. Berkidilen elementiň öňünden aýlanmak, hakyky goşulmany döretmeli. Bu ýer .affixçalyşýar .affix-topwe sazlanýar position: fixed;(Bootstrap's CSS tarapyndan üpjün edilýär).
3. Aşakdaky ofset kesgitlenen bolsa, geçmişini aýlamak .affixbilen çalşmaly .affix-bottom. Ofsetler hökmany bolansoň, birini düzmek size degişli CSS-i bellemegi talap edýär. Bu ýagdaýda position: absolute;zerur bolanda goşuň. Plagin, elementi nireden ýerleşdirmelidigini kesgitlemek üçin maglumat atributyny ýa-da JavaScript opsiýasyny ulanýar.

Aşakdaky ulanyş opsiýalarynyň ikisi üçin CSS-ni bellemek üçin ýokardaky ädimleri ýerine ýetiriň.

Maglumat atributlary arkaly

Islendik elemente affiks häsiýetini aňsatlyk bilen goşmak üçin diňe data-spy="affix"içalyçylyk etmek isleýän elementiňize goşuň. Bir elementiň haçan dakyljakdygyny kesgitlemek üçin ofsetleri ulanyň.

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

JavaScript arkaly

JavaScript arkaly affiks plaginine jaň ediň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset-top="200".

Usullar

.affix(options)

Mazmunyňyzy goşulan mazmun hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

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

.affix('checkPosition')

Affiksiň ýagdaýyny degişli elementleriň ölçeglerine, ýerleşişine we aýlanyş ýagdaýyna görä täzeden hasaplaýar. .affix,, .affix-topWe synplar täze ýagdaýa görä goşulan mazmuna goşulýar ýa - .affix-bottomda aýrylýar. Goşulan mazmunyň dogry ýerleşdirilmegini üpjün etmek üçin, goşulan mazmunyň ölçegleri ýa-da maksat elementi üýtgedilende bu usul çagyrylmalydyr.

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

Wakalar

“Bootstrap” -yň affiks plagini, affiks funksiýasyna girmek üçin birnäçe wakany paş edýär.