Pārskats

Individuāli vai apkopoti

Spraudņus var iekļaut atsevišķi (izmantojot Bootstrap atsevišķus *.jsfailus) vai visus vienlaikus (izmantojot bootstrap.jsvai samazināto bootstrap.min.js).

Datu atribūti

Varat izmantot visus Bootstrap spraudņus, izmantojot tikai iezīmēšanas API, neierakstot nevienu JavaScript rindiņu. Šis ir Bootstrap pirmās klases API, un tas ir vispirms jāņem vērā, lietojot spraudni.

Tomēr dažās situācijās var būt vēlams šo funkcionalitāti izslēgt. Tāpēc mēs arī nodrošinām iespēju atspējot datu atribūta API, atsaistot visus notikumus dokumentā, kas atrodas nosaukumvietā ar data-api. Tas izskatās šādi:

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

Alternatīvi, lai atlasītu konkrētu spraudni, vienkārši iekļaujiet spraudņa nosaukumu kā nosaukumvietu kopā ar datu api nosaukumvietu, piemēram:

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

Programmatiskā API

Mēs arī uzskatām, ka jums vajadzētu būt iespējai izmantot visus Bootstrap spraudņus, tikai izmantojot JavaScript API. Visas publiskās API ir atsevišķas, ķēdējamas metodes, un tās atgriež kolekciju, uz kuru ir veikta darbība.

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

Visām metodēm ir jāpieņem neobligāto opciju objekts, virkne, kuras mērķis ir noteikta metode, vai nekas (kas iniciē spraudni ar noklusējuma darbību):

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

Katrs spraudnis arī parāda savu neapstrādāto konstruktoru Constructorīpašumā: $.fn.popover.Constructor. Ja vēlaties iegūt konkrētu spraudņa instanci, izgūstiet to tieši no elementa: $('[rel="popover"]').data('popover').

Noklusējuma iestatījumi

Varat mainīt spraudņa noklusējuma iestatījumus, modificējot spraudņa Constructor.DEFAULTSobjektu:

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

Nav konflikta

Dažreiz ir nepieciešams izmantot Bootstrap spraudņus ar citiem lietotāja interfeisa ietvariem. Šādos apstākļos dažkārt var rasties nosaukumtelpas sadursmes. Ja tā notiek, varat izsaukt .noConflictspraudni, kura vērtību vēlaties atjaunot.

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

Pasākumi

Bootstrap nodrošina pielāgotus notikumus lielākajai daļai spraudņu unikālo darbību. Parasti tie ir infinitīva un pagātnes divdabja formā — kur infinitīvs (piem. show) tiek aktivizēts notikuma sākumā, bet tā pagātnes divdabja forma (piem. shown) tiek aktivizēta pēc darbības pabeigšanas.

Sākot ar versiju 3.0.0, visi Bootstrap notikumi ir nosaukumos.

Visi infinitīvie notikumi nodrošina preventDefaultfunkcionalitāti. Tas nodrošina iespēju apturēt darbības izpildi pirms tās sākšanas.

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

Versiju numuri

Katra Bootstrap jQuery spraudņa versijai var piekļūt, izmantojot VERSIONspraudņa konstruktora īpašumu. Piemēram, rīka padoma spraudnim:

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

Nav īpašu atkāpšanās gadījumu, ja JavaScript ir atspējots

Bootstrap spraudņi nav īpaši graciozi, ja JavaScript ir atspējots. Ja jums rūp lietotāja pieredze šajā gadījumā, izmantojiet <noscript>, lai izskaidrotu situāciju (un kā atkārtoti iespējot JavaScript) saviem lietotājiem un/vai pievienojiet savus pielāgotos atkāpšanās variantus.

Pārejas pāreja.js

Par pārejām

Lai iegūtu vienkāršus pārejas efektus, transition.jsvienu reizi iekļaujiet kopā ar citiem JS failiem. Ja izmantojat kompilēto (vai samazināto) bootstrap.js, tas nav jāiekļauj — tas jau ir tur.

Kas ir iekšā

Transition.js ir pamata palīgs transitionEndnotikumiem, kā arī CSS pārejas emulators. To izmanto citi spraudņi, lai pārbaudītu CSS pārejas atbalstu un noķertu pārejas.

Pāreju atspējošana

Pārejas var globāli atspējot, izmantojot šādu JavaScript fragmentu, kuram ir jānāk pēc transition.js(vai bootstrap.jsvai bootstrap.min.js, atkarībā no gadījuma) ielādes:

$.support.transition = false

Modāli modal.js

Modāļi ir racionalizēti, bet elastīgi dialoga uzvednes ar minimālo nepieciešamo funkcionalitāti un viedajiem noklusējuma iestatījumiem.

Tā kā HTML5 definē savu semantiku, autofocusHTML atribūts Bootstrap modālos neietekmē. Lai sasniegtu tādu pašu efektu, izmantojiet kādu pielāgotu JavaScript:

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

Piemēri

Statisks piemērs

Renderēts modāls ar galveni, pamattekstu un darbību kopu kājenē.

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

Demo tiešraidē

Pārslēdziet modālu, izmantojot JavaScript, noklikšķinot uz tālāk esošās pogas. Tas noslīdēs uz leju un pazudīs no lapas augšdaļas.

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

Izvēles izmēri

Modāļiem ir divi izvēles izmēri, kas pieejami modifikatoru klasēs, lai tos ievietotu .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>

Noņemt animāciju

Modāliem, kas vienkārši parādās, nevis izgaist, lai skatītu, noņemiet .fadeklasi no modālā marķējuma.

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

Izmantojot režģa sistēmu

Lai modālā izmantotu Bootstrap režģa sistēmas priekšrocības, vienkārši ievietojiet .rows modālā .modal-bodyun pēc tam izmantojiet parastās režģa sistēmas klases.

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

Dažāds modālais saturs, pamatojoties uz sprūda pogu

Vai jums ir vairākas pogas, kas aktivizē vienu un to pašu modāli, tikai ar nedaudz atšķirīgu saturu? Izmantojiet event.relatedTargetun HTML data-*atribūtus (iespējams , izmantojot jQuery ), lai mainītu modāla saturu atkarībā no tā, kura poga tika noklikšķināta. Skatiet Modal Events dokumentus, lai iegūtu sīkāku informāciju par 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)
})

Lietošana

Modālais spraudnis pēc pieprasījuma pārslēdz jūsu slēpto saturu, izmantojot datu atribūtus vai JavaScript. Tas arī papildina noklusējuma ritināšanas darbību ignorēšanai un ģenerē .modal-openklikšķa apgabalu parādīto modāļu noraidīšanai, noklikšķinot ārpus modāla.<body>.modal-backdrop

Izmantojot datu atribūtus

Aktivizējiet modālu, neierakstot JavaScript. Iestatiet data-toggle="modal"kontroliera elementu, piemēram, pogu, kopā ar data-target="#foo"vai href="#foo", lai atlasītu konkrētu modālu, lai pārslēgtu.

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

Izmantojot JavaScript

Izsauciet modālu ar ID myModalar vienu JavaScript rindiņu:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-backdrop="".

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

Metodes

.modal(options)

Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object.

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

.modal('toggle')

Manuāli pārslēdz modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski parādīts vai paslēpts (ti, pirms notiek notikums shown.bs.modalvai ).hidden.bs.modal

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

.modal('show')

Manuāli atver modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski parādīts (ti, pirms shown.bs.modalnotikuma).

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

.modal('hide')

Manuāli slēpj modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski paslēpts (ti, pirms hidden.bs.modalnotikuma).

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

.modal('handleUpdate')

Pārregulē modāla pozicionēšanu, lai novērstu ritjoslu, ja tāda parādās, kas liktu modālam lēkt pa kreisi.

Nepieciešams tikai tad, ja modāla augstums mainās, kamēr tas ir atvērts.

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

Pasākumi

Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti.

Visi modālie notikumi tiek aktivizēti uz pašu modālu (ti, uz <div class="modal">).

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

Nolaižamās izvēlnes dropdown.js

Piemēri

Pievienojiet nolaižamās izvēlnes gandrīz jebkam, izmantojot šo vienkāršo spraudni, tostarp navigācijas joslu, cilnes un tabletes.

Navigācijas joslā

Tablešu ietvaros

Lietošana

Izmantojot datu atribūtus vai JavaScript, nolaižamais spraudnis pārslēdz slēpto saturu (nolaižamās izvēlnes), pārslēdzot .openklasi vecāksaraksta vienumā.

Mobilajās ierīcēs, atverot nolaižamo izvēlni, tiek pievienots .dropdown-backdropkā pieskāriena apgabals nolaižamo izvēlņu aizvēršanai, pieskaroties ārpus izvēlnes, un tas ir prasība pareizam iOS atbalstam. Tas nozīmē, ka, lai pārslēgtos no atvērtas nolaižamās izvēlnes uz citu nolaižamo izvēlni, mobilajā ierīcē ir nepieciešams papildu pieskāriens.

Piezīme. data-toggle="dropdown"Atribūts tiek izmantots, lai aizvērtu nolaižamās izvēlnes lietojumprogrammas līmenī, tāpēc ieteicams to izmantot vienmēr.

Izmantojot datu atribūtus

Pievienojiet data-toggle="dropdown"saitei vai pogai, lai pārslēgtu nolaižamo izvēlni.

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

Lai saglabātu vietrāžus URL ar saišu pogām, izmantojiet data-targetatribūtu, nevis 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>

Izmantojot JavaScript

Izsauciet nolaižamās izvēlnes, izmantojot JavaScript:

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

Iespējas

Nav

Metodes

$().dropdown('toggle')

Pārslēdz noteiktās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni.

Pasākumi

Visi nolaižamā saraksta notikumi tiek aktivizēti .dropdown-menuvecākelementā.

Visiem nolaižamajiem notikumiem ir relatedTargetrekvizīts, kura vērtība ir pārslēgšanas enkura elements.

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

ScrollSpy scrollspy.js

Piemērs navigācijas joslā

ScrollSpy spraudnis ir paredzēts automātiskai navigācijas mērķu atjaunināšanai, pamatojoties uz ritināšanas pozīciju. Ritiniet apgabalu zem navigācijas joslas un skatieties, kā mainās aktīvā klase. Tiks izcelti arī nolaižamās izvēlnes apakšvienumi.

Lietošana

Nepieciešama relatīva pozicionēšana

Neatkarīgi no ieviešanas metodes, scrollspy pieprasa izmantot position: relative;elementu, kuru izspiegojat. Vairumā gadījumu tas ir <body>. Ritinot citus elementus, nevis <body>, noteikti ir jābūt heightiestatītam un overflow-y: scroll;lietotam.

Izmantojot datu atribūtus

Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, pievienojiet data-spy="scroll"elementu, kuru vēlaties izspiegot (parasti tas ir <body>). Pēc tam pievienojiet atribūtu ar jebkura Bootstrap komponenta data-targetvecākelementa ID vai klasi ..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>

Izmantojot JavaScript

Pēc position: relative;CSS pievienošanas izsauciet scrollspy, izmantojot JavaScript:

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

Metodes

.scrollspy('refresh')

Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-offset="".

Pasākumi

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

Pārslēdzamas cilnes tab.js

Cilņu piemēri

Pievienojiet ātru, dinamisku ciļņu funkcionalitāti, lai pārietu caur vietējā satura rūtīm, pat izmantojot nolaižamās izvēlnes. Ligzdotas cilnes netiek atbalstītas.

Lietošana

Iespējot cilnes, kurās var izmantot JavaScript (katra cilne ir jāaktivizē atsevišķi):

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

Atsevišķas cilnes var aktivizēt vairākos veidos:

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

Atzīmes

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši norādot elementu data-toggle="tab"vai data-toggle="pill"uz tā. Pievienojot cilnei navun klases, tiks lietots Bootstrap cilnes stils , savukārt, pievienojot un klases, tiks lietots tablešu stils .nav-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>

Izbalēšanas efekts

Lai cilnes izzustu, pievienojiet .fadekatrai .tab-pane. Pirmajā cilnes rūtī ir arī .injāpadara redzams sākotnējais saturs.

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

Metodes

$().tab

Aktivizē cilnes elementu un satura konteineru. Cilnē DOM ir jābūt vai nu konteinera mezglam, data-targetvai tā mērķauditorijas atlasei. hrefIepriekš minētajos piemēros cilnes ir <a>s ar data-toggle="tab"atribūtiem.

.tab('show')

Atlasa doto cilni un parāda ar to saistīto saturu. Visas citas iepriekš atlasītās cilnes tiek atceltas, un ar tām saistītais saturs tiek paslēpts. Atgriežas pie zvanītāja, pirms cilnes rūts ir faktiski parādīta (ti, pirms shown.bs.tabnotikuma).

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

Pasākumi

Rādot jaunu cilni, notikumi tiek aktivizēti šādā secībā:

1. hide.bs.tab(pašreizējā aktīvajā cilnē)
2. show.bs.tab(cilnē, kas jāparāda)
3. hidden.bs.tab(iepriekšējā aktīvajā cilnē tā pati, kas hide.bs.tabpasākumam)
4. shown.bs.tab(jaunaktīvā tikko parādītajā cilnē tā pati, kas show.bs.tabnotikumam)

Ja neviena cilne jau nebija aktīva, hide.bs.tabun hidden.bs.tabnotikumi netiks aktivizēti.

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

Rīka padomi tooltip.js

Iedvesmojoties no izcilā spraudņa jQuery.tipsy, ko sarakstījis Džeisons Frame; Rīka padomi ir atjaunināta versija, kas nav atkarīga no attēliem, izmanto CSS3 animācijām un datu atribūtus vietējai nosaukumu glabāšanai.

Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.

Piemēri

Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:

Statiskais rīka padoms

Ir pieejamas četras opcijas: līdzinājums augšā, pa labi, apakšā un pa kreisi.

Četri virzieni

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

Lietošana

Rīkpadomu spraudnis ģenerē saturu un marķējumu pēc pieprasījuma un pēc noklusējuma ievieto rīka padomus aiz to aktivizētāja elementa.

Aktivizējiet rīka padomu, izmantojot JavaScript:

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

Atzīmes

Rīka padomam nepieciešamais marķējums ir tikai dataatribūts title, un HTML elementā, kuram vēlaties izveidot rīka padomu. Rīka padoma ģenerētais marķējums ir diezgan vienkāršs, lai gan tam ir nepieciešama pozīcija (pēc noklusējuma to iestatījis topspraudnis).

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-animation="".

Metodes

$().tooltip(options)

Elementu kolekcijai pievieno rīku padomu apdarinātāju.

.tooltip('show')

Parāda elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms ir faktiski parādīts (ti, pirms shown.bs.tooltipnotikuma). To uzskata par rīka padoma "manuālu" aktivizēšanu. Rīka padomi ar nulles garuma virsrakstiem nekad netiek rādīti.

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

.tooltip('hide')

Paslēpj elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms faktiski ir paslēpts (ti, pirms hidden.bs.tooltipnotikuma). To uzskata par rīka padoma "manuālu" aktivizēšanu.

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

.tooltip('toggle')

Pārslēdz elementa rīka padomu. Atgriežas pie zvanītāja, pirms rīka padoms ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.tooltipvai hidden.bs.tooltipnotikuma). To uzskata par rīka padoma "manuālu" aktivizēšanu.

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

.tooltip('destroy')

Paslēpj un iznīcina elementa rīka padomu. Rīka padomus, kuros tiek izmantota deleģēšana (kas tiek izveidoti, izmantojot opciju selector) , nevar atsevišķi iznīcināt pēcnācēju aktivizētāja elementiem.

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

Pasākumi

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

Popovers popover.js

Pievienojiet mazus satura pārklājumus, piemēram, iPad, jebkuram elementam, lai ievietotu sekundāro informāciju.

Uznirstošie elementi, kuru nosaukumam un saturam ir nulles garums, nekad netiek rādīti.

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

Piemēri

Statisks popover

Ir pieejamas četras opcijas: līdzinājums augšā, pa labi, apakšā un pa kreisi.

Demo tiešraidē

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

Četri virzieni

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

Noraidīt ar nākamo klikšķi

Izmantojiet focustrigeri, lai noraidītu uznirstošos logus nākamajā lietotāja klikšķinā.

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

Lietošana

Iespējot uznirstošos logus, izmantojot JavaScript:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-animation="".

Metodes

$().popover(options)

Inicializē elementu kolekcijas uznirstošos logus.

.popover('show')

Atklāj elementa popover. Atgriežas pie zvanītāja, pirms faktiski ir parādīts uznirstošais logs (ti, pirms shown.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu. Uznirstošie elementi, kuru nosaukumam un saturam ir nulles garums, nekad netiek rādīti.

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

.popover('hide')

Paslēpj elementa uznirstošo logu. Atgriežas pie zvanītāja, pirms uznirstošais logs ir faktiski paslēpts (ti, pirms hidden.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu.

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

.popover('toggle')

Pārslēdz elementa uznirstošo logu. Atgriežas pie zvanītāja, pirms uznirstošais logs ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.popovervai hidden.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu.

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

.popover('destroy')

Paslēpj un iznīcina elementa uznirstošo logu. Uznirstošos logus, kuros tiek izmantota deleģēšana (kas tiek izveidoti, izmantojot opciju selector) , nevar atsevišķi iznīcināt pēcnācēju trigera elementiem.

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

Pasākumi

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

Brīdinājumu ziņojumi alert.js

Brīdinājumu piemēri

Pievienojiet noraidīšanas funkcionalitāti visiem brīdinājuma ziņojumiem, izmantojot šo spraudni.

Lietojot .closepogu, tai ir jābūt pirmajai .alert-dismissibleatzīmei, un marķējumā pirms tās nedrīkst būt teksta saturs.

Lietošana

Vienkārši pievienojiet data-dismiss="alert"savai aizvēršanas pogai, lai automātiski piešķirtu brīdinājuma aizvēršanas funkcionalitāti. Aizverot brīdinājumu, tas tiek noņemts no DOM.

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

Lai brīdinājumos tiktu izmantota animācija, aizverot, pārliecinieties, vai tiem jau ir piemērotas .fadeun .inklases.

Metodes

$().alert()

Liek brīdinājuma signālam noklausīties klikšķu notikumus pēcnācēju elementos, kuriem ir data-dismiss="alert"atribūts. (Nav nepieciešams, ja tiek izmantota datu api automātiskā inicializēšana.)

$().alert('close')

Aizver brīdinājumu, noņemot to no DOM. Ja elementā ir .fadeun .inklases, brīdinājums pazudīs pirms tā noņemšanas.

Pasākumi

Bootstrap brīdinājumu spraudnis atklāj dažus notikumus, lai piesaistītu brīdinājuma funkcionalitāti.

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

Pogas button.js

Padariet vairāk ar pogām. Vadības pogu stāvokļi vai izveidot pogu grupas citiem komponentiem, piemēram, rīkjoslām.

Stateful

Pievienot data-loading-text="Loading...", lai izmantotu pogas ielādes stāvokli.

Šī funkcija ir novecojusi kopš v3.3.5 un ir noņemta versijā 4.

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

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

Viens pārslēgs

Pievienot data-toggle="button", lai aktivizētu pārslēgšanu uz vienas pogas.

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

Izvēles rūtiņa / radio

Pievienojiet data-toggle="buttons"to .btn-groupsaturošai izvēles rūtiņai vai radio ievadiem, lai iespējotu to attiecīgo stilu pārslēgšanu.

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

Metodes

$().button('toggle')

Pārslēdz push stāvokli. Piešķir pogai tādu izskatu, ka tā ir aktivizēta.

$().button('reset')

Atiestata pogas stāvokli — apmaina tekstu ar sākotnējo tekstu. Šī metode ir asinhrona un atgriežas pirms atiestatīšanas ir faktiski pabeigta.

$().button(string)

Apmaina tekstu ar jebkuru datu definētu teksta stāvokli.

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

Sakļaut collapse.js

Elastīgs spraudnis, kas izmanto dažas klases, lai viegli pārslēgtos.

Piemērs

Noklikšķiniet uz tālāk esošajām pogām, lai parādītu un paslēptu citu elementu, veicot klases izmaiņas:

• .collapseslēpj saturu
• .collapsingtiek izmantots pāreju laikā
• .collapse.inparāda saturu

Varat izmantot saiti ar hrefatribūtu vai pogu ar data-targetatribūtu. Abos gadījumos data-toggle="collapse"ir nepieciešams.

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

Akordeona piemērs

Paplašiniet noklusējuma sabrukšanas darbību, lai izveidotu akordeonu ar paneļa komponentu.

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

Ir iespējams arī apmainīt .panel-bodys ar .list-groups.

Lietošana

Sakšanas spraudnis izmanto dažas klases, lai apstrādātu smagumu:

• .collapseslēpj saturu
• .collapse.inparāda saturu
• .collapsingtiek pievienots, kad sākas pāreja, un noņemts, kad tā beidzas

Šīs nodarbības var atrast component-animations.less.

Izmantojot datu atribūtus

Vienkārši pievienojiet elementam data-toggle="collapse"un a data-target, lai automātiski piešķirtu saliekamā elementa vadību. Atribūts data-targetakceptē CSS atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapsesaliekamajam elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi in.

Lai saliekamai vadīklai pievienotu akordeonam līdzīgu grupu pārvaldību, pievienojiet datu atribūtu data-parent="#selector". Skatiet demonstrāciju, lai redzētu to darbībā.

Izmantojot JavaScript

Iespējot manuāli, izmantojot:

$('.collapse').collapse()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-parent="".

Metodes

.collapse(options)

Aktivizē jūsu saturu kā saliekamu elementu. Pieņem izvēles opcijas object.

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

.collapse('toggle')

Pārslēdz saliekamo elementu uz parādīto vai paslēpto. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski parādīts vai paslēpts (ti, pirms notiek notikums shown.bs.collapsevai ).hidden.bs.collapse

.collapse('show')

Parāda saliekamu elementu. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski parādīts (ti, pirms shown.bs.collapsenotikuma).

.collapse('hide')

Paslēpj saliekamu elementu. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski paslēpts (ti, pirms hidden.bs.collapsenotikuma).

Pasākumi

Bootstrap sabrukšanas klase atklāj dažus notikumus, lai piesaistītu sabrukšanas funkcionalitāti.

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

Carousel carousel.js

Slaidrādes komponents, lai pārvietotos pa elementiem, piemēram, karuselis. Ligzdotie karuseļi netiek atbalstīti.

Piemēri

Iepriekšējais Nākamais

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

Izvēles paraksti

Vienkārši pievienojiet parakstus saviem slaidiem, izmantojot .carousel-captionelementu jebkurā .item. Ievietojiet tajā gandrīz jebkuru izvēles HTML, un tas tiks automātiski līdzināts un formatēts.

Pirmā slaida etiķete

Nulla vitae elit libero, a pharetra augue mollis interdum.

Otrā slaida etiķete

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trešā slaida etiķete

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Iepriekšējais Nākamais

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

Lietošana

Vairāki karuseļi

Lai karuseļi darbotos pareizi , ir idjāizmanto vistālākajā konteinerā ( ). .carouselPievienojot vairākus karuseļus vai mainot karuseļus id, noteikti atjauniniet atbilstošās vadīklas.

Izmantojot datu atribūtus

Izmantojiet datu atribūtus, lai viegli kontrolētu karuseļa pozīciju. data-slidepieņem atslēgvārdus prevvai next, kas maina slaida pozīciju attiecībā pret tā pašreizējo pozīciju. Varat arī izmantot, data-slide-tolai nodotu neapstrādātu slaidu indeksu karuselim data-slide-to="2", kas maina slaida pozīciju uz noteiktu indeksu, kas sākas ar 0.

Atribūts data-ride="carousel"tiek izmantots, lai atzīmētu karuseli kā animētu, sākot ar lapas ielādi. To nevar izmantot kopā ar (lieku un nevajadzīgu) nepārprotamu tā paša karuseļa JavaScript inicializēšanu.

Izmantojot JavaScript

Manuāli izsaukt karuseļu, izmantojot:

$('.carousel').carousel()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-interval="".

Metodes

.carousel(options)

Inicializē karuseli ar papildu opcijām objectun sāk pārvietoties pa vienumiem.

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

.carousel('cycle')

Pārvietojas pa karuseļa vienumiem no kreisās puses uz labo.

.carousel('pause')

Neļauj karuselim pārvietoties pa priekšmetiem.

.carousel(number)

Pārvieto karuseli uz noteiktu kadru (0, kas ir līdzīgs masīvam).

.carousel('prev')

Pāriet uz iepriekšējo vienumu.

.carousel('next')

Pāriet uz nākamo vienumu.

Pasākumi

Bootstrap karuseļa klase atklāj divus notikumus, lai pievienotos karuseļa funkcionalitātei.

Abiem notikumiem ir šādas papildu īpašības:

• direction: virziens, kurā karuselis slīd (vai nu "left") "right".
• relatedTarget: DOM elements, kas tiek bīdīts vietā kā aktīvais vienums.

Visi karuseļa notikumi tiek aktivizēti pašā karuselī (ti, uz <div class="carousel">).

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

Piestipriniet affix.js

Piemērs

Afiksa spraudnis ieslēdzas position: fixed;un izslēdzas, atdarinot efektu, kas atrodams ar position: sticky;. Apakšnavigācija labajā pusē ir afiksa spraudņa tiešraides demonstrācija.

Lietošana

Izmantojiet afiksa spraudni, izmantojot datu atribūtus vai manuāli ar savu JavaScript. Abos gadījumos jums ir jānodrošina CSS, lai noteiktu pievienotā satura izvietojumu un platumu.

Piezīme. Safari renderēšanas kļūdas dēļ neizmantojiet afiksa spraudni elementam, kas atrodas relatīvi novietotā elementā, piemēram, izvilktā vai nospiestā kolonnā .

Pozicionēšana, izmantojot CSS

Afiksa spraudnis pārslēdzas starp trim klasēm, no kurām katra apzīmē noteiktu stāvokli: .affix, .affix-top, un .affix-bottom. Lai apstrādātu faktiskās pozīcijas, jums pašam (neatkarīgi no šī spraudņa) ir jānodrošina šo klašu stili, izņemot position: fixed;on ..affix

Lūk, kā darbojas afiksa spraudnis:

1. Lai sāktu, spraudnis tiek pievienots .affix-top, lai norādītu, ka elements atrodas visaugstākajā pozīcijā. Šajā brīdī CSS pozicionēšana nav nepieciešama.
2. Ritinot garām elementam, kuru vēlaties piestiprināt, vajadzētu aktivizēt faktisko piestiprināšanu. Šeit tiek .affixaizstāti .affix-topun iestatīti position: fixed;(nodrošina Bootstrap CSS).
3. Ja ir noteikta apakšējā nobīde, ritinot to garām, tas jāaizstāj .affixar .affix-bottom. Tā kā nobīdes nav obligātas, tās iestatīšanai ir jāiestata atbilstošs CSS. Šādā gadījumā pievienojiet position: absolute;, kad nepieciešams. Spraudnis izmanto datu atribūtu vai JavaScript opciju, lai noteiktu, kur no turienes novietot elementu.

Veiciet iepriekš norādītās darbības, lai iestatītu CSS savienojumu kādai no tālāk norādītajām lietošanas opcijām.

Izmantojot datu atribūtus

Lai jebkuram elementam viegli pievienotu afiksa darbību, vienkārši pievienojiet data-spy="affix"elementam, kuru vēlaties izspiegot. Izmantojiet nobīdes, lai noteiktu, kad pārslēgt elementa piespraušanu.

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

Izmantojot JavaScript

Izsauciet afiksa spraudni, izmantojot JavaScript:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-offset-top="200".

Metodes

.affix(options)

Aktivizē jūsu saturu kā pievienotu saturu. Pieņem izvēles opcijas object.

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

.affix('checkPosition')

Pārrēķina afiksa stāvokli, pamatojoties uz attiecīgo elementu izmēriem, novietojumu un ritināšanas pozīciju. Klases .affix, .affix-top, un .affix-bottomtiek pievienotas pievienotajam saturam vai noņemtas no tā atbilstoši jaunajam stāvoklim. Šī metode ir jāizsauc ikreiz, kad tiek mainīti pievienotā satura vai mērķa elementa izmēri, lai nodrošinātu pareizu pievienotā satura novietojumu.

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

Pasākumi

Bootstrap afiksa spraudnis atklāj dažus notikumus, lai piesaistītu pielikumu funkcionalitāti.