Panoramica

Individuali o cumpilati

I plugins ponu esse inclusi individualmente (aduprendu i *.jsschedarii individuali di Bootstrap), o tutti in una volta (usendu bootstrap.jso minified bootstrap.min.js).

Attributi di dati

Pudete aduprà tutti i plugins Bootstrap puramente attraversu l'API di marcatura senza scrive una sola linea di JavaScript. Questa hè l'API di prima classe di Bootstrap è deve esse a vostra prima cunsiderazione quandu utilizate un plugin.

Dittu chistu, in certi situazioni pò esse desiderate di disattivà sta funziunalità. Dunque, furnimu ancu a capacità di disattivà l'API di l'attributu di dati unbinding all events on the document namespaced with data-api. Questu pare cusì:

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

In alternativa, per destinà un plugin specificu, basta include u nome di u plugin cum'è un spaziu di nome cù u spaziu di nome data-api cum'è questu:

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

API di prugrammazione

Cridemu ancu chì duvete esse capace di utilizà tutti i plugins Bootstrap puramente attraversu l'API JavaScript. Tutte l'API pubbliche sò metudi unichi, incatenati, è tornanu a cullezzione attuata.

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

Tutti i metudi duveranu accettà un oggettu d'opzioni opzionali, una stringa chì mira à un metudu particulari, o nunda (chì inizia un plugin cù un cumpurtamentu predeterminatu):

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

Ogni plugin espone ancu u so custruttore crudu nantu à una Constructorpruprietà: $.fn.popover.Constructor. Se vulete acquistà una istanza di plugin particulari, ricuperà direttamente da un elementu: $('[rel="popover"]').data('popover').

Paràmetri predeterminati

Pudete cambià i paràmetri predeterminati per un plugin mudificà l' Constructor.DEFAULTSughjettu di u plugin:

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

Nisun cunflittu

A volte hè necessariu di utilizà plugins Bootstrap cù altri frameworks UI. In queste circustanze, i collisioni di u spaziu di nomi ponu accade in ocasioni. Se questu succede, pudete chjamà .noConflictu plugin chì vulete rinvià u valore.

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

Avvenimenti

Bootstrap furnisce avvenimenti persunalizati per a maiò parte di l'azzioni uniche di i plugins. In generale, questi venenu in una forma di participiu infinitu è ​​passatu - induve l'infinitivu (es. show) hè attivatu à l'iniziu di un avvenimentu, è a so forma di participiu passatu (es. shown) hè attivatu à a fine di una azione.

Da 3.0.0, tutti l'avvenimenti Bootstrap sò namespaced.

Tutti l'avvenimenti infiniti furnisce preventDefaultfunziunalità. Questu furnisce a capacità di piantà l'esekzione di un'azzione prima di principià.

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

Sanitizer

Tooltips è Popovers utilizanu u nostru sanitizer integratu per sanitizà l'opzioni chì accettanu HTML.

whiteListU valore predeterminatu hè u seguente:

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: []
}

Se vulete aghjunghje novi valori à questu predefinitu whiteList, pudete fà e seguenti:

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)

Se vulete sguassate u nostru disinfettante perchè preferite aduprà una biblioteca dedicata, per esempiu DOMPurify , duvete fà ciò chì segue:

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

Numeri di versione

A versione di ognuna di i plugins jQuery di Bootstrap pò esse accessu via a VERSIONpruprietà di u custruttore di u plugin. Per esempiu, per u plugin tooltip:

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

Nisuna fallback speciale quandu JavaScript hè disattivatu

I plugins di Bootstrap ùn tornanu micca particularmente grazia quandu JavaScript hè disattivatu. Se ti interessa l'esperienza di l'utilizatori in questu casu, aduprate <noscript>per spiegà a situazione (è cumu riattivate JavaScript) à i vostri utilizatori, è / o aghjunghje i vostri propri fallbacks persunalizati.

Transizioni transition.js

À propositu di transizioni

Per effetti di transizione simplici, include transition.jsuna volta cù l'altri schedari JS. Sè vo aduprate u compilatu (o minificatu) bootstrap.js, ùn ci hè bisognu di include questu - hè digià quì.

Chì ci hè dentru

Transition.js hè un aiutu basicu per transitionEndl'avvenimenti è ancu un emulatore di transizione CSS. Hè utilizatu da l'altri plugins per verificà u supportu di transizione CSS è per catturà transizioni pendenti.

Disabilitazione di transizioni

E transizioni ponu esse disattivate in u mondu aduprendu u frammentu JavaScript seguente, chì deve vene dopu transition.js(o bootstrap.js, bootstrap.min.jssecondu u casu) hè stata caricata:

$.support.transition = false

Modali modali.js

I modali sò simplificati, ma flessibili, i prompt di dialogu cù a funziunalità minima necessaria è i predefiniti intelligenti.

A causa di a manera chì HTML5 definisce a so semantica, l' autofocusattributu HTML ùn hà micca effettu in i modali Bootstrap. Per ottene u listessu effettu, utilizate qualchì JavaScript persunalizatu:

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

Esempii

Esempiu staticu

Un modale renditu cù l'intestazione, u corpu è l'inseme d'azzioni in u footer.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demo live

Cambia un modale via JavaScript clicchendu u buttone sottu. Si scenderà è fade in da a cima di a pagina.

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

Taglie opzionali

I modali anu duie dimensioni opzionali, dispunibuli via classi di modificatori per esse posti nantu à un .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>

Elimina l'animazione

Per i modali chì simpricimenti appariscenu piuttostu chè svanisce per vede, sguassate a .fadeclassa da u vostru marcatu modale.

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

Utilizà u sistema di griglia

Per prufittà di u sistema di griglia Bootstrap in una modale, basta nidificate .rows in u sistema di .modal-bodygriglia normale è poi aduprate e classi di sistema di griglia normale.

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

Variante di cuntenutu modali basatu annantu à u buttone di trigger

Avete una mansa di buttone chì tutti attivanu u listessu modale, solu cù un cuntenutu ligeramente sfarente? Aduprate event.relatedTargetè l' attributi HTMLdata-* (possibilmente via jQuery ) per varià u cuntenutu di u modale secondu u buttone hè clicatu. Vede i documenti di Eventi Modali per i dettagli nantu à 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)
})

Usu

U plugin modale cambia u vostru cuntenutu oculatu nantu à dumanda, via attributi di dati o JavaScript. Aghjunghje ancu .modal-openà l' <body>annullamentu di u cumpurtamentu di scrolling predeterminatu è genera un .modal-backdropper furnisce una zona di clic per dismissing modali mostrati quandu cliccate fora di u modale.

Via attributi di dati

Attivate un modale senza scrive JavaScript. Pone data-toggle="modal"nantu à un elementu di cuntrollu, cum'è un buttone, inseme cù un data-target="#foo"o href="#foo"per destinà un modale specificu per cambià.

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

Via JavaScript

Chjamate un modale cù id myModalcù una sola linea di JavaScript:

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-backdrop="".

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

I metudi

.modal(options)

Attiva u vostru cuntenutu cum'è modale. Accetta opzioni opzionali object.

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

.modal('toggle')

Cambia manualmente un modale. Ritorna à u chjamante prima chì u modale hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.modalo hidden.bs.modalsi faci).

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

.modal('show')

Apertura manualmente un modale. Ritorna à u chjamante prima chì u modale hè statu veramente mostratu (vale à dì prima chì l' shown.bs.modalavvenimentu si faci).

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

.modal('hide')

Oculta manualmente un modale. Ritorna à u chjamante prima chì a modale hè stata oculata (vale à dì prima chì l' hidden.bs.modalavvenimentu si faci).

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

.modal('handleUpdate')

Reajusta a pusizione di u modale per contru à una barra di scorrimentu in casu chì unu deve apparisce, chì faria u modale saltà à a manca.

Solu necessariu quandu l'altezza di u modale cambia mentre hè apertu.

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

Avvenimenti

A classa modale di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità modale.

Tutti l'avvenimenti modali sò sparati à u modal stessu (vale à dì à u <div class="modal">).

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

Dropdowns dropdown.js

Esempii

Aghjunghjite menu dropdown à quasi tuttu cù stu plugin simplice, cumprese a barra di navigazione, tabulazioni è pillole.

In una barra di navigazione

Dentru pilules

Usu

Via attributi di dati o JavaScript, u ​​plugin drop-down cambia u cuntenutu oculatu (menu drop-down) cumminendu a .openclassa nantu à l'elementu di a lista parent.

Nant'à i dispositi mobili, l'apertura di un menu a tendina aghjunghjenu una .dropdown-backdropzona di tap per chjude i menu dropdown quandu toccu fora di u menu, un requisitu per un supportu iOS propiu. Questu significa chì per passà da un menu a tendina aperta à un menu a tendina differente richiede un toccu extra in u telefuninu.

Nota: L' data-toggle="dropdown"attributu hè affidatu per chjude i menu drop-down à u livellu di l'applicazione, cusì hè una bona idea di aduprà sempre.

Via attributi di dati

Aghjunghjite data-toggle="dropdown"à un ligame o un buttone per commutà un menu dropdown.

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

Per mantene l'URL intactu cù i buttoni di ligame, utilizate l' data-targetattributu invece di 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>

Via JavaScript

Chjamate i menu dropdown via JavaScript:

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

Opzioni

Nimu

I metudi

$().dropdown('toggle')

Commuta u menu a discesa di una determinata barra di navigazione o navigazione a tabulazione.

Avvenimenti

Tutti l'avvenimenti dropdown sò sparati à l' .dropdown-menuelementu parent '.

Tutti l'avvenimenti dropdown anu una relatedTargetpruprietà, chì u valore hè l'elementu di l'ancora basculante.

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

ScrollSpy scrollspy.js

Esempiu in a barra di navigazione

U plugin ScrollSpy hè per aghjurnà automaticamente i miri di navigazione basatu nantu à a pusizione di scroll. Scroll the area below the navbar and watch the active class change. I sub-elementi di menu a tendina saranu ancu evidenziati.

Usu

Esige un posizionamentu relativo

Ùn importa micca u metudu di implementazione, scrollspy richiede l'usu di position: relative;l'elementu chì spia. In a maiò parte di i casi, questu hè <body>. Quandu scrollspying nantu à elementi altru ch'è u <body>, assicuratevi di avè un heightset è overflow-y: scroll;appiicatu.

Via attributi di dati

Per aghjunghje facilmente u cumpurtamentu scrollspy à a vostra navigazione in cima, aghjunghje data-spy="scroll"à l'elementu chì vulete spià (a più tipica questu seria u <body>). Allora aghjunghje l' data-targetattributu cù l'ID o a classa di l'elementu parent di qualsiasi .navcumpunente 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>

Via JavaScript

Dopu avè aghjustatu position: relative;in u vostru CSS, chjamate scrollspy via JavaScript:

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

I metudi

.scrollspy('refresh')

Quandu si usa scrollspy in cunghjunzione cù l'aghjunzione o l'eliminazione di elementi da u DOM, avete bisognu di chjamà u metudu di rinfrescante cusì:

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-offset="".

Avvenimenti

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

Tabulazioni alternabili tab.js

Esempiu di tabs

Aghjunghjite una funziunalità di tabulazione rapida è dinamica per a transizione attraversu i pannelli di cuntenutu locale, ancu per mezu di menu a tendina. I tabs nidificati ùn sò micca supportati.

Usu

Attivà e tabulazioni tabulabili via JavaScript (ogni tabulazione deve esse attivata individualmente):

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

Pudete attivà tabulazioni individuali in parechje manere:

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

Marcatura

Pudete attivà una tabulazione o una navigazione di pillola senza scrivite JavaScript per solu specificà data-toggle="tab"o data-toggle="pill"nantu à un elementu. Aghjunghjendu nave nav-tabsclassi à a tabulazione ulapplicà u stilu di tabulazione Bootstrap , mentre chì aghjunghje nave nav-pillsclassi applicà u stilu di pillola .

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

Effettu fade

Per fà chì e tabulazioni svaniscenu, aghjunghje .fadeà ognunu .tab-pane. U primu pannellu di tabulazione deve ancu .infà vede u cuntenutu iniziale.

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

I metudi

$().tab

Attiva un elementu di tabulazione è cuntenutu di cuntenutu. A tabulazione deve avè un data-targeto un hreftargeting un node di cuntainer in u DOM. In l'esempii sopra, i tabulazioni sò i <a>s cù data-toggle="tab"attributi.

.tab('show')

Selezziunate a tabulazione data è mostra u so cuntenutu assuciatu. Qualchese altra tabulazione chì era prima scelta diventa micca selezziunata è u so cuntenutu assuciatu hè oculatu. Ritorna à u chjamante prima chì u pannellu di tabulazione hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tabavvenimentu si faci).

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

Avvenimenti

Quandu mostra una nova tabulazione, l'avvenimenti sparanu in l'ordine seguente:

1. hide.bs.tab(nantu à a tabulazione attiva attuale)
2. show.bs.tab(nantu à a tabulazione da vede)
3. hidden.bs.tab(nantu à a tabulazione attiva precedente, u listessu cum'è per l' hide.bs.tabavvenimentu)
4. shown.bs.tab(nantu à a tabulazione appena attivata appena mostrata, a stessa chì per l' show.bs.tabavvenimentu)

Sì nisuna tabulazione era digià attiva, allora l' hide.bs.tabeventi hidden.bs.tabùn saranu micca sparati.

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

Tooltips tooltip.js

Ispiratu da l'excellente plugin jQuery.tipsy scrittu da Jason Frame; Tooltips sò una versione aghjurnata, chì ùn si basa micca nantu à l'imaghjini, utilizate CSS3 per animazioni, è attributi di dati per u almacenamentu di titulu lucale.

Tooltips cù tituli di lunghezza zero ùn sò mai affissati.

Esempii

Passa sopra i ligami sottu per vede tooltips:

Tooltip staticu

Quattru opzioni sò dispunibuli: in cima, à diritta, in fondu è à manca.

Quattru direzzione

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

Usu

U plugin di tooltip genera cuntenutu è marcatu nantu à a dumanda, è di manera predeterminata mette tooltips dopu u so elementu trigger.

Trigger u tooltip via JavaScript:

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

Marcatura

U marcatu necessariu per un tooltip hè solu un dataattributu è titlenantu à l'elementu HTML chì vulete avè un tooltip. U marcatu generatu di un tooltip hè piuttostu simplice, ancu s'ellu ci vole una pusizioni (per difettu, stabilitu topda u plugin).

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-animation="".

I metudi

$().tooltip(options)

Attacca un gestore di tooltip à una cullizzioni di elementi.

.tooltip('show')

Revela u tooltip di l'elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tooltipavvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip. Tooltips cù tituli di lunghezza zero ùn sò mai affissati.

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

.tooltip('hide')

Nasconde u tooltip di un elementu. Ritorna à u chjamante prima chì a tooltip hè stata oculata (vale à dì prima chì l' hidden.bs.tooltipavvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.

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

.tooltip('toggle')

Commuta u tooltip di un elementu. Ritorna à u chjamante prima chì u tooltip hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.tooltipo hidden.bs.tooltipsi faci). Questu hè cunsideratu un attivazione "manuale" di u tooltip.

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

.tooltip('destroy')

Oculta è distrugge u tooltip di un elementu. Tooltips chì utilizanu a delegazione (chì sò creati cù l' selectoropzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.

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

Avvenimenti

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

Popovers popover.js

Aghjunghjite picculi sovrapposizioni di cuntenutu, cum'è quelli nantu à l'iPad, à qualsiasi elementu per l'alloghju di l'infurmazione secundaria.

I popovers chì u titulu è u cuntenutu sò di lunghezza zero ùn sò mai affissati.

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

Esempii

Popover staticu

Quattru opzioni sò dispunibuli: in cima, à diritta, in fondu è à manca.

Demo live

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

Quattru direzzione

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

Licenziate nantu à u prossimu clic

Aduprate u focustrigger per scaccià popovers nantu à u prossimu clic chì l'utilizatore face.

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

Usu

Abilita popovers via JavaScript:

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-animation="".

I metudi

$().popover(options)

Inizializza popovers per una cullizzioni di elementi.

.popover('show')

Revela u popover di un elementu. Ritorna à u chjamante prima chì u popover hè statu veramente mostratu (vale à dì prima chì l' shown.bs.popoveravvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u popover. I popovers chì u titulu è u cuntenutu sò di lunghezza zero ùn sò mai affissati.

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

.popover('hide')

Nasconde u popover di un elementu. Ritorna à u chjamante prima chì u popover sia statu oculatu (vale à dì prima di uhidden.bs.popover avvenimentu si faci). Questu hè cunsideratu un attivazione "manuale" di u popover.

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

.popover('toggle')

Commuta u popover di un elementu. Ritorna à u chjamante prima chì u popover sia statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.popovero hidden.bs.popoversi faci). Questu hè cunsideratu un attivazione "manuale" di u popover.

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

.popover('destroy')

Oculta è distrugge u popover di un elementu. Popovers chì utilizanu a delegazione (chì sò creati cù l' selectoropzione ) ùn ponu micca esse distrutte individualmente nantu à elementi di trigger discendenti.

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

Avvenimenti

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

Messaggi d'alerta alert.js

Esempi di avvisi

Aghjunghjite a funziunalità di licenzià à tutti i missaghji d'alerta cù stu plugin.

Quandu s'utilice un .closebuttone, deve esse u primu figliolu di u .alert-dismissiblecuntenutu di u testu ùn pò esse prima in u marcatu.

Usu

Basta à aghjunghje data-dismiss="alert"à u vostru buttone vicinu per dà automaticamente una funziunalità di avvisu vicinu. Chiudendu una alerta elimina da u DOM.

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

Per avè i vostri alerti utilizanu animazione quandu si chjude, assicuratevi chì anu .fadee .inclassi già applicate à elli.

I metudi

$().alert()

Fà una alerta à sente per l'avvenimenti di cliccà nantu à elementi discendenti chì anu l' data-dismiss="alert"attributu. (Ùn hè necessariu quandu si usa l'inizializazione automatica di l'api di dati).

$().alert('close')

Chiude una alerta rimuovendu da u DOM. Se u .fadeè.in sò prisenti nantu à l'elementu, l'alerta svanisce prima di esse eliminata.

Avvenimenti

U plugin d'alerta di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità d'alerta.

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

Buttons button.js

Fate più cù i buttoni. Cuntrolla i stati di u buttone o crea gruppi di buttoni per più cumpunenti cum'è toolbars.

Stateful

Aghjunghjite data-loading-text="Loading..."per utilizà un statu di carica nantu à un buttone.

Questa funzione hè obsoleta da v3.3.5 è hè stata sguassata in 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>

Toggle unicu

Aghjunghjite data-toggle="button"per attivà a basculazione nantu à un unicu buttone.

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

Casella di cuntrollu / Radio

Aghjunghjite data-toggle="buttons"à una .btn-groupcasella di spunta chì cuntene o input di radio per attivà a basculazione in i so stili rispettivi.

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

I metudi

$().button('toggle')

Toggles push state. Dà u buttone l'apparenza chì hè stata attivata.

$().button('reset')

Resetta u statu di u buttone - scambia u testu à u testu originale. Stu metudu hè asincronu è torna prima chì u resetting hè veramente cumpletu.

$().button(string)

Scambià u testu à qualsiasi statu di testu definitu di dati.

<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

Plugin flessibile chì utilizza una manciata di classi per un cumpurtamentu faciule.

Esempiu

Cliccate i buttoni sottu per vede è ammuccià un altru elementu via cambiamenti di classi:

• .collapseoculta u cuntenutu
• .collapsinghè appiicata durante a transizione
• .collapse.inmostra u cuntenutu

Pudete aduprà un ligame cù l' hrefattributu, o un buttone cù l' data-targetattributu. In i dui casi, data-toggle="collapse"hè necessariu.

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

Esempiu di accordion

Estende u cumpurtamentu di colapsu predeterminatu per creà un accordione cù u cumpunente di u pannellu.

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

Hè ancu pussibule scambià .panel-bodys cù .list-groups.

Usu

U plugin di colapsu utilizeghja uni pochi di classi per trattà a carica pesante:

• .collapseoculta u cuntenutu
• .collapse.inmostra u cuntenutu
• .collapsinghè aghjuntu quandu a transizione principia, è eliminata quandu finisce

Queste classi ponu esse truvate in component-animations.less.

Via attributi di dati

Basta aghjunghje data-toggle="collapse"è a data-targetà l'elementu per assignà automaticamente u cuntrollu di un elementu colapsibile. L' data-targetattributu accetta un selettore CSS per applicà u colapsu. Assicuratevi di aghjunghje a classa collapseà l'elementu colapsable. Se vulete chì l'apertura predefinita, aghjunghje a classa supplementaria in.

Per aghjunghje una gestione di gruppu cum'è accordioni à un cuntrollu colapsibile, aghjunghje l'attributu di dati data-parent="#selector". Consultate a demo per vede questu in azione.

Via JavaScript

Abilita manualmente cù:

$('.collapse').collapse()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-parent="".

I metudi

.collapse(options)

Attiva u vostru cuntenutu cum'è un elementu colapsable. Accetta opzioni opzionali object.

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

.collapse('toggle')

Cambia un elementu pieghevule per esse mostratu o oculatu. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.collapseo hidden.bs.collapsesi faci).

.collapse('show')

Mostra un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente mostratu (vale à dì prima chì l' shown.bs.collapseavvenimentu si faci).

.collapse('hide')

Oculta un elementu colapsable. Ritorna à u chjamante prima chì l'elementu colapsibile hè statu veramente oculatu (vale à dì prima chì l' hidden.bs.collapseavvenimentu si faci).

Avvenimenti

A classa di colapsu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di colapsu.

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

Carousel carousel.js

Un cumpunente di presentazione per u ciclismu attraversu elementi, cum'è un carrusel. I carrusels nidificati ùn sò micca supportati.

Esempii

Previous Dopu

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

Didascalia opzionale

Aghjunghjite facilmente i sottotitoli à e vostre diapositive cù l' .carousel-captionelementu in ogni .item. Pone quasi ogni HTML opzionale in quì è serà automaticamente allinatu è furmatu.

Prima etichetta di slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

Seconda etichetta di slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Terza etichetta diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Dopu

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

Usu

Carruselli multipli

I carrusels necessitanu l'usu di un idcuntainer più esterno (u .carousel) per i cuntrolli di carrusel per funzionà bè. Quandu aghjunghje parechje carrusels, o cambiate un carrusel id, assicuratevi di aghjurnà i cuntrolli pertinenti.

Via attributi di dati

Aduprate l'attributi di dati per cuntrullà facilmente a pusizione di u carrusel. data-slideaccetta e parolle chjave prevo next, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-slide-toper passà un indice di diapositiva brutu à u carrusel data-slide-to="2", chì cambia a pusizione di diapositiva à un indice particulari chì principia cù 0.

L' data-ride="carousel"attributu hè utilizatu per marcà un carrusel cum'è animazione à partesi da a carica di a pagina. Ùn pò micca esse usatu in cumminazione cù l'inizializazione JavaScript esplicita (ridondante è innecessaria) di u stessu carrusel.

Via JavaScript

Chjamate carousel manualmente cù:

$('.carousel').carousel()

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-interval="".

I metudi

.carousel(options)

Inizializza u carrusel cù opzioni opzionali objectè principia à ciclu per l'articuli.

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

.carousel('cycle')

Cicli attraversu l'articuli di carrusel da manca à diritta.

.carousel('pause')

Impedisce à u carrusel di passà in bicicletta attraversu l'articuli.

.carousel(number)

Cicla u carrusel à un quadru particulari (basatu 0, simile à un array).

.carousel('prev')

Cicli à l'articulu precedente.

.carousel('next')

Cicli à u prossimu articulu.

Avvenimenti

A classa di carrusel di Bootstrap espone dui avvenimenti per attaccà à a funziunalità di carrusel.

I dui avvenimenti anu e seguenti proprietà supplementari:

• direction: A direzzione in quale u carrusel hè sliding (o "left"o "right").
• relatedTarget: L'elementu DOM chì hè sbulicatu in u locu cum'è l'elementu attivu.

Tutti l'avvenimenti di carrusel sò sparati à u carrusel stessu (vale à dì à u <div class="carousel">).

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

Affissu affix.js

Esempiu

L'affix plugin si attiva position: fixed;è si disattiva, emulendu l'effettu trovu cù position: sticky;. A subnavigazione à a diritta hè una demo live di u plugin affix.

Usu

Aduprate u plugin affissu via attributi di dati o manualmente cù u vostru propiu JavaScript. In e duie situazioni, duvete furnisce CSS per u posizionamentu è a larghezza di u vostru cuntenutu affissu.

Nota: Ùn aduprate micca u plugin affissu nantu à un elementu cuntenutu in un elementu relativamente posizionatu, cum'è una colonna tirata o spinta, per via di un bug di rendering Safari .

Posizionamentu via CSS

U plugin affissu cambia trà trè classi, ognuna chì rapprisenta un statu particulare: .affix, .affix-top, è .affix-bottom. Avete da furnisce i stili, cù l'eccezzioni di position: fixed;on .affix, per queste classi voi stessu (indipendente di stu plugin) per trattà e pusizioni attuali.

Eccu cumu funziona u plugin affix:

1. Per principià, u plugin aghjusta .affix-topper indicà chì l'elementu hè in a so pusizioni più altu. À questu puntu ùn hè micca necessariu posizionamentu CSS.
2. Scrolling oltre l'elementu chì vulete appiccicà duverebbe attivà l'affissione attuale. Questu hè induve .affixrimpiazza .affix-topè stabilisce position: fixed;(furnitu da u CSS di Bootstrap).
3. Se un offset di fondu hè definitu, u scrolling passatu deve rimpiazzà .affixcù .affix-bottom. Siccomu l'offsets sò opzionali, l'impostazione di unu richiede di stabilisce u CSS appropritatu. In questu casu, aghjunghje position: absolute;quandu hè necessariu. U plugin usa l'attributu di dati o l'opzione JavaScript per determinà induve situà l'elementu da quì.

Segui i passi sopra per stabilisce u vostru CSS per una di l'opzioni d'utilizazione sottu.

Via attributi di dati

Per aghjunghje facilmente u cumpurtamentu affissu à qualsiasi elementu, aghjunghje solu data-spy="affix"à l'elementu chì vulete spià. Aduprate l'offsets per definisce quandu si cambia u pinning di un elementu.

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

Via JavaScript

Chjamate u plugin affissu via JavaScript:

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-offset-top="200".

I metudi

.affix(options)

Attiva u vostru cuntenutu cum'è cuntenutu affissu. Accetta opzioni opzionali object.

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

.affix('checkPosition')

Recalculate u statu di l'affissu basatu annantu à e dimensioni, a pusizione è a pusizione di scorrimentu di l'elementi pertinenti. I classi .affix, .affix-top, è .affix-bottomsò aghjuntu o sguassati da u cuntenutu affissu secondu u novu statu. Stu metudu deve esse chjamatu ogni volta chì e dimensioni di u cuntenutu affissu o l'elementu di destinazione sò cambiati, per assicurà a pusizione curretta di u cuntenutu affissu.

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

Avvenimenti

U plugin di l'affissu di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità di l'affissu.