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

Utilizà u JavaScript compilatu

Tramindui bootstrap.jsè bootstrap.min.jscuntenenu tutti i plugins in un unicu schedariu. Includite solu unu.

Dipendenze di plugin

Certi plugins è cumpunenti CSS dipendenu da altri plugins. Se include plugins individualmente, assicuratevi di verificà queste dipendenze in i documenti. Innota ancu chì tutti i plugins dependenu di jQuery (questu significa chì jQuery deve esse inclusu prima di i schedarii di plugin). Cunsultate u nostrubower.json per vede quali versioni di jQuery sò supportati.

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

Solu un plugin per elementu via attributi di dati

Ùn aduprate micca attributi di dati da parechji plugins nantu à u stessu elementu. Per esempiu, un buttone ùn pò micca avè un tooltip è cambia una modale. Per fà questu, utilizate un elementu di imballaggio.

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

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

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.

Biblioteche di terzu partitu

Bootstrap ùn sustene micca ufficialmente biblioteche JavaScript di terze parti cum'è Prototype o jQuery UI. Malgradu .noConflictl'avvenimenti cù spazii di nome, pò esse prublemi di cumpatibilità chì avete bisognu di riparà nantu à u vostru propiu.

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.

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

Diversi modali aperti ùn sò micca supportati

Assicuratevi di ùn apre micca un modale mentre un altru hè sempre visibile. A mostra di più di una modale à u tempu richiede un codice persunalizatu.

Posizionamentu di marcatura modale

Pruvate sempre di mette u codice HTML di un modale in una pusizione di primu livellu in u vostru documentu per evità altri cumpunenti chì affettanu l'apparenza è / o funziunalità di u modale.

Avvertenze di u dispositivu mobile

Ci sò alcune avvertenze riguardanti l'usu di modali nantu à i dispositi mobili. Vede i nostri documenti di supportu di navigatore per i dettagli.

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>

Fate i modali accessibili

Assicuratevi di aghjunghje role="dialog"è aria-labelledby="...", in riferimentu à u titulu modale, à .modal, è role="document"à u .modal-dialogstessu.

Inoltre, pudete dà una descrizzione di u vostru dialogu modale cù aria-describedbyl' activazione .modal.

Incrustà i video di YouTube

L'incrustazione di i video di YouTube in modali richiede JavaScript addiziale micca in Bootstrap per fermà automaticamente a riproduzione è più. Vede stu utile Stack Overflow post per più infurmazione.

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

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

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

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 un modale, basta nidificate .rows in u sistema di .modal-bodygriglia normale è dopu aduprà 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 -->

Avete una mansa di buttone chì tutti attivanu u listessu modale, solu cù un cuntenutu ligeramente sfarente? Aduprate event.relatedTargetè 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,

... più buttoni ...
<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="".

Nome tipu predeterminatu descrizzione
sfondate boolean o a stringa'static' veru Include un elementu di fondu modale. In alternativa, specificate staticper un sfondate chì ùn chjude micca u modale nantu à cliccà.
tastiera booleanu veru Chiude u modale quandu si preme a chjave di escape
mostra booleanu veru Mostra u modale quandu inizializatu.
luntani caminu falsu

Questa opzione hè obsoleta da v3.3.0 è hè stata sguassata in v4. Hè ricumandemu invece d'utilizà un mudellu di clientela o un framework di ubligatoriu di dati, o chjamà jQuery.load sè stessu.

Se un URL remoto hè furnitu, u cuntenutu serà caricatu una volta via u loadmetudu di jQuery è injected in u .modal-contentdiv. Sè vo aduprate a data-api, pudete alternativamente aduprà l' hrefattributu per specificà a fonte remota. Un esempiu di questu hè mostratu quì sottu:

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

I metudi

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

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

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

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

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

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

Tipu d'avvenimentu Descrizzione
mostra.bs.modale Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu. Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a relatedTargetpruprietà di l'avvenimentu.
mostratu.bs.modale Questu avvenimentu hè sparatu quandu u modale hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a relatedTargetpruprietà di l'avvenimentu.
nascondere.bs.modale Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu di istanza hè statu chjamatu.
hidden.bs.modal Questu avvenimentu hè sparatu quandu u modale hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
caricatu.bs.modale Questu avvenimentu hè sparatu quandu u modale hà caricatu u cuntenutu utilizendu l' remoteopzione.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

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

Dentru un navbar

Dentru pilules

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 a tendina 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()

data-toggle="dropdown"sempre necessariu

Indipendentemente da se chjamate u vostru dropdown via JavaScript o invece utilizate l'api di dati, data-toggle="dropdown"hè sempre necessariu esse presente nantu à l'elementu di attivazione di u dropdown.

Nimu

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

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.

Tipu d'avvenimentu Descrizzione
mostra.bs.dropdown Questu avvenimentu spara immediatamente quandu u metudu di l'istanza di mostra hè chjamatu.
mostratu.bs.dropdown Questu avvenimentu hè sparatu quandu u dropdown hè statu resu visibile à l'utilizatore (aspittà per e transizioni CSS, per compie).
hide.bs.dropdown Questu avvenimentu hè sparatu immediatamente quandu u metudu di istanza di nasconde hè statu chjamatu.
hidden.bs.dropdown Questu avvenimentu hè sparatu quandu u dropdown hà finitu di esse oculatu da l'utilizatore (aspittarà a transizione CSS, per compie).
$('#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.

@grassu

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prima ch'elli venduti qui. Tumblr diritti di bicicletta da a fattoria à a tavola qualunque. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 lupu luna irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui probabilmente ùn avete micca intesu parlà di elli è cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuatu accusamus, credi ironia biodiesel keffiyeh artighjanu ullamco consequat.

@mdo

Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork barba. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camion di cibo tatuatu di maglione cosby, vinile quis non freegan di mcsweeney. Lo-fi wes anderson +1 sartoriale. Carles non esercitazione estetica quis gentrify. Brooklyn adipisicing birra artigianale vice keytar desertu.

unu

Occaecat commodo aliqua delectus. Fap birra artigianale deserunt skateboard ea. Lomo diritti di bicicletta adipisicing banh mi, velit ea sunt next level locavore mono-origine caffè in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS hè adipisicing. Cunsectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

due

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironia, thundercats chì probabilmente ùn avete micca intesu parlà di elli consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan birra artigianale seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Usu

Richiede Bootstrap nav

Scrollspy attualmente richiede l'usu di un cumpunente di navigazione Bootstrap per mette in risaltu currettamente i ligami attivi.

Obiettivi di ID risolvibili necessarii

I ligami di Navbar anu da avè target id risolvibili. Per esempiu, un <a href="#home">home</a>deve currisponde à qualcosa in u DOM cum'è <div id="home"></div>.

Elementi non :visibletarget ignorati

L'elementi di destinazione chì ùn sò micca :visiblesecondu jQuery seranu ignorati è i so elementi di navigazione currispondenti ùn saranu mai evidenziati.

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

Nome tipu predeterminatu descrizzione
offset numeru 10 Pixel per compensà da a cima quandu calcula a pusizione di scroll.

Avvenimenti

Tipu d'avvenimentu Descrizzione
attivate.bs.scrollspy Questu avvenimentu spara ogni volta chì un novu articulu hè attivatu da u scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabulazioni alternabili tab.js

Esempi 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. Tabulazioni nidificate ùn sò micca supportate.

Denim crudo chì probabilmente ùn avete micca intesu parlà di elli jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Estende a navigazione tabulata

Stu plugin estende u cumpunente di navigazione tabulata per aghjunghje zoni tabulabili.

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.

Tipu d'avvenimentu Descrizzione
mostra.bs.tab Questu avvenimentu spara nantu à a tabulazione, ma prima chì a nova tabulazione hè stata mostrata. Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
mostratu.bs.tab Questu avvenimentu spara nantu à a tabulazione mostra dopu chì una tabulazione hè stata mostrata. Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
nascondere.bs.tab Questu avvenimentu spara quandu una nova tabulazione deve esse mostrata (è cusì a tabulazione attiva precedente deve esse oculata). Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva attuale è a nova tabulazione attiva prestu, rispettivamente.
hidden.bs.tab Questu avvenimentu spara dopu chì una nova tabulazione hè mostrata (è cusì a tabulazione attiva precedente hè oculata). Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva precedente è a nova tabulazione attiva, rispettivamente.
$('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:

Pantaloni stretti u prossimu livellu keffiyeh chì probabilmente ùn avete micca intesu parlà di elli. Photo Booth barba raw denim letterpress vegan messenger bag stumptown. Seitan da fattoria à a tavola, i vestiti americani di quinoa sustenibile fixie di mcsweeney 8-bit anu un chambray di vinile Terry Richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artighjanu veramente ironicu qualunque keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origine unica virali.

Tooltip staticu

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

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>

Opt-in funziunalità

Per ragioni di rendiment, Tooltip è Popover data-apis sò opt-in, vale à dì chì duvete inizializà da voi stessu .

Una manera di inizializà tutti i tooltips in una pagina seria di selezziunate per u so data-toggleattributu:

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

Ligami multi-linea

Calchì volta vulete aghjunghje un tooltip à un hyperlink chì avvolge parechje linee. U cumpurtamentu predeterminatu di u plugin tooltip hè di centru in horizontale è verticalmente. Aghjunghjite white-space: nowrap;à i vostri ancore per evitari questu.

Tooltips in i gruppi di buttone, i gruppi di input, è e tavule necessitanu un paràmetru speciale

Quandu aduprate tooltips nantu à elementi in un .btn-groupo un .input-group, o nantu à elementi ligati à a tavula ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), duverete specificà l'opzione container: 'body'(documentata quì sottu) per evità effetti secundari indesiderati (cum'è l'elementu chì cresce più largu è/). o perdendu i so anguli arrotondati quandu u tooltip hè attivatu).

Ùn pruvate micca di vede tooltips nantu à elementi nascosti

Invucà $(...).tooltip('show')quandu l'elementu di destinazione hè display: none;pruvucarà u tooltip per esse posizionatu incorrectamente.

Tooltips accessibili per l'utilizatori di u teclatu è di a tecnulugia di assistenza

Per l'utilizatori chì naviganu cù un teclatu, è in particulare l'utilizatori di tecnulugii d'assistenza, duvete solu aghjunghje tooltips à elementi focalizabili di u teclatu cum'è ligami, cuntrolli di forma, o qualsiasi elementu arbitrariu cù un tabindex="0"attributu.

Tooltips nantu à elementi disattivati ​​necessitanu elementi wrapper

Per aghjunghje un tooltip à un disabledo un .disabledelementu, mette l'elementu in a <div>è applicà u tooltip à questu <div>invece.

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

Nome Tipu Default Descrizzione
animazione booleanu veru Applica una transizione di dissolvenza CSS à u tooltip
cuntainer stringa | falsu falsu

Appendi u tooltip à un elementu specificu. Esempiu container: 'body':. Questa opzione hè particularmente utile in quantu vi permette di pusà u tooltip in u flussu di u documentu vicinu à l'elementu di attivazione - chì impedisce chì u tooltip flote luntanu da l'elementu di attivazione durante un ridimensionamentu di a finestra.

ritardu numeru | ughjettu 0

Ritarda di mostra è nasconde u tooltip (ms) - ùn hè micca applicatu à u tipu di trigger manuale

Se un numeru hè furnitu, u ritardu hè appiicatu à tramindui nascondere / mostra

A struttura di l'ughjettu hè:delay: { "show": 500, "hide": 100 }

html booleanu falsu Inserite HTML in u tooltip. Se falsu, u textmetudu di jQuery serà utilizatu per inserisce u cuntenutu in u DOM. Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS.
piazzamentu stringa | funzione 'top'

Cumu pusà u tooltip - cima | fondu | manca | drittu | autumàticu.
Quandu "auto" hè specificatu, riorienterà dinamicamente u tooltip. Per esempiu, se u piazzamentu hè "auto left", u tooltip mostrarà à a manca quandu hè pussibule, altrimenti si mostrarà ghjustu.

Quandu una funzione hè aduprata per determinà u piazzamentu, hè chjamatu cù u nodu DOM di tooltip cum'è u so primu argumentu è l'elementu triggering DOM node cum'è u so secondu. U thiscuntestu hè stabilitu à l'istanza tooltip.

selettore stringa falsu Se un selettore hè furnitu, l'uggetti tooltip seranu delegati à i miri specificati. In pratica, questu hè utilizatu per attivà u cuntenutu HTML dinamicu per avè l'aghjuntu di tooltips. Vede questu è un esempiu informativu .
mudellu stringa '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML di basa à aduprà quandu crea u tooltip.

U tooltip titlesarà injectatu in u .tooltip-inner.

.tooltip-arrowdiventerà a freccia di u tooltip.

L'elementu wrapper più esterno deve avè a .tooltipclassa.

titulu stringa | funzione ''

Valore di u titulu predeterminatu se titlel'attributu ùn hè micca presente.

Se una funzione hè datu, serà chjamata cù u so thisriferimentu stabilitu à l'elementu chì u tooltip hè attaccatu.

trigger stringa "focus" Cumu hè attivatu u tooltip - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu. manualùn pò esse cumminatu cù qualsiasi altru trigger.
vetru stringa | ughjettu | funzione { selector: 'corpu', padding: 0}

Mantene u tooltip in i limiti di questu elementu. Esempiu: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Se una funzione hè datu, hè chjamata cù l'elementu triggering DOM node cum'è u so solu argumentu. U thiscuntestu hè stabilitu à l'istanza tooltip.

Attributi di dati per tooltips individuali

L'opzioni per i tooltips individuali ponu esse specificati in alternativa attraversu l'usu di l'attributi di dati, cum'è spiegatu sopra.

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

Tipu d'avvenimentu Descrizzione
mostra.bs.tooltip Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
mostratu.bs.tooltip Questu avvenimentu hè sparatu quandu u tooltip hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
nascondere.bs.tooltip Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu di istanza hè statu chjamatu.
hidden.bs.tooltip Questu avvenimentu hè sparatu quandu u tooltip hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
inseritu.bs.tooltip Questu avvenimentu hè sparatu dopu l' show.bs.tooltipavvenimentu quandu u mudellu di tooltip hè statu aghjuntu à u DOM.
$('#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.

Dipendenza di plugin

Popovers necessitanu u plugin tooltip per esse inclusu in a vostra versione di Bootstrap.

Opt-in funziunalità

Per ragioni di rendiment, Tooltip è Popover data-apis sò opt-in, vale à dì chì duvete inizializà da voi stessu .

Una manera di inizializà tutti i popovers in una pagina seria di selezziunà per u so data-toggleattributu:

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

Popovers in gruppi di buttone, gruppi di input, è tavule necessitanu un paràmetru speciale

Quandu aduprate popovers nantu à elementi in un .btn-groupo un .input-group, o nantu à elementi ligati à a tavola ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), duverete specificà l'opzione container: 'body'(documentata quì sottu) per evità effetti secundari indesiderati (cum'è l'elementu chì cresce più largu è/). o perdendu i so angoli arrotondati quandu u popover hè attivatu).

Ùn pruvate micca di vede popovers nantu à elementi nascosti

Invucà $(...).popover('show')quandu l'elementu di destinazione hè display: none;pruvucarà u popover per esse posizionatu incorrectamente.

Popovers nantu à elementi disabilitati necessitanu elementi wrapper

Per aghjunghje un popover à a disabledo .disabledl'elementu, mette l'elementu in a <div>è applicà u popover à quellu <div>invece.

Ligami multi-linea

A volte vulete aghjunghje un popover à un hyperlink chì avvolge parechje linee. U cumpurtamentu predeterminatu di u plugin popover hè di centru in horizontale è verticalmente. Aghjunghjite white-space: nowrap;à i vostri ancore per evitari questu.

Esempii

Popover staticu

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

Top popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ghjustu

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover fondu

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover hà lasciatu

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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.

Marcatura specifica necessaria per dismiss-on-next-click

Per un cumpurtamentu propiu cross-browser è cross-platform, duvete aduprà l' <a>etichetta, micca l' <button>etichetta, è ancu deve include l' attributi role="button"è .tabindex

<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

Attivate 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="".

Nome Tipu Default Descrizzione
animazione booleanu veru Applica una transizione di fade CSS à u popover
cuntainer stringa | falsu falsu

Appendi u popover à un elementu specificu. Esempiu container: 'body':. Questa opzione hè particularmente utile perchè permette di pusà u popover in u flussu di u documentu vicinu à l'elementu di attivazione - chì impedisce chì u popover si alluntanassi da l'elementu di attivazione durante un ridimensionamentu di a finestra.

cuntenutu stringa | funzione ''

Valore di cuntenutu predeterminatu se data-contentl'attributu ùn hè micca presente.

Se una funzione hè datu, serà chjamata cù u so thisriferimentu stabilitu à l'elementu chì u popover hè attaccatu.

ritardu numeru | ughjettu 0

Ritarda di mostra è nasconde u popover (ms) - ùn hè micca applicatu à u tipu di trigger manuale

Se un numeru hè furnitu, u ritardu hè appiicatu à tramindui nascondere / mostra

A struttura di l'ughjettu hè:delay: { "show": 500, "hide": 100 }

html booleanu falsu Inserite HTML in u popover. Se falsu, u textmetudu di jQuery serà utilizatu per inserisce u cuntenutu in u DOM. Aduprate u testu s'è vo site preoccupatu per l'attacchi XSS.
piazzamentu stringa | funzione 'diritta'

How to position the popover - top | fondu | manca | drittu | autumàticu.
Quandu "auto" hè specificatu, reorienterà dinamicamente u popover. Per esempiu, se u piazzamentu hè "auto left", u popover mostrarà à a manca quandu hè pussibule, altrimenti si mostrarà ghjustu.

Quandu una funzione hè aduprata per determinà a piazza, hè chjamata cù u popover DOM node cum'è u so primu argumentu è l'elementu triggering DOM node cum'è u so secondu. U thiscuntestu hè stabilitu à l'istanza popover.

selettore stringa falsu Se un selettore hè furnitu, l'uggetti popover seranu delegati à i miri specificati. In pratica, questu hè utilizatu per attivà u cuntenutu HTML dinamicu per avè popovers aghjuntu. Vede questu è un esempiu informativu .
mudellu stringa '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML per aduprà quandu crea u popover.

U popover titleserà injectatu in u .popover-title.

U popover contentserà injectatu in u .popover-content.

.arrowdiventerà a freccia di u popover.

L'elementu wrapper più esterno deve avè a .popoverclassa.

titulu stringa | funzione ''

Valore di u titulu predeterminatu se titlel'attributu ùn hè micca presente.

Se una funzione hè datu, serà chjamata cù u so thisriferimentu stabilitu à l'elementu chì u popover hè attaccatu.

trigger stringa 'cliccate' Cume popover hè attivatu - cliccate | sopra | focus | manuale. Pudete passà parechje triggers; separali cù un spaziu. manualùn pò esse cumminatu cù qualsiasi altru trigger.
vetru stringa | ughjettu | funzione { selector: 'corpu', padding: 0}

Mantene u popover in i limiti di questu elementu. Esempiu: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Se una funzione hè datu, hè chjamata cù l'elementu triggering DOM node cum'è u so solu argumentu. U thiscuntestu hè stabilitu à l'istanza popover.

Attributi di dati per popovers individuali

L'opzioni per popovers individuali ponu esse specificati in alternativa per l'usu di l'attributi di dati, cum'è spiegatu sopra.

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 chì l' hidden.bs.popoveravvenimentu 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

Tipu d'avvenimentu Descrizzione
mostra.bs.popover Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
mostratu.bs.popover Questu avvenimentu hè sparatu quandu u popover hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
nascondere.bs.popover Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu di istanza hè statu chjamatu.
hidden.bs.popover Questu avvenimentu hè sparatu quandu u popover hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
inseritu.bs.popover Questu avvenimentu hè sparatu dopu l' show.bs.popoveravvenimentu quandu u mudellu popover hè statu aghjuntu à u DOM.
$('#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. Chjudendu 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'eventi 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 i classi .fadeè .insò 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.

Tipu d'avvenimentu Descrizzione
close.bs.alert Questu avvenimentu spara immediatamente quandu u closemetudu di istanza hè chjamatu.
chjusu.bs.alert Questu avvenimentu hè sparatu quandu l'alerta hè stata chjusa (aspetterà chì e transizioni CSS finiscinu).
$('#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.

Compatibilità cross-browser

Firefox persiste i stati di cuntrollu di forma (disabilità è verificazione) à traversu i carichi di pagina . Una soluzione per questu hè di utilizà autocomplete="off". Vede u bug Mozilla #654072 .

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.

Aduprate u statu chì ti piace!

Per questa manifestazione, usemu data-loading-textè $().button('loading'), ma questu ùn hè micca l'unicu statu chì pudete aduprà. Vede più nantu à questu quì sottu in a $().button(string)documentazione .

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

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

Toggle unicu

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

Pre-toggled buttoni bisognu .activeèaria-pressed="true"

Per i buttoni pre-toggled, duvete aghjunghje a .activeclassa è l' aria-pressed="true"attributu à u buttonstessu.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  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.

Opzioni preselettu bisognu.active

Per l'opzioni preselezionate, duvete aghjunghje a .activeclassa à l'input di labelvoi stessu.

Statu verificatu visuale aghjurnatu solu nantu à cliccà

Se u statu verificatu di un buttone di checkbox hè aghjurnatu senza sparà un clickavvenimentu nantu à u buttone (per esempiu, via <input type="reset">o per stabilisce a checkedpruprietà di l'input), avete bisognu di cambià a .activeclassa nantu à l'input di labelsè stessu.

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

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" autocomplete="off">
  ...
</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.

Dipendenza di plugin

Collapse richiede chì u plugin di transizioni sia inclusu in a vostra versione di Bootstrap.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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.

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 lupu luna tempor, sunt aliqua mette un uccello nantu à u calamaru caffè uni origine 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 probabilmente ùn avete micca intesu parlà di elli accusamus labore sustainable VHS.
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 lupu luna tempor, sunt aliqua mette un uccello nantu à u calamaru caffè uni origine 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 probabilmente ùn avete micca intesu parlà di elli accusamus labore sustainable VHS.
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 lupu luna tempor, sunt aliqua mette un uccello nantu à u calamaru caffè uni origine 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 probabilmente ùn avete micca intesu parlà di elli accusamus labore sustainable VHS.
<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.

  • Bootply
  • One itmus ac facilin
  • Second eros

Fate accessibile i cuntrolli di espansione / colapsamentu

Assicuratevi di aghjunghje aria-expandedà l'elementu di cuntrollu. Questu attributu definisce esplicitamente u statu attuale di l'elementu colapsibile à i lettori di schermu è tecnulugia d'assistenza simili. Se l'elementu colapsibile hè chjusu per automaticamente, deve avè un valore di aria-expanded="false". Se avete stabilitu l'elementu colapsibile per esse apertu per automaticamente usendu a inclassa, setaria-expanded="true" nantu à u cuntrollu invece. U plugin cambia automaticamente stu attributu basatu annantu à se l'elementu colapsibile hè statu apertu o chjusu.

Inoltre, se u vostru elementu di cuntrollu hè destinatu à un unicu elementu colapsibile - vale à dì l' data-targetattributu punta à un idselettore - pudete aghjunghje un aria-controlsattributu supplementu à l'elementu di cuntrollu, chì cuntene l' idelementu colapsable. I lettori di schermu muderni è tecnulugii d'assistenza simili facenu usu di questu attributu per furnisce l'utilizatori cù accurtatoghji supplementari per navigà direttamente à l'elementu colapsibile stessu.

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

Nome tipu predeterminatu descrizzione
parenti selettore falsu Se un selettore hè furnitu, allora tutti l'elementi pieghevoli sottu à u parent specificatu seranu chjusi quandu questu articulu pieghevule hè mostratu. (simile à u cumpurtamentu tradiziunale di accordion - questu dipende da a panelclasse)
toggle booleanu veru Commuta l'elementu colapsibile nantu à l'invucazione

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.

Tipu d'avvenimentu Descrizzione
mostra.bs.collapse Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
mostratu.bs.collapse Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
nascondere.bs.collapse Stu avvenimentu hè sparatu immediatamente quandu u hidemetudu hè statu chjamatu.
hidden.bs.collapse Questu avvenimentu hè sparatu quandu un elementu di colapsu hè statu oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
$('#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.

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

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

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

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

Nome tipu predeterminatu descrizzione
intervallu numeru 5000 A quantità di tempu per ritardà trà u ciclu automaticamente un articulu. S'ellu hè falsu, u carrusel ùn serà micca automaticamente ciclu.
pausa stringa | nulla "passa" Se impostate à "hover", mette in pausa u ciclu di u carrusel mouseenterè ripiglià u ciculu di u carrusel mouseleave. Se hè impostatu à null, u passaghju sopra u carrusel ùn mette micca in pausa.
avvolgi booleanu veru Sia chì u carrusel duveria ciclu in modu continuu o avè tappe duru.
tastiera booleanu veru Se u carrusel deve reagisce à l'avvenimenti di u teclatu.

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

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

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

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

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

Cicli à l'articulu precedente.

Cicli à u prossimu articulu.

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

Tipu d'avvenimentu Descrizzione
slide.bs.carousel Questu avvenimentu spara immediatamente quandu u slidemetudu di istanza hè invucatu.
slid.bs.carousel Questu avvenimentu hè sparatu quandu u carrusel hà finitu a so transizione di slide.
$('#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à .affix.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".

Nome tipu predeterminatu descrizzione
offset numeru | funzione | ughjettu 10 Pixel per compensà da u screnu quandu calcula a pusizione di scroll. Se un unicu numeru hè furnitu, l'offset serà appiicatu in direzzione in cima è in fondu. Per furnisce un offset unicu, in fondu è in cima solu furnisce un oggettu offset: { top: 10 }o offset: { top: 10, bottom: 5 }. Aduprate una funzione quandu avete bisognu di calculà dinamicamente un offset.
mira selettore | nodu | Elementu jQuery l' windowughjettu Specifica l'elementu di destinazione di l'affissu.

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.

Tipu d'avvenimentu Descrizzione
affissu.bs.affissu Questu avvenimentu spara immediatamente prima chì l'elementu hè statu affissu.
affissu.bs.affissu Questu avvenimentu hè sparatu dopu chì l'elementu hè statu affissu.
affix-top.bs.affix Questu avvenimentu spara immediatamente prima chì l'elementu hè statu appiccicatu in cima.
affissed-top.bs.affix Questu avvenimentu hè sparatu dopu chì l'elementu hè statu appiccicatu in cima.
affix-bottom.bs.affix Questu avvenimentu spara immediatamente prima chì l'elementu hè statu appiccicatu in fondu.
affissed-bottom.bs.affix Questu avvenimentu hè sparatu dopu chì l'elementu hè statu appiccicatu in fondu.