Vështrim i përgjithshëm

Individuale ose të përpiluara

Shtojcat mund të përfshihen individualisht (duke përdorur *.jsskedarët individualë të Bootstrap), ose të gjitha menjëherë (duke përdorur bootstrap.jsose minuar bootstrap.min.js).

Atributet e të dhënave

Ju mund të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së së shënjimit pa shkruar një rresht të vetëm JavaScript. Ky është API i klasit të parë i Bootstrap dhe duhet të jetë konsiderata juaj e parë kur përdorni një shtojcë.

Thënë kështu, në disa situata mund të jetë e dëshirueshme të çaktivizohet ky funksionalitet. Prandaj, ne ofrojmë gjithashtu mundësinë për të çaktivizuar atributin e të dhënave API duke shkëputur të gjitha ngjarjet në hapësirën e emrave të dokumentit me data-api. Kjo duket si kjo:

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

Përndryshe, për të synuar një shtojcë specifike, thjesht përfshini emrin e shtojcës si një hapësirë ​​emri së bashku me hapësirën e emrave të të dhënave-api si kjo:

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

API programatike

Ne gjithashtu besojmë se duhet të jeni në gjendje të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së JavaScript. Të gjitha API-të publike janë metoda të vetme, të lidhura me zinxhirë dhe e kthejnë koleksionin sipas të cilit është vepruar.

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

Të gjitha metodat duhet të pranojnë një objekt opsionesh opsionale, një varg që synon një metodë të caktuar ose asgjë (që fillon një shtojcë me sjellje të paracaktuar):

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

Çdo shtojcë gjithashtu ekspozon konstruktorin e saj të papërpunuar në një Constructorpronë: $.fn.popover.Constructor. Nëse dëshironi të merrni një shembull të veçantë të shtojcave, merrni atë drejtpërdrejt nga një element: $('[rel="popover"]').data('popover').

Cilësimet e parazgjedhura

Ju mund të ndryshoni cilësimet e paracaktuara për një shtesë duke modifikuar Constructor.DEFAULTSobjektin e shtojcës:

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

Asnjë konflikt

Ndonjëherë është e nevojshme të përdoren shtojcat Bootstrap me korniza të tjera UI. Në këto rrethana, herë pas here mund të ndodhin përplasje të hapësirës së emrave. Nëse kjo ndodh, mund të telefononi .noConflictshtojcën që dëshironi të ktheni vlerën.

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

Ngjarjet

Bootstrap ofron ngjarje të personalizuara për shumicën e veprimeve unike të shtojcave. Në përgjithësi, këto vijnë në një formë të paskajores dhe të paskajores - ku infinitivi (sh. show) shkaktohet në fillim të një ngjarjeje, dhe forma e tij e paskajores (p.sh. ) shownnxitet në përfundimin e një veprimi.

Që nga 3.0.0, të gjitha ngjarjet e Bootstrap janë me hapësirë ​​emrash.

Të gjitha ngjarjet infinitive ofrojnë preventDefaultfunksionalitet. Kjo siguron mundësinë për të ndaluar ekzekutimin e një veprimi përpara se të fillojë.

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

Numrat e versioneve

Versioni i secilës prej shtojcave jQuery të Bootstrap mund të aksesohet nëpërmjet VERSIONvetive të konstruktorit të shtojcave. Për shembull, për shtojcën e këshillës së veglave:

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

Nuk ka kthime të veçanta kur JavaScript është i çaktivizuar

Shtojcat e Bootstrap nuk kthehen veçanërisht me hijeshi kur JavaScript është i çaktivizuar. Nëse ju intereson përvoja e përdoruesit në këtë rast, përdorni <noscript>për të shpjeguar situatën (dhe si të riaktivizoni JavaScript) përdoruesve tuaj dhe/ose shtoni kthimet tuaja të personalizuara.

Tranzicioni i tranzicionit.js

Rreth tranzicioneve

Për efekte të thjeshta tranzicioni, përfshini transition.jsnjë herë së bashku me skedarët e tjerë JS. Nëse jeni duke përdorur të përpiluar (ose të minuar) bootstrap.js, nuk ka nevojë ta përfshini këtë - është tashmë aty.

Çfarë ka brenda

Transition.js është një ndihmës bazë për transitionEndngjarjet, si dhe një emulator i tranzicionit CSS. Përdoret nga shtojcat e tjera për të kontrolluar mbështetjen e tranzicionit CSS dhe për të kapur tranzicionet e varura.

Çaktivizimi i tranzicioneve

Tranzicionet mund të çaktivizohen globalisht duke përdorur fragmentin e mëposhtëm JavaScript, i cili duhet të vijë pasi të jetë ngarkuar transition.js(ose bootstrap.jsose bootstrap.min.js, sipas rastit):

$.support.transition = false

Modalet modale.js

Modalet janë të thjeshta, por fleksibël, kërkesat e dialogut me funksionalitetin minimal të kërkuar dhe parazgjedhjet inteligjente.

Për shkak të mënyrës se si HTML5 përcakton semantikën e tij, autofocusatributi HTML nuk ka asnjë efekt në modalet e Bootstrap. Për të arritur të njëjtin efekt, përdorni disa JavaScript të personalizuara:

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

Shembuj

Shembull statik

Një modal i dhënë me kokë, trup dhe grup veprimesh në fund.

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

Demoja e drejtpërdrejtë

Ndryshoni një modal nëpërmjet JavaScript duke klikuar butonin më poshtë. Do të rrëshqasë poshtë dhe do të zbehet nga pjesa e sipërme e faqes.

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

Madhësitë opsionale

Modalet kanë dy madhësi opsionale, të disponueshme nëpërmjet klasave të modifikuesve për t'u vendosur në një .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>

Hiq animacionin

Për modalet që thjesht shfaqen në vend që të zbehen për t'u parë, hiqni .fadeklasën nga shënimi juaj modal.

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

Përdorimi i sistemit të rrjetit

Për të përfituar nga sistemi i rrjetit Bootstrap brenda një modali, thjesht futni folenë .rowbrenda .modal-bodydhe më pas përdorni klasat e sistemit të rrjetit normal.

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

Ndryshim i përmbajtjes modale bazuar në butonin e aktivizimit

Keni një mori butonash që të gjithë aktivizojnë të njëjtin modal, vetëm me përmbajtje paksa të ndryshme? Përdorni event.relatedTargetdhe atributet HTMLdata-* (mundësisht nëpërmjet jQuery ) për të ndryshuar përmbajtjen e modalit në varësi të butonit që është klikuar. Shihni dokumentet e Ngjarjeve Modal për detaje mbi 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)
})

Përdorimi

Shtojca modale ndryshon përmbajtjen tuaj të fshehur sipas kërkesës, nëpërmjet atributeve të të dhënave ose JavaScript. Ai gjithashtu shton sjelljen e parazgjedhur .modal-opentë <body>lëvizjes për të anashkaluar dhe gjeneron një .modal-backdroppër të siguruar një zonë klikimi për të hequr modalet e treguara kur klikoni jashtë modalit.

Nëpërmjet atributeve të të dhënave

Aktivizoni një modal pa shkruar JavaScript. Vendoseni data-toggle="modal"në një element kontrollues, si një buton, së bashku me një data-target="#foo"ose href="#foo"për të synuar një modal specifik për ta ndërruar.

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

Përmes JavaScript

Thirrni një modal me id myModalme një rresht të vetëm JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-backdrop="".

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

Metodat

.modal(options)

Aktivizon përmbajtjen tuaj si modale. Pranon një opsion opsional object.

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

.modal('toggle')

Ndryshon manualisht një modal. Kthehet te thirrësi përpara se modali të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.modalose ).hidden.bs.modal

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

.modal('show')

Hap me dorë një modal. Kthehet te thirrësi përpara se modali të jetë shfaqur në të vërtetë (dmth. përpara se të shown.bs.modalndodhë ngjarja).

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

.modal('hide')

Fsheh manualisht një modal. Kthehet te thirrësi përpara se modali të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.modalndodhë ngjarja).

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

.modal('handleUpdate')

Rirregullon pozicionimin e modalit për të kundërshtuar një shirit lëvizës në rast se shfaqet një, gjë që do të bënte kërcimin modal në të majtë.

Nevojitet vetëm kur lartësia e modalit ndryshon ndërsa është e hapur.

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

Ngjarjet

Klasa modale e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin modal.

Të gjitha ngjarjet modale janë ndezur në vetë modalin (dmth. në <div class="modal">).

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

Dropdowns dropdown.js

Shembuj

Shtoni menutë me zbritje në pothuajse çdo gjë me këtë shtojcë të thjeshtë, duke përfshirë shiritin e navigimit, skedat dhe pilulat.

Brenda një shirit navigimi

Brenda pilulave

Përdorimi

Nëpërmjet atributeve të të dhënave ose JavaScript-it, shtojca me drop-down ndryshon përmbajtjen e fshehur (menytë me zbritje) duke ndërruar .openklasën në artikullin prind të listës.

Në pajisjet celulare, hapja e një menyje dropdown shton një .dropdown-backdropzonë si trokitje për mbylljen e menyve rënëse kur prekni jashtë menysë, një kërkesë për mbështetjen e duhur të iOS. Kjo do të thotë që kalimi nga një meny e hapur rënëse në një meny tjetër rënëse kërkon një trokitje shtesë në celular.

Shënim: data-toggle="dropdown"Atributi mbështetet për mbylljen e menyve rënëse në një nivel aplikacioni, kështu që është një ide e mirë ta përdorni gjithmonë atë.

Nëpërmjet atributeve të të dhënave

Shto data-toggle="dropdown"në një lidhje ose buton për të ndërruar një listë rënëse.

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

Për të mbajtur URL-të të paprekura me butonat e lidhjeve, përdorni data-targetatributin në vend të 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>

Përmes JavaScript

Thirrni skedarët e lëshimit përmes JavaScript:

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

Opsione

Asnje

Metodat

$().dropdown('toggle')

Ndryshon menynë rënëse të një navigimi të caktuar navigimi ose me skeda.

Ngjarjet

Të gjitha ngjarjet e renditjes lëshohen në .dropdown-menuelementin prind '.

Të gjitha ngjarjet me zbritje kanë një relatedTargetveti, vlera e së cilës është elementi ankorues i ndërrimit.

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

ScrollSpy scrollspy.js

Shembull në navbar

Shtojca ScrollSpy është për përditësimin automatik të objektivave të navigimit bazuar në pozicionin e lëvizjes. Lëvizni zonën poshtë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive. Nën-artikujt në rënie do të theksohen gjithashtu.

Përdorimi

Kërkon pozicionim relativ

Pavarësisht nga metoda e zbatimit, scrollspy kërkon përdorimin e position: relative;elementit që po spiunoni. Në shumicën e rasteve kjo është <body>. Kur spiunoni elementë të ndryshëm nga <body>, sigurohuni që të keni një heightgrup dhe të overflow-y: scroll;aplikoni.

Nëpërmjet atributeve të të dhënave

Për të shtuar me lehtësi sjelljen e scrollspy në navigimin tuaj të shiritit të sipërm, shtoni data-spy="scroll"te elementi që dëshironi të spiunoni (më së shpeshti kjo do të ishte <body>). Më pas shtoni data-targetatributin me ID-në ose klasën e elementit prind të çdo .navkomponenti Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Përmes JavaScript

Pasi të shtoni position: relative;në CSS tuaj, telefononi scrollspy përmes JavaScript:

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

Metodat

.scrollspy('refresh')

Kur përdorni scrollspy në lidhje me shtimin ose heqjen e elementeve nga DOM, do t'ju duhet të telefononi metodën e rifreskimit si kjo:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset="".

Ngjarjet

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

Skedat e ndërrueshme tab.js

Shembuj skedash

Shtoni funksionalitetin e shpejtë dhe dinamik të skedës për të kaluar nëpër panelet e përmbajtjes lokale, madje edhe përmes menuve me zbritje. Skedat e mbivendosura nuk mbështeten.

Përdorimi

Aktivizo skedat me skeda përmes JavaScript (secila skedë duhet të aktivizohet individualisht):

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

Ju mund të aktivizoni skedat individuale në disa mënyra:

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

Markup

Ju mund të aktivizoni navigimin e një skede ose pilule pa shkruar ndonjë JavaScript thjesht duke specifikuar data-toggle="tab"ose data-toggle="pill"mbi një element. Shtimi i klasave navdhe në skedë do të aplikojë stilimin e skedës Bootstrap , ndërsa shtimi i klasave dhe do të aplikojë stilimin e pilulave .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>

Efekti i zbehjes

Për të zbehur skedat, shtoni .fadenë secilën .tab-pane. Paneli i parë i skedës duhet gjithashtu .intë bëjë të dukshme përmbajtjen fillestare.

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

Metodat

$().tab

Aktivizon një element skede dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-targetose një hrefnyje kontejneri në DOM. Në shembujt e mësipërm, skedat janë <a>s me data-toggle="tab"atribute.

.tab('show')

Zgjedh skedën e dhënë dhe tregon përmbajtjen e lidhur me të. Çdo skedë tjetër që është përzgjedhur më parë bëhet e pazgjedhur dhe përmbajtja e lidhur me të fshihet. Kthehet te thirrësi përpara se të shfaqet paneli i skedës (dmth. përpara se të shown.bs.tabndodhë ngjarja).

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

Ngjarjet

Kur shfaqet një skedë e re, ngjarjet shfaqen në rendin e mëposhtëm:

1. hide.bs.tab(në skedën aktuale aktive)
2. show.bs.tab(në skedën që do të shfaqet)
3. hidden.bs.tab(në skedën e mëparshme aktive, e njëjta si për hide.bs.tabngjarjen)
4. shown.bs.tab(në skedën e saposhfaqur të sapoaktive, e njëjta si për show.bs.tabngjarjen)

Nëse asnjë skedë nuk ishte tashmë aktive, atëherë ngjarjet hide.bs.tabdhe hidden.bs.tabnuk do të hapen.

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

Këshillat e veglave.js

Frymëzuar nga shtojca e shkëlqyer jQuery.tipsy e shkruar nga Jason Frame; Këshillat e veglave janë një version i përditësuar, i cili nuk mbështetet në imazhe, përdor CSS3 për animacione dhe atribute të të dhënave për ruajtjen lokale të titujve.

Këshillat e veglave me tituj me gjatësi zero nuk shfaqen kurrë.

Shembuj

Zhvendosni mbi lidhjet e mëposhtme për të parë këshillat e veglave:

Këshillë e veglave statike

Katër opsione janë të disponueshme: lart, djathtas, poshtë dhe majtas rreshtuar.

Katër drejtime

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

Përdorimi

Shtojca e këshillës së veglave gjeneron përmbajtje dhe shënime sipas kërkesës, dhe si parazgjedhje vendos këshillat e veglave pas elementit të tyre të aktivizimit.

Aktivizoni këshillën e veglave përmes JavaScript:

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

Markup

Shënimi i kërkuar për një këshillë mjeti është vetëm një dataatribut dhe titlenë elementin HTML dëshironi të keni një këshillë mjeti. Shënimi i krijuar i një këshille veglash është mjaft i thjeshtë, megjithëse kërkon një pozicion (si parazgjedhje, i caktuar topnga shtojca).

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Metodat

$().tooltip(options)

Bashkangjit një mbajtës udhëzues në një koleksion elementesh.

.tooltip('show')

Zbulon udhëzuesin e një elementi. Kthehet te thirrësi përpara se këshilla e veglave të shfaqet (dmth. përpara se të shown.bs.tooltipndodhë ngjarja). Kjo konsiderohet si një aktivizim "manual" i këshillës së veglave. Këshillat e veglave me tituj me gjatësi zero nuk shfaqen kurrë.

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

.tooltip('hide')

Fsheh udhëzuesin e një elementi. Kthehet te thirrësi përpara se këshilla e veglave të jetë fshehur (dmth. përpara se të hidden.bs.tooltipndodhë ngjarja). Kjo konsiderohet si një aktivizim "manual" i këshillës së veglave.

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

.tooltip('toggle')

Ndryshon udhëzuesin e një elementi. Kthehet te thirrësi përpara se këshilla e veglave të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.tooltipose ). hidden.bs.tooltipKjo konsiderohet si një aktivizim "manual" i këshillës së veglave.

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

.tooltip('destroy')

Fsheh dhe shkatërron udhëzuesin e një elementi. Këshillat e veglave që përdorin delegimin (të cilat krijohen duke përdorur opsionin selector) nuk mund të shkatërrohen individualisht në elementët e aktivizimit pasardhës.

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

Ngjarjet

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

Popovers popover.js

Shtoni mbivendosje të vogla të përmbajtjes, si ato në iPad, në çdo element për strehimin e informacionit dytësor.

Popover-et, titulli dhe përmbajtja e të cilëve janë me gjatësi zero, nuk shfaqen kurrë.

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

Shembuj

Popover statike

Katër opsione janë të disponueshme: lart, djathtas, poshtë dhe majtas rreshtuar.

Demoja e drejtpërdrejtë

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

Katër drejtime

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

Hiqe në klikim tjetër

Përdorni focuskëmbëzën për të hequr popover-et në klikimin tjetër që bën përdoruesi.

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

Përdorimi

Aktivizo popover-et përmes JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Metodat

$().popover(options)

Inicializon popover-et për një koleksion elementesh.

.popover('show')

Zbulon popoverin e një elementi. Kthehet te thirrësi përpara se të shfaqet në të vërtetë popoveri (dmth. përpara se shown.bs.popoverngjarja të ndodhë). Kjo konsiderohet si një nxitje "manuale" e popoverit. Popover-et, titulli dhe përmbajtja e të cilëve janë me gjatësi zero, nuk shfaqen kurrë.

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

.popover('hide')

Fsheh popoverin e një elementi. Kthehet te thirrësi përpara se popover të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.popoverndodhë ngjarja). Kjo konsiderohet si një nxitje "manuale" e popoverit.

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

.popover('toggle')

Ndryshon popover-in e një elementi. Kthehet te thirrësi përpara se popover-i të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.popoverose ). hidden.bs.popoverKjo konsiderohet si një nxitje "manuale" e popoverit.

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

.popover('destroy')

Fsheh dhe shkatërron popoverin e një elementi. Popoverët që përdorin delegimin (të cilat krijohen duke përdorur opsionin selector) nuk mund të shkatërrohen individualisht në elementët e aktivizimit pasardhës.

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

Ngjarjet

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

Mesazhet e alarmit alert.js

Shembuj sinjalizimesh

Shto funksionin e heqjes dorë në të gjitha mesazhet e alarmit me këtë shtesë.

Kur përdorni një .closebuton, ai duhet të jetë fëmija i parë i tij .alert-dismissibledhe asnjë përmbajtje teksti nuk mund të dalë përpara tij në shënim.

Përdorimi

Thjesht shtoni data-dismiss="alert"në butonin tuaj të mbylljes për të dhënë automatikisht një funksion të mbylljes së alarmit. Mbyllja e një sinjalizimi e heq atë nga DOM.

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

Në mënyrë që sinjalizimet tuaja të përdorin animacion kur mbyllen, sigurohuni që ato të kenë klasat .fadedhe .intë aplikuara tashmë për to.

Metodat

$().alert()

Bën një alarm të dëgjojë për ngjarjet e klikimeve në elementët pasardhës që kanë data-dismiss="alert"atributin. (Nuk është e nevojshme kur përdorni inicializimin automatik të data-api.)

$().alert('close')

Mbyll një alarm duke e hequr atë nga DOM. Nëse klasat .fadedhe .injanë të pranishme në element, sinjalizimi do të shuhet përpara se të hiqet.

Ngjarjet

Shtojca e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.

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

Butoni i butonave.js

Bëni më shumë me butona. Kontrolloni gjendjet e butonit ose krijoni grupe butonash për më shumë komponentë si shiritat e veglave.

Shtetërore

Shto data-loading-text="Loading..."për të përdorur një gjendje ngarkimi në një buton.

Ky funksion është i vjetëruar që nga v3.3.5 dhe është hequr në v4.

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

Ndërrim i vetëm

Shto data-toggle="button"për të aktivizuar ndërrimin në një buton të vetëm.

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

Kutia e kontrollit / Radio

Shtoni data-toggle="buttons"në një .btn-groupkuti kontrolli ose hyrje radioje për të mundësuar ndryshimin në stilet e tyre përkatëse.

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

Metodat

$().button('toggle')

Aktivizon gjendjen e shtytjes. I jep butonit pamjen se është aktivizuar.

$().button('reset')

Rivendos gjendjen e butonit - ndërron tekstin në tekstin origjinal. Kjo metodë është asinkrone dhe kthehet përpara se rivendosja të ketë përfunduar.

$().button(string)

Ndërron tekstin në çdo gjendje teksti të përcaktuar nga të dhënat.

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

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

Collapse collapse.js

Shtojcë fleksibël që përdor një sërë klasash për sjellje të lehtë të ndërrimit.

Shembull

Klikoni butonat më poshtë për të shfaqur dhe fshehur një element tjetër nëpërmjet ndryshimeve të klasës:

• .collapsefsheh përmbajtjen
• .collapsingzbatohet gjatë tranzicionit
• .collapse.intregon përmbajtjen

Mund të përdorni një lidhje me hrefatributin ose një buton me data-targetatributin. Në të dyja rastet, data-toggle="collapse"kërkohet.

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

Shembull fizarmonikë

Zgjero sjelljen e parazgjedhur të kolapsit për të krijuar një fizarmonikë me komponentin e panelit.

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

Është gjithashtu e mundur të ndërroni .panel-bodys me .list-groups.

Përdorimi

Shtojca e kolapsit përdor disa klasa për të trajtuar ngritjen e rëndë:

• .collapsefsheh përmbajtjen
• .collapse.intregon përmbajtjen
• .collapsingshtohet kur fillon tranzicioni dhe hiqet kur përfundon

Këto klasa mund të gjenden në component-animations.less.

Nëpërmjet atributeve të të dhënave

Thjesht shtoni data-toggle="collapse"dhe a data-targetnë element për të caktuar automatikisht kontrollin e një elementi të palosshëm. Atributi data-targetpranon një përzgjedhës CSS për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë in.

Për të shtuar menaxhimin e grupit të ngjashëm me fizarmonikën në një kontroll të palosshëm, shtoni atributin e të dhënave data-parent="#selector". Referojuni demonstrimit për ta parë këtë në veprim.

Përmes JavaScript

Aktivizo manualisht me:

$('.collapse').collapse()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-parent="".

Metodat

.collapse(options)

Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object.

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

.collapse('toggle')

Ndryshon një element të palosshëm në të shfaqur ose të fshehur. Kthehet te thirrësi përpara se elementi i palosshëm të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.collapseose ).hidden.bs.collapse

.collapse('show')

Tregon një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të shfaqet (dmth. përpara se të shown.bs.collapsendodhë ngjarja).

.collapse('hide')

Fsheh një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.collapsendodhë ngjarja).

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

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

Carousel carousel.js

Një komponent i paraqitjes së rrëshqitjes për çiklizëm nëpër elementë, si një karusel. Karuselet e mbivendosur nuk mbështeten.

Shembuj

E mëparshme Tjetra

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

Titrat opsionale

Shtoni titrat në rrëshqitjet tuaja me lehtësi me .carousel-captionelementin brenda çdo .item. Vendosni pothuajse çdo HTML opsional brenda atje dhe ai do të rreshtohet dhe formatohet automatikisht.

Etiketa e parë e rrëshqitjes

Nulla vitae elit libero, një pharetra augue mollis interdum.

Etiketa e rrëshqitjes së dytë

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiketa e rrëshqitjes së tretë

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

E mëparshme Tjetra

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

Përdorimi

Karusele të shumta

Karuselet kërkojnë përdorimin e një idnë kontejnerin më të jashtëm ( .carousel) që kontrollet e karuselit të funksionojnë siç duhet. Kur shtoni karusele të shumëfishta ose kur ndryshoni një karuselë id, sigurohuni që të përditësoni kontrollet përkatëse.

Nëpërmjet atributeve të të dhënave

Përdorni atributet e të dhënave për të kontrolluar me lehtësi pozicionin e karuselit. data-slidepranon fjalët kyçe prevose next, e cila ndryshon pozicionin e rrëshqitjes në lidhje me pozicionin e tij aktual. Përndryshe, përdorni data-slide-topër të kaluar një indeks të papërpunuar të rrëshqitjes te karuseli data-slide-to="2", i cili e zhvendos pozicionin e rrëshqitjes në një indeks të veçantë duke filluar me 0.

Atributi data-ride="carousel"përdoret për të shënuar një karusel si animues duke filluar nga ngarkimi i faqes. Nuk mund të përdoret në kombinim me inicializimin e qartë JavaScript (të tepërt dhe të panevojshëm) të të njëjtit karusel.

Përmes JavaScript

Thirrni karuselin manualisht me:

$('.carousel').carousel()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-interval="".

Metodat

.carousel(options)

Inicializon karuselin me një opsion opsional objectdhe fillon të lëvizë me biçikletë nëpër artikuj.

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

.carousel('cycle')

Ciklet nëpër artikujt e karuselit nga e majta në të djathtë.

.carousel('pause')

Ndalon karuselin të lëvizë me biçikletë nëpër artikuj.

.carousel(number)

Ciklizon karuselin në një kornizë të caktuar (bazuar në 0, e ngjashme me një grup).

.carousel('prev')

Ciklet në artikullin e mëparshëm.

.carousel('next')

Ciklet te artikulli tjetër.

Ngjarjet

Klasa e karuselit të Bootstrap ekspozon dy ngjarje për t'u lidhur me funksionalitetin e karuselit.

Të dyja ngjarjet kanë karakteristikat e mëposhtme shtesë:

• direction: Drejtimi në të cilin rrëshqet karuseli (ose "left"ose "right").
• relatedTarget: Elementi DOM që po futet në vend si artikull aktiv.

Të gjitha ngjarjet e karuselit shkrepen në vetë karuselin (dmth. në <div class="carousel">).

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

Affix affix.js

Shembull

Shtojca e fiksimit position: fixed;aktivizohet dhe fiket, duke emuluar efektin e gjetur me position: sticky;. Nënnavigimi në të djathtë është një demonstrim i drejtpërdrejtë i shtojcës affix.

Përdorimi

Përdorni shtojcën shtesë nëpërmjet atributeve të të dhënave ose manualisht me JavaScript-in tuaj. Në të dyja situatat, duhet të siguroni CSS për pozicionimin dhe gjerësinë e përmbajtjes suaj të ngjitur.

Shënim: Mos përdorni shtojcën shtesë në një element që gjendet në një element relativisht të pozicionuar, si p.sh. një kolonë e tërhequr ose e shtyrë, për shkak të një defekti në paraqitjen e Safari .

Pozicionimi përmes CSS

Shtojca e shtojcës kalon midis tre klasave, secila përfaqëson një gjendje të veçantë: .affix, .affix-top, dhe .affix-bottom. Ju duhet të siguroni stilet, me përjashtim të position: fixed;on .affix, për këto klasa vetë (të pavarur nga kjo shtojcë) për të trajtuar pozicionet aktuale.

Ja se si funksionon shtojca affix:

1. Për të filluar, shtojca shton .affix-toppër të treguar se elementi është në pozicionin e tij më të lartë. Në këtë pikë nuk kërkohet pozicionim CSS.
2. Lëvizja pas elementit që dëshironi të ngjitet duhet të shkaktojë ngjitjen aktuale. Këtu .affixzëvendësohet .affix-topdhe vendoset position: fixed;(siguruar nga CSS e Bootstrap).
3. Nëse përcaktohet një zhvendosje e poshtme, lëvizja pas saj duhet të zëvendësohet .affixme .affix-bottom. Meqenëse kompensimet janë opsionale, vendosja e njërës kërkon që të vendosni CSS-në e duhur. Në këtë rast, shtoni position: absolute;kur është e nevojshme. Shtojca përdor atributin e të dhënave ose opsionin JavaScript për të përcaktuar se ku të pozicionohet elementi nga atje.

Ndiqni hapat e mësipërm për të vendosur CSS-në tuaj për cilindo nga opsionet e përdorimit më poshtë.

Nëpërmjet atributeve të të dhënave

Për të shtuar lehtësisht sjelljen e ngjitjes në çdo element, thjesht shtoni data-spy="affix"elementin që dëshironi të spiunoni. Përdorni zhvendosjet për të përcaktuar se kur duhet të ndërroni fiksimin e një elementi.

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

Përmes JavaScript

Thirrni shtojcën e shtojcës përmes JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset-top="200".

Metodat

.affix(options)

Aktivizon përmbajtjen tuaj si përmbajtje të ngjitur. Pranon një opsion opsional object.

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

.affix('checkPosition')

Rillogarit gjendjen e shtojcës bazuar në dimensionet, pozicionin dhe pozicionin e rrotullimit të elementeve përkatës. Klasat .affix, .affix-top, dhe .affix-bottomshtohen ose hiqen nga përmbajtja e ngjitur sipas gjendjes së re. Kjo metodë duhet të thirret sa herë që ndryshojnë dimensionet e përmbajtjes së ngjitur ose elementit të synuar, për të siguruar pozicionimin e saktë të përmbajtjes së ngjitur.

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

Ngjarjet

Shtojca shtesë e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e ngjitjes.