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

Dezinfektues

Këshillat e veglave dhe Popover-at përdorin dezinfektuesin tonë të integruar për të dezinfektuar opsionet që pranojnë HTML.

Vlera e paracaktuar whiteListështë si më poshtë:

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

Nëse dëshironi të shtoni vlera të reja në këtë parazgjedhje whiteList, mund të bëni sa më poshtë:

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

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

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

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

Nëse dëshironi të anashkaloni dezinfektuesin tonë sepse preferoni të përdorni një bibliotekë të dedikuar, për shembull DOMPurify , duhet të bëni sa më poshtë:

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

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.4.1"

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" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

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">
  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">
  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" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

Metodat

$().button('toggle')

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

$().button('reset')

Resets button state - swaps text to original text. This method is asynchronous and returns before the resetting has actually completed.

$().button(string)

Swaps text to any data defined text state.

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

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

Collapse collapse.js

Flexible plugin that utilizes a handful of classes for easy toggle behavior.

Example

Click the buttons below to show and hide another element via class changes:

• .collapse hides content
• .collapsing is applied during transitions
• .collapse.in shows content

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

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

Accordion example

Extend the default collapse behavior to create an accordion with the panel component.

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

It's also possible to swap out .panel-bodys with .list-groups.

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.in shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in component-animations.less.

Via data attributes

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$('.collapse').collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

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

.collapse('toggle')

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).

.collapse('show')

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).

.collapse('hide')

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

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

Carousel carousel.js

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

Examples

Previous Next

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

Optional captions

Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

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

Usage

Multiple carousels

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Both events have the following additional properties:

• direction: The direction in which the carousel is sliding (either "left" or "right").
• relatedTarget: The DOM element that is being slid into place as the active item.

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

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

Affix affix.js

Example

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin.

Usage

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Note: Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug.

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

1. To start, the plugin adds .affix-top to indicate the element is in its top-most position. At this point no CSS positioning is required.
2. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's CSS).
3. If a bottom offset is defined, scrolling past it should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

Follow the above steps to set your CSS for either of the usage options below.

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

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

Via JavaScript

Call the affix plugin via JavaScript:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Methods

.affix(options)

Activates your content as affixed content. Accepts an optional options object.

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

.affix('checkPosition')

Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix, .affix-top, and .affix-bottom classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

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

Events

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.