Panoramica

Individuale o compilato

I plugin possono essere inclusi singolarmente (usando i singoli *.jsfile di Bootstrap) o tutti in una volta (usando bootstrap.jso minimizzato bootstrap.min.js).

Utilizzando il JavaScript compilato

Entrambi bootstrap.jse bootstrap.min.jscontengono tutti i plugin in un unico file. Includi solo uno.

Dipendenze dei plugin

Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi i plug-in singolarmente, assicurati di controllare queste dipendenze nei documenti. Nota inoltre che tutti i plugin dipendono da jQuery (questo significa che jQuery deve essere incluso prima dei file del plugin). Consulta il nostrobower.json per vedere quali versioni di jQuery sono supportate.

Attributi dei dati

Puoi utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API di markup senza scrivere una singola riga di JavaScript. Questa è l'API di prima classe di Bootstrap e dovrebbe essere la tua prima considerazione quando usi un plugin.

Detto questo, in alcune situazioni potrebbe essere desiderabile disattivare questa funzionalità. Pertanto, offriamo anche la possibilità di disabilitare l'API dell'attributo dei dati svincolando tutti gli eventi sul documento con spazio dei nomi con data-api. Questo assomiglia a questo:

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

In alternativa, per indirizzare un plug-in specifico, includi semplicemente il nome del plug-in come spazio dei nomi insieme allo spazio dei nomi data-api in questo modo:

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

Un solo plugin per elemento tramite attributi di dati

Non utilizzare gli attributi dei dati di più plug-in sullo stesso elemento. Ad esempio, un pulsante non può avere sia una descrizione comando che alternare una modale. A tal fine, utilizzare un elemento di avvolgimento.

API programmatica

Riteniamo inoltre che dovresti essere in grado di utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API JavaScript. Tutte le API pubbliche sono metodi singoli, concatenabili e restituiscono la raccolta su cui si è agito.

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

Tutti i metodi dovrebbero accettare un oggetto opzioni opzionale, una stringa che ha come target un metodo particolare o niente (che avvia un plug-in con un comportamento predefinito):

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

Ogni plugin espone anche il suo costruttore grezzo su una Constructorproprietà: $.fn.popover.Constructor. Se desideri ottenere una particolare istanza di plugin, recuperala direttamente da un elemento: $('[rel="popover"]').data('popover').

Impostazioni predefinite

È possibile modificare le impostazioni predefinite per un plug-in modificando l' Constructor.DEFAULTSoggetto del plug-in:

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

Nessun conflitto

A volte è necessario utilizzare i plug-in Bootstrap con altri framework dell'interfaccia utente. In queste circostanze, possono verificarsi occasionalmente collisioni nello spazio dei nomi. Se ciò accade, puoi richiamare .noConflictil plugin di cui desideri ripristinare il valore.

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

Eventi

Bootstrap fornisce eventi personalizzati per le azioni uniche della maggior parte dei plugin. Generalmente, questi si presentano in una forma di participio passato e infinito, in cui l'infinito (es. show) viene attivato all'inizio di un evento e la sua forma participio passato (es. shown) viene attivata al completamento di un'azione.

A partire dalla 3.0.0, tutti gli eventi Bootstrap hanno uno spazio dei nomi.

Tutti gli eventi infiniti forniscono preventDefaultfunzionalità. Ciò fornisce la possibilità di interrompere l'esecuzione di un'azione prima che inizi.

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

Numeri di versione

È possibile accedere alla versione di ciascuno dei plugin jQuery di Bootstrap tramite la VERSIONproprietà del costruttore del plugin. Ad esempio, per il plug-in del suggerimento:

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

Nessun fallback speciale quando JavaScript è disabilitato

I plugin di Bootstrap non ricadono in modo particolarmente elegante quando JavaScript è disabilitato. Se ti interessa l'esperienza dell'utente in questo caso, usa <noscript>per spiegare la situazione (e come riattivare JavaScript) ai tuoi utenti e/o aggiungi i tuoi fallback personalizzati.

Librerie di terze parti

Bootstrap non supporta ufficialmente librerie JavaScript di terze parti come Prototype o jQuery UI. Nonostante .noConflictgli eventi con spazio dei nomi, potrebbero esserci problemi di compatibilità che è necessario risolvere da soli.

Transizioni transition.js

A proposito di transizioni

Per semplici effetti di transizione, includi transition.jsuna volta insieme agli altri file JS. Se stai usando compiled (o minimizzato) bootstrap.js, non è necessario includerlo: è già lì.

Cosa c'è dentro

Transition.js è un supporto di base per transitionEndgli eventi, nonché un emulatore di transizione CSS. Viene utilizzato dagli altri plugin per verificare il supporto della transizione CSS e per rilevare le transizioni sospese.

Disabilitare le transizioni

Le transizioni possono essere disabilitate globalmente utilizzando il seguente frammento di codice JavaScript, che deve essere caricato dopo transition.js(o bootstrap.jso bootstrap.min.js, a seconda dei casi):

$.support.transition = false

Modali modal.js

I modali sono prompt di dialogo semplificati, ma flessibili, con la funzionalità minima richiesta e impostazioni predefinite intelligenti.

Più modalità aperte non supportate

Assicurati di non aprire un modale mentre un altro è ancora visibile. La visualizzazione di più di un modale alla volta richiede un codice personalizzato.

Posizionamento del markup modale

Cerca sempre di posizionare il codice HTML di una modale in una posizione di primo livello nel documento per evitare che altri componenti influiscano sull'aspetto e/o sulla funzionalità della modale.

Avvertenze sui dispositivi mobili

Ci sono alcuni avvertimenti sull'utilizzo delle modalità modali sui dispositivi mobili. Consulta i nostri documenti di supporto del browser per i dettagli.

A causa del modo in cui HTML5 definisce la sua semantica, l' autofocusattributo HTML non ha effetto nelle modali Bootstrap. Per ottenere lo stesso effetto, usa del JavaScript personalizzato:

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

Esempi

Esempio statico

Un rendering modale con intestazione, corpo e serie di azioni nel piè di pagina.

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

Dimostrazione dal vivo

Attiva o disattiva una modale tramite JavaScript facendo clic sul pulsante in basso. Scorrerà verso il basso e svanirà dalla parte superiore della 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>

Rendi accessibili le modali

Assicurati di aggiungere role="dialog"e aria-labelledby="...", facendo riferimento al titolo modale, a .modale role="document"allo .modal-dialogstesso.

Inoltre, puoi fornire una descrizione della tua finestra di dialogo modale con aria-describedbysu .modal.

Incorporamento di video di YouTube

L'incorporamento di video di YouTube in modalità modali richiede JavaScript aggiuntivo non in Bootstrap per interrompere automaticamente la riproduzione e altro ancora. Per ulteriori informazioni, vedere questo utile post sull'overflow dello stack .

Dimensioni opzionali

I modali hanno due dimensioni opzionali, disponibili tramite classi di modifica da posizionare su un file .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>

Rimuovi l'animazione

Per i modali che appaiono semplicemente invece di essere visualizzati in dissolvenza, rimuovi la .fadeclasse dal markup modale.

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

Utilizzo del sistema a griglia

Per sfruttare il sistema di griglia Bootstrap all'interno di un modale, basta annidare .rows all'interno di .modal-bodye quindi utilizzare le normali classi del sistema di griglia.

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

Hai un sacco di pulsanti che attivano tutti la stessa modale, solo con contenuti leggermente diversi? Usa event.relatedTargete attributi HTMLdata-* (possibilmente tramite jQuery ) per variare il contenuto del modale a seconda del pulsante su cui è stato fatto clic. Vedere i documenti Modal Events per i dettagli su relatedTarget,

...altri pulsanti...
<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)
})

Utilizzo

Il plug-in modale attiva o disattiva i tuoi contenuti nascosti su richiesta, tramite attributi di dati o JavaScript. Aggiunge anche .modal-openal <body>comportamento di scorrimento predefinito per sovrascrivere e genera un'area .modal-backdropdi clic per eliminare i modali mostrati quando si fa clic al di fuori del modale.

Tramite attributi di dati

Attiva un modale senza scrivere JavaScript. Impostato data-toggle="modal"su un elemento del controller, come un pulsante, insieme a data-target="#foo"o href="#foo"per scegliere come target una modale specifica da attivare.

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

Tramite JavaScript

Chiama un modale con id myModalcon una singola riga di JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-backdrop="".

Nome genere predefinito descrizione
sfondo booleano o la stringa'static' VERO Include un elemento di sfondo modale. In alternativa, specificare staticuno sfondo che non chiude il modale al clic.
tastiera del computer booleano VERO Chiude il modale quando viene premuto il tasto Esc
mostrare booleano VERO Mostra il modale quando inizializzato.
a distanza sentiero falso

Questa opzione è deprecata dalla v3.3.0 ed è stata rimossa nella v4. Ti consigliamo invece di utilizzare modelli lato client o un framework di associazione dati o di chiamare tu stesso jQuery.load .

Se viene fornito un URL remoto, il contenuto verrà caricato una volta tramite il metodo di jQuery loade iniettato nel .modal-contentdiv. Se stai usando data-api, puoi in alternativa usare l' hrefattributo per specificare l'origine remota. Un esempio di questo è mostrato di seguito:

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

Metodi

Attiva il tuo contenuto come modale. Accetta opzioni opzionali object.

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

Alterna manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.modalo hidden.bs.modal).

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

Apre manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente mostrato (cioè prima shown.bs.modalche si verifichi l'evento).

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

Nasconde manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente nascosto (cioè prima hidden.bs.modalche si verifichi l'evento).

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

Riadatta il posizionamento del modale per contrastare una barra di scorrimento nel caso in cui ne venga visualizzata una, il che farebbe saltare il modale a sinistra.

Necessario solo quando l'altezza del modale cambia mentre è aperto.

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

Eventi

La classe modale di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità modale.

Tutti gli eventi modali vengono attivati ​​sul modale stesso (cioè al <div class="modal">).

Tipo di evento Descrizione
show.bs.modal Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza. Se causato da un clic, l'elemento cliccato è disponibile come relatedTargetproprietà dell'evento.
mostrato.bs.modale Questo evento viene attivato quando il modale è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS). Se causato da un clic, l'elemento cliccato è disponibile come relatedTargetproprietà dell'evento.
nascondi.bs.modale Questo evento viene generato immediatamente quando hideviene chiamato il metodo dell'istanza.
nascosto.bs.modale Questo evento viene generato quando il modale ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
caricato.bs.modale Questo evento viene generato quando il modale ha caricato il contenuto utilizzando l' remoteopzione.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdown dropdown.js

Aggiungi menu a discesa a quasi tutto con questo semplice plugin, inclusa la barra di navigazione, le schede e le pillole.

All'interno di una barra di navigazione

Dentro le pillole

Tramite attributi di dati o JavaScript, il plug-in a discesa attiva o disattiva il contenuto nascosto (menu a discesa) attivando la .openclasse sull'elemento dell'elenco padre.

Sui dispositivi mobili, l'apertura di un menu a discesa aggiunge un'area .dropdown-backdropdi tocco per la chiusura dei menu a discesa quando si tocca fuori dal menu, un requisito per un adeguato supporto iOS. Ciò significa che il passaggio da un menu a discesa aperto a un menu a discesa diverso richiede un tocco in più sul cellulare.

Nota: l' data-toggle="dropdown"attributo viene utilizzato per la chiusura dei menu a discesa a livello di applicazione, quindi è una buona idea utilizzarlo sempre.

Tramite attributi di dati

Aggiungi data-toggle="dropdown"a un link o un pulsante per attivare un menu a discesa.

<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 mantenere intatti gli URL con i pulsanti di collegamento, utilizza l' data-targetattributo 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>

Tramite JavaScript

Chiama i menu a discesa tramite JavaScript:

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

data-toggle="dropdown"ancora richiesto

Indipendentemente dal fatto che chiami il menu a discesa tramite JavaScript o utilizzi invece data-api, data-toggle="dropdown"è sempre necessario essere presente sull'elemento trigger del menu a discesa.

Nessuno

Attiva o disattiva il menu a discesa di una determinata barra di navigazione o la navigazione a schede.

Tutti gli eventi a discesa vengono attivati .dropdown-menu​​sull'elemento padre di .

Tutti gli eventi a discesa hanno una relatedTargetproprietà, il cui valore è l'elemento di ancoraggio di commutazione.

Tipo di evento Descrizione
mostra.bs.menu a discesa Questo evento viene attivato immediatamente quando viene chiamato il metodo show instance.
mostrato.bs.menu a discesa Questo evento viene attivato quando il menu a discesa è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
nascondi.bs.menu a discesa Questo evento viene generato immediatamente quando viene chiamato il metodo dell'istanza hide.
menu a discesa.bs.nascosto Questo evento viene attivato quando il menu a discesa ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Esempio nella barra di navigazione

Il plug-in ScrollSpy consente di aggiornare automaticamente i target di navigazione in base alla posizione di scorrimento. Scorri l'area sotto la barra di navigazione e osserva il cambio di classe attivo. Verranno evidenziati anche gli elementi secondari a discesa.

@Grasso

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prima che si esaurissero qui. Tumblr diritto alla bicicletta da fattoria a tavola qualunque cosa. Cardigan Anim Kefiah Carles. Cabina fotografica di Velit seitan mcsweeney 3 wolf moon irure. Cosby maglione lomo jean pantaloncini, williamsburg felpa con cappuccio minimo qui probabilmente non ne hai sentito parlare et cardigan fondo fiduciario culpa biodiesel wes anderson estetica. Nihil tatuato accusamus, cred ironia biodiesel kefiah artigiano ullamco consequat.

@mdo

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

uno

Occaecat commodo aliqua delectus. Fap birra artigianale deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore monorigine caffè in magna veniam. High life id vinile, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi Borsa messenger minimal fai da te. Cred ex in, marsupio sostenibile delectus consectetur 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 qualunque delectus food truck. Sapiente synth id presupposto. Locavore sed helvetica cliché ironia, thundercats probabilmente non ne hai sentito parlare consequat hoodie senza glutine lo-fi fap aliquip. Labore elit placeat prima che si esaurissero, terry richardson proident brunch nesciunt quis cosby maglione pariatur kefiyeh ut helvetica artigiano. Cardigan birra artigianale seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minimo commodo ullamco thundercats.

Utilizzo

Richiede Bootstrap nav

Scrollspy attualmente richiede l'uso di un componente di navigazione Bootstrap per la corretta evidenziazione dei collegamenti attivi.

Target ID risolvibili obbligatori

I collegamenti Navbar devono avere destinazioni ID risolvibili. Ad esempio, un <a href="#home">home</a>must corrisponde a qualcosa nel DOM come <div id="home"></div>.

Elementi non :visibletarget ignorati

Gli elementi di destinazione che non sono :visibleconformi a jQuery verranno ignorati e i relativi elementi di navigazione non verranno mai evidenziati.

Richiede il posizionamento relativo

Indipendentemente dal metodo di implementazione, scrollspy richiede l'uso position: relative;dell'elemento che stai spiando. Nella maggior parte dei casi questo è il <body>. Quando scorri gli elementi diversi da <body>, assicurati di avere un heightset e overflow-y: scroll;applicato.

Tramite attributi di dati

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi data-spy="scroll"l'elemento che vuoi spiare (di solito questo sarebbe il <body>). Quindi aggiungi l' data-targetattributo con l'ID o la classe dell'elemento padre di qualsiasi .navcomponente 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>

Tramite JavaScript

Dopo aver aggiunto position: relative;il tuo CSS, chiama scrollspy tramite JavaScript:

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

Metodi

.scrollspy('refresh')

Quando usi scrollspy insieme all'aggiunta o alla rimozione di elementi dal DOM, dovrai chiamare il metodo di aggiornamento in questo modo:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset="".

Nome genere predefinito descrizione
compensare numero 10 Pixel da compensare dall'alto durante il calcolo della posizione di scorrimento.

Eventi

Tipo di evento Descrizione
attivare.bs.scrollspy Questo evento si attiva ogni volta che un nuovo oggetto viene attivato da Scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Schede attivabili tab.js

Schede di esempio

Aggiungi funzionalità di schede rapide e dinamiche per passare da un riquadro di contenuto locale all'altro, anche tramite menu a discesa. Le schede nidificate non sono supportate.

Denim grezzo probabilmente non hai sentito parlare di quei pantaloncini di jeans Austin. Nesciunt tofu stumptown aliqua, purificatore di synth retrò. Baffi cliché tempor, williamsburg carles vegan helvetica. Reprehenderit macellaio sintetizzatore acchiappasogni retrò kefiah. Maglione Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, macellaio 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 la navigazione a schede

Questo plugin estende il componente di navigazione a schede per aggiungere aree tabbable.

Utilizzo

Abilita le schede tabb tramite JavaScript (ogni scheda deve essere attivata singolarmente):

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

Puoi attivare singole schede in diversi modi:

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

Puoi attivare una navigazione con tab o pill senza scrivere JavaScript semplicemente specificando data-toggle="tab"o data-toggle="pill"su un elemento. L'aggiunta delle classi nave nav-tabsalla scheda ulapplicherà lo stile della scheda Bootstrap , mentre l'aggiunta delle classi nave nav-pillsapplicherà lo stile della 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>

Effetto dissolvenza

Per far sfumare le schede, aggiungi .fadea ciascuna .tab-pane. Il primo riquadro delle schede deve anche .inrendere visibile il contenuto 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>

Metodi

$().tab

Attiva un elemento scheda e un contenitore di contenuto. La scheda dovrebbe avere a data-targeto un hrefnodo di destinazione del contenitore nel DOM. Negli esempi precedenti, le schede sono le <a>s con data-toggle="tab"attributi.

.tab('show')

Seleziona la scheda data e mostra il contenuto associato. Qualsiasi altra scheda precedentemente selezionata viene deselezionata e il contenuto associato viene nascosto. Ritorna al chiamante prima che il riquadro delle schede sia stato effettivamente mostrato (cioè prima shown.bs.tabche si verifichi l'evento).

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

Eventi

Quando viene visualizzata una nuova scheda, gli eventi si attivano nel seguente ordine:

  1. hide.bs.tab(nella scheda attiva corrente)
  2. show.bs.tab(nella scheda da mostrare)
  3. hidden.bs.tab(nella scheda attiva precedente, la stessa hide.bs.tabdell'evento)
  4. shown.bs.tab(nella scheda appena mostrata appena attiva, la stessa show.bs.tabdell'evento)

Se nessuna scheda era già attiva, gli eventi hide.bs.tabe hidden.bs.tabnon verranno attivati.

Tipo di evento Descrizione
show.bs.tab Questo evento si attiva alla visualizzazione della scheda, ma prima che venga mostrata la nuova scheda. Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
mostrato.bs.tab Questo evento si attiva alla visualizzazione delle schede dopo che è stata mostrata una scheda. Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
nascondi.bs.tab Questo evento si attiva quando deve essere visualizzata una nuova scheda (e quindi la scheda attiva precedente deve essere nascosta). Utilizzare event.targete event.relatedTargetper scegliere come target rispettivamente la scheda attiva corrente e la nuova scheda che sarà presto attiva.
scheda.bs.nascosta Questo evento si attiva dopo che viene mostrata una nuova scheda (e quindi la scheda attiva precedente viene nascosta). Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva precedente e la nuova scheda attiva.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltip tooltip.js

Ispirato all'eccellente plugin jQuery.tipsy scritto da Jason Frame; Le descrizioni comandi sono una versione aggiornata, che non si basa sulle immagini, utilizza CSS3 per le animazioni e gli attributi dei dati per l'archiviazione del titolo locale.

Le descrizioni comandi con titoli di lunghezza zero non vengono mai visualizzate.

Esempi

Passa il mouse sui link sottostanti per vedere i suggerimenti:

Pantaloni attillati kefiah di livello successivo probabilmente non ne hai sentito parlare. Photo Booth barba denim grezzo letterpress borsa messenger vegana stumptown. Il seitan da fattoria a tavola, l'abbigliamento americano a 8 bit con quinoa sostenibile di mcsweeney's ha un chambray in vinile di spugna di richardson. Beard Stumptown, cardigan banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, quattro loko mcsweeney's cleanse vegan chambray. Un artigiano davvero ironico qualunque sia il keytar , il cinguettio di Banksy Austin, sceneggiatore da fattoria a tavola, gestisce il virale del caffè single-origine freegan cred denim grezzo.

Descrizione comando statico

Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.

Quattro direzioni

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

Funzionalità di attivazione

Per motivi di prestazioni, le API di dati Tooltip e Popover sono attivabili, il che significa che devi inizializzarle tu stesso .

Un modo per inizializzare tutti i suggerimenti su una pagina sarebbe selezionarli in base al loro data-toggleattributo:

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

Utilizzo

Il plug-in tooltip genera contenuto e markup su richiesta e, per impostazione predefinita, posiziona i suggerimenti dopo il loro elemento di attivazione.

Attiva il suggerimento tramite JavaScript:

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

Marcatura

Il markup richiesto per un suggerimento è solo un dataattributo e titlesull'elemento HTML desideri avere un suggerimento. Il markup generato di un tooltip è piuttosto semplice, sebbene richieda una posizione (per impostazione predefinita, impostata topdal plug-in).

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

Collegamenti a più righe

A volte si desidera aggiungere una descrizione comando a un collegamento ipertestuale che racchiude più righe. Il comportamento predefinito del plugin della descrizione comando è centrarlo orizzontalmente e verticalmente. Aggiungi white-space: nowrap;alle tue ancore per evitarlo.

I suggerimenti nei gruppi di pulsanti, gruppi di input e tabelle richiedono un'impostazione speciale

Quando utilizzi i suggerimenti sugli elementi all'interno di a .btn-groupo an .input-group, o sugli elementi correlati alla tabella ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), dovrai specificare l'opzione container: 'body'(documentata di seguito) per evitare effetti collaterali indesiderati (come l'elemento che si allarga e/ o perdere gli angoli arrotondati quando viene attivato il suggerimento).

Non provare a mostrare i suggerimenti sugli elementi nascosti

Invocare $(...).tooltip('show')quando l'elemento di destinazione è display: none;, causerà il posizionamento errato della descrizione comando.

Suggerimenti accessibili per utenti di tastiere e tecnologie assistive

Per gli utenti che navigano con una tastiera, e in particolare per gli utenti di tecnologie assistive, dovresti aggiungere suggerimenti solo agli elementi attivabili dalla tastiera come collegamenti, controlli modulo o qualsiasi elemento arbitrario con un tabindex="0"attributo.

I suggerimenti sugli elementi disabilitati richiedono elementi wrapper

Per aggiungere una descrizione comando a un elemento disabledo .disabled, inserisci l'elemento all'interno di a <div>e applica invece la descrizione comando a quello <div>.

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Nome Tipo Predefinito Descrizione
animazione booleano VERO Applica una transizione di dissolvenza CSS alla descrizione comando
contenitore stringa | falso falso

Aggiunge la descrizione comando a un elemento specifico. Esempio: container: 'body'. Questa opzione è particolarmente utile in quanto consente di posizionare la descrizione comando nel flusso del documento vicino all'elemento di attivazione, impedendo che la descrizione comando si allontani dall'elemento di attivazione durante il ridimensionamento della finestra.

ritardo numero | oggetto 0

Ritardo che mostra e nasconde la descrizione comando (ms) - non si applica al tipo di trigger manuale

Se viene fornito un numero, il ritardo viene applicato a entrambi nascondi/mostra

La struttura dell'oggetto è:delay: { "show": 500, "hide": 100 }

html booleano falso Inserisci HTML nella descrizione comando. Se false, il textmetodo di jQuery verrà utilizzato per inserire contenuto nel DOM. Usa il testo se sei preoccupato per gli attacchi XSS.
posizionamento stringa | funzione 'superiore'

Come posizionare la descrizione comando - in alto | in basso | sinistra | giusto | auto.
Quando viene specificato "auto", riorienterà dinamicamente la descrizione comando. Ad esempio, se il posizionamento è "auto a sinistra", il suggerimento verrà visualizzato a sinistra quando possibile, altrimenti verrà visualizzato a destra.

Quando una funzione viene utilizzata per determinare il posizionamento, viene chiamata con il nodo DOM della descrizione comando come primo argomento e il nodo DOM dell'elemento di attivazione come secondo. Il thiscontesto è impostato sull'istanza della descrizione comando.

selettore corda falso Se viene fornito un selettore, gli oggetti tooltip verranno delegati alle destinazioni specificate. In pratica, questo viene utilizzato per consentire al contenuto HTML dinamico di aggiungere suggerimenti. Vedi questo e un esempio informativo .
modello corda '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML di base da utilizzare durante la creazione del suggerimento.

I suggerimenti titleverranno inseriti nel file .tooltip-inner.

.tooltip-arrowdiventerà la freccia del suggerimento.

L'elemento wrapper più esterno dovrebbe avere la .tooltipclasse.

titolo stringa | funzione ''

Valore del titolo predefinito se titlel'attributo non è presente.

Se viene fornita una funzione, verrà chiamata con il suo thisset di riferimento all'elemento a cui è allegata la descrizione comando.

grilletto corda "messa a fuoco al passaggio del mouse" Come viene attivata la descrizione comando: fare clic su | passa il mouse | messa a fuoco | Manuale. Puoi passare più trigger; separali con uno spazio. manualnon può essere combinato con nessun altro trigger.
vista stringa | oggetto | funzione { selettore: 'body', riempimento: 0 }

Mantiene la descrizione comando entro i limiti di questo elemento. Esempio: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Se viene fornita una funzione, viene chiamata con il nodo DOM dell'elemento di attivazione come unico argomento. Il thiscontesto è impostato sull'istanza della descrizione comando.

Attributi dei dati per i singoli suggerimenti

Le opzioni per i singoli suggerimenti possono essere specificati in alternativa tramite l'uso degli attributi dei dati, come spiegato sopra.

Metodi

$().tooltip(options)

Allega un gestore di descrizione comando a una raccolta di elementi.

.tooltip('show')

Rivela il suggerimento di un elemento. Ritorna al chiamante prima che il suggerimento sia stato effettivamente mostrato (cioè prima shown.bs.tooltipche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del suggerimento. Le descrizioni comandi con titoli di lunghezza zero non vengono mai visualizzate.

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

.tooltip('hide')

Nasconde la descrizione comando di un elemento. Ritorna al chiamante prima che il suggerimento sia stato effettivamente nascosto (cioè prima hidden.bs.tooltipche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del suggerimento.

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

.tooltip('toggle')

Attiva o disattiva la descrizione comando di un elemento. Ritorna al chiamante prima che il suggerimento sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.tooltipo hidden.bs.tooltip). Questo è considerato un'attivazione "manuale" del suggerimento.

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

.tooltip('destroy')

Nasconde e distrugge il suggerimento di un elemento. Le descrizioni comandi che utilizzano la delega (che vengono create utilizzando l' selectoropzione ) non possono essere distrutte individualmente sugli elementi trigger discendenti.

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

Eventi

Tipo di evento Descrizione
mostra.bs.descrizione comando Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza.
descrizione comando.bs. mostrata Questo evento viene attivato quando la descrizione comando è stata resa visibile all'utente (attenderà il completamento delle transizioni CSS).
descrizione comando nascondi.bs Questo evento viene generato immediatamente quando hideviene chiamato il metodo dell'istanza.
descrizione comando.bs.nascosta Questo evento viene attivato quando la descrizione comando ha finito di essere nascosta all'utente (attenderà il completamento delle transizioni CSS).
descrizione comando.bs.inserita Questo evento viene attivato dopo l' show.bs.tooltipevento quando il modello di descrizione comando è stato aggiunto al DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popover popover.js

Aggiungi piccole sovrapposizioni di contenuto, come quelle dell'iPad, a qualsiasi elemento per ospitare informazioni secondarie.

I popover il cui titolo e contenuto sono di lunghezza zero non vengono mai visualizzati.

Dipendenza dal plugin

I popover richiedono che il plug-in del tooltip sia incluso nella tua versione di Bootstrap.

Funzionalità di attivazione

Per motivi di prestazioni, le API di dati Tooltip e Popover sono attivabili, il che significa che devi inizializzarle tu stesso .

Un modo per inizializzare tutti i popover su una pagina sarebbe selezionarli in base al loro data-toggleattributo:

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

I popover nei gruppi di pulsanti, gruppi di input e tabelle richiedono un'impostazione speciale

Quando si utilizzano i popover sugli elementi all'interno di a .btn-groupo an .input-group, o sugli elementi relativi alla tabella ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), dovrai specificare l'opzione container: 'body'(documentata di seguito) per evitare effetti collaterali indesiderati (come l'elemento che si allarga e/ o perdere gli angoli arrotondati quando viene attivato il popover).

Non provare a mostrare popover su elementi nascosti

Invocare $(...).popover('show')quando l'elemento di destinazione è display: none;, causerà il posizionamento errato del popover.

I popover su elementi disabilitati richiedono elementi wrapper

Per aggiungere un popover a un elemento disabledo .disabled, inserisci l'elemento all'interno di a <div>e applica invece il popover a quello <div>.

Collegamenti a più righe

A volte vuoi aggiungere un popover a un collegamento ipertestuale che racchiude più righe. Il comportamento predefinito del plug-in popover è centrarlo orizzontalmente e verticalmente. Aggiungi white-space: nowrap;alle tue ancore per evitarlo.

Esempi

Popover statico

Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.

Parte superiore a scomparsa

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

Popover a destra

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

Fondo a scomparsa

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

Popover a sinistra

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

Dimostrazione dal vivo

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

Quattro direzioni

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

Ignora al prossimo clic

Utilizzare il focustrigger per ignorare i popover al clic successivo effettuato dall'utente.

È richiesto un markup specifico per l'eliminazione al clic successivo

Per un corretto comportamento cross-browser e multipiattaforma, devi utilizzare il <a>tag, non il <button>tag, e devi anche includere gli attributi role="button"e .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>

Utilizzo

Abilita i popover tramite JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Nome Tipo Predefinito Descrizione
animazione booleano VERO Applica una transizione di dissolvenza CSS al popover
contenitore stringa | falso falso

Aggiunge il popover a un elemento specifico. Esempio: container: 'body'. Questa opzione è particolarmente utile in quanto consente di posizionare il popover nel flusso del documento vicino all'elemento di attivazione, impedendo che il popover si allontani dall'elemento di attivazione durante il ridimensionamento della finestra.

contenuto stringa | funzione ''

Valore di contenuto predefinito se data-contentl'attributo non è presente.

Se viene fornita una funzione, verrà chiamata con il suo thisriferimento impostato all'elemento a cui è collegato il popover.

ritardo numero | oggetto 0

Ritardo che mostra e nasconde il popover (ms) - non si applica al tipo di trigger manuale

Se viene fornito un numero, il ritardo viene applicato a entrambi nascondi/mostra

La struttura dell'oggetto è:delay: { "show": 500, "hide": 100 }

html booleano falso Inserisci HTML nel popover. Se false, il textmetodo di jQuery verrà utilizzato per inserire contenuto nel DOM. Usa il testo se sei preoccupato per gli attacchi XSS.
posizionamento stringa | funzione 'Giusto'

Come posizionare il popover - top | in basso | sinistra | giusto | auto.
Quando è specificato "auto", riorienterà dinamicamente il popover. Ad esempio, se il posizionamento è "auto a sinistra", il popover verrà visualizzato a sinistra quando possibile, altrimenti verrà visualizzato a destra.

Quando una funzione viene utilizzata per determinare il posizionamento, viene chiamata con il nodo DOM popover come primo argomento e il nodo DOM dell'elemento di attivazione come secondo. Il thiscontesto è impostato sull'istanza popover.

selettore corda falso Se viene fornito un selettore, gli oggetti popover verranno delegati alle destinazioni specificate. In pratica, questo viene utilizzato per consentire al contenuto HTML dinamico di aggiungere popover. Vedi questo e un esempio informativo .
modello corda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML di base da utilizzare durante la creazione del popover.

I popover titleverranno iniettati nel file .popover-title.

I popover contentverranno iniettati nel file .popover-content.

.arrowdiventerà la freccia del popover.

L'elemento wrapper più esterno dovrebbe avere la .popoverclasse.

titolo stringa | funzione ''

Valore del titolo predefinito se titlel'attributo non è presente.

Se viene fornita una funzione, verrà chiamata con il suo thisriferimento impostato all'elemento a cui è collegato il popover.

grilletto corda 'clic' Come viene attivato il popover - fare clic su | passa il mouse | messa a fuoco | Manuale. Puoi passare più trigger; separali con uno spazio. manualnon può essere combinato con nessun altro trigger.
vista stringa | oggetto | funzione { selettore: 'body', riempimento: 0 }

Mantiene il popover entro i limiti di questo elemento. Esempio: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Se viene fornita una funzione, viene chiamata con il nodo DOM dell'elemento di attivazione come unico argomento. Il thiscontesto è impostato sull'istanza popover.

Attributi dei dati per i singoli popover

Le opzioni per i singoli popover possono essere specificate in alternativa tramite l'uso di attributi di dati, come spiegato sopra.

Metodi

$().popover(options)

Inizializza i popover per una raccolta di elementi.

.popover('show')

Rivela il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato (cioè prima shown.bs.popoverche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del popover. I popover il cui titolo e contenuto sono di lunghezza zero non vengono mai visualizzati.

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

.popover('hide')

Nasconde il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente nascosto (cioè prima hidden.bs.popoverche si verifichi l'evento). Questo è considerato un'attivazione "manuale" del popover.

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

.popover('toggle')

Attiva/disattiva il popover di un elemento. Ritorna al chiamante prima che il popover sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.popovero hidden.bs.popover). Questo è considerato un'attivazione "manuale" del popover.

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

.popover('destroy')

Nasconde e distrugge il popover di un elemento. I popover che utilizzano la delega (che vengono creati utilizzando l' selectoropzione ) non possono essere distrutti individualmente sugli elementi trigger discendenti.

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

Eventi

Tipo di evento Descrizione
show.bs.popover Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza.
mostrato.bs.popover Questo evento viene attivato quando il popover è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
nascondi.bs.popover Questo evento viene generato immediatamente quando hideviene chiamato il metodo dell'istanza.
popover.bs.nascosto Questo evento viene attivato quando il popover ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
inserito.bs.popover Questo evento viene attivato dopo l' show.bs.popoverevento quando il modello popover è stato aggiunto al DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Messaggi di avviso alert.js

Esempi di avvisi

Aggiungi la funzionalità di eliminazione a tutti i messaggi di avviso con questo plugin.

Quando si utilizza un .closepulsante, deve essere il primo figlio di .alert-dismissiblee nessun contenuto di testo può precederlo nel markup.

Utilizzo

Basta aggiungere data-dismiss="alert"al pulsante di chiusura per fornire automaticamente una funzionalità di chiusura dell'avviso. La chiusura di un avviso lo rimuove dal DOM.

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

Per fare in modo che i tuoi avvisi utilizzino l'animazione durante la chiusura, assicurati che abbiano .fadee.in siano già applicate.

Metodi

$().alert()

Fa in modo che un avviso sia in ascolto per eventi di clic sugli elementi discendenti che hanno l' data-dismiss="alert"attributo. (Non necessario quando si utilizza l'inizializzazione automatica di data-api.)

$().alert('close')

Chiude un avviso rimuovendolo dal DOM. Se le classi .fadee .insono presenti sull'elemento, l'avviso svanirà prima di essere rimosso.

Eventi

Il plug-in di avviso di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di avviso.

Tipo di evento Descrizione
avviso.bs.chiudi Questo evento viene attivato immediatamente quando closeviene chiamato il metodo dell'istanza.
avviso.bs.chiuso Questo evento viene attivato quando l'avviso è stato chiuso (attende il completamento delle transizioni CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Bottoni button.js

Fai di più con i pulsanti. Controlla gli stati dei pulsanti o crea gruppi di pulsanti per più componenti come le barre degli strumenti.

Compatibilità tra browser

Firefox persiste negli stati di controllo dei moduli (disabilitazione e verifica) durante i caricamenti delle pagine . Una soluzione alternativa è usare autocomplete="off". Vedi Mozilla bug #654072 .

Stateful

Aggiungi data-loading-text="Loading..."per utilizzare uno stato di caricamento su un pulsante.

Questa funzionalità è deprecata dalla v3.3.5 ed è stata rimossa nella v4.

Usa lo stato che preferisci!

Per il bene di questa dimostrazione, stiamo usando data-loading-textand $().button('loading'), ma questo non è l'unico stato che puoi usare. Vedi di più su questo di seguito nella $().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>

Singolo interruttore

Aggiungi data-toggle="button"per attivare la commutazione su un singolo pulsante.

Necessità di pulsanti pre-attivati.active earia-pressed="true"

Per i pulsanti preattivati, devi aggiungere la .activeclasse e l' aria-pressed="true"attributo a buttonte stesso.

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

Casella di controllo / Radio

Aggiungi data-toggle="buttons"a una .btn-groupcasella di controllo contenente o ingressi radio per abilitare la commutazione nei rispettivi stili.

Sono necessarie opzioni preselezionate.active

Per le opzioni preselezionate, devi aggiungere tu stesso la .activeclasse all'input label.

Stato di controllo visivo aggiornato solo al clic

Se lo stato selezionato di un pulsante della casella di controllo viene aggiornato senza attivare un clickevento sul pulsante (ad esempio tramite <input type="reset">o tramite l'impostazione della checkedproprietà dell'input), dovrai attivare tu stesso la .activeclasse sull'input label.

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

Metodi

$().button('toggle')

Commuta lo stato di spinta. Dà al pulsante l'aspetto che è stato attivato.

$().button('reset')

Ripristina lo stato del pulsante: scambia il testo con il testo originale. Questo metodo è asincrono e ritorna prima che la reimpostazione sia stata effettivamente completata.

$().button(string)

Scambia il testo in qualsiasi stato di testo definito dai 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>

Comprimi collasso.js

Plugin flessibile che utilizza una manciata di classi per un facile comportamento di commutazione.

Dipendenza dal plugin

Comprimi richiede che il plug -in di transizione sia incluso nella tua versione di Bootstrap.

Esempio

Fai clic sui pulsanti sottostanti per mostrare e nascondere un altro elemento tramite i cambi di classe:

  • .collapsenasconde il contenuto
  • .collapsingviene applicato durante le transizioni
  • .collapse.inmostra il contenuto

È possibile utilizzare un collegamento con l' hrefattributo o un pulsante con l' data-targetattributo. In entrambi i casi data-toggle="collapse"è richiesto.

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>

Esempio di fisarmonica

Estendi il comportamento di compressione predefinito per creare una fisarmonica con il componente pannello.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua mettici sopra un uccellino calamari monorigine caffè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birra artigianale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan eccetto macellaio vice lomo. Leggings occaecat birra artigianale da fattoria a tavola, denim grezzo estetico synth nesciunt probabilmente non ne hai sentito parlare accusamus labore sostenibile VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua mettici sopra un uccellino calamari monorigine caffè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birra artigianale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan eccetto macellaio vice lomo. Leggings occaecat birra artigianale da fattoria a tavola, denim grezzo estetico synth nesciunt probabilmente non ne hai sentito parlare accusamus labore sostenibile VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua mettici sopra un uccellino calamari monorigine caffè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birra artigianale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan eccetto macellaio vice lomo. Leggings occaecat birra artigianale da fattoria a tavola, denim grezzo estetico synth nesciunt probabilmente non ne hai sentito parlare accusamus labore sostenibile 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>

È anche possibile sostituire .panel-bodys con .list-groups.

  • Bootply
  • One itmus ac facilità
  • Secondo eros

Rendi accessibili i controlli di espansione/compressione

Assicurati di aggiungere aria-expandedall'elemento di controllo. Questo attributo definisce in modo esplicito lo stato corrente dell'elemento comprimibile per lettori di schermo e tecnologie assistive simili. Se l'elemento comprimibile è chiuso per impostazione predefinita, dovrebbe avere un valore di aria-expanded="false". Se hai impostato l'elemento comprimibile in modo che sia aperto per impostazione predefinita usando la inclasse, impostalo aria-expanded="true"invece sul controllo. Il plug-in attiverà automaticamente questo attributo in base al fatto che l'elemento comprimibile sia stato aperto o chiuso o meno.

Inoltre, se il tuo elemento di controllo ha come target un singolo elemento comprimibile, ovvero l' data-targetattributo punta a un idselettore, puoi aggiungere un aria-controlsattributo aggiuntivo all'elemento di controllo, contenente l' idelemento comprimibile. I moderni lettori di schermo e tecnologie assistive simili utilizzano questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all'elemento comprimibile stesso.

Utilizzo

Il plugin di compressione utilizza alcune classi per gestire il sollevamento di carichi pesanti:

  • .collapsenasconde il contenuto
  • .collapse.inmostra il contenuto
  • .collapsingviene aggiunto all'inizio della transizione e rimosso al termine

Queste classi possono essere trovate in component-animations.less.

Tramite attributi di dati

Basta aggiungere data-toggle="collapse"e data-targeta all'elemento per assegnare automaticamente il controllo di un elemento comprimibile. L' data-targetattributo accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe collapseall'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva in.

Per aggiungere la gestione dei gruppi a fisarmonica a un controllo comprimibile, aggiungi l'attributo data data-parent="#selector". Fare riferimento alla demo per vederlo in azione.

Tramite JavaScript

Abilita manualmente con:

$('.collapse').collapse()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-parent="".

Nome genere predefinito descrizione
genitore selettore falso Se viene fornito un selettore, tutti gli elementi comprimibili sotto l'elemento padre specificato verranno chiusi quando viene visualizzato questo elemento comprimibile. (simile al comportamento della fisarmonica tradizionale - dipende dalla panelclasse)
alternare booleano VERO Attiva o disattiva l'elemento comprimibile durante l'invocazione

Metodi

.collapse(options)

Attiva il tuo contenuto come elemento comprimibile. Accetta opzioni opzionali object.

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

.collapse('toggle')

Attiva o disattiva un elemento comprimibile in mostrato o nascosto. Ritorna al chiamante prima che l'elemento comprimibile sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.collapseo hidden.bs.collapse).

.collapse('show')

Mostra un elemento comprimibile. Ritorna al chiamante prima che l'elemento comprimibile sia stato effettivamente mostrato (cioè prima shown.bs.collapseche si verifichi l'evento).

.collapse('hide')

Nasconde un elemento comprimibile. Ritorna al chiamante prima che l'elemento comprimibile sia stato effettivamente nascosto (cioè prima hidden.bs.collapseche si verifichi l'evento).

Eventi

La classe di compressione di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di compressione.

Tipo di evento Descrizione
show.bs.collasso Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza.
mostrato.bs.collasso Questo evento viene attivato quando un elemento di compressione è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
nascondi.bs.comprimi Questo evento viene generato immediatamente quando il hidemetodo è stato chiamato.
nascosto.bs.collasso Questo evento viene attivato quando un elemento di compressione è stato nascosto all'utente (attenderà il completamento delle transizioni CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carosello.js

Un componente di presentazione per scorrere gli elementi, come un carosello. I caroselli nidificati non sono 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>

Didascalie facoltative

Aggiungi facilmente didascalie alle tue diapositive con l' .carousel-captionelemento all'interno di qualsiasi.item . Posiziona praticamente qualsiasi HTML opzionale all'interno e verrà automaticamente allineato e formattato.

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

Giostre multiple

I caroselli richiedono l'uso di un idcontenitore più esterno (il .carousel) affinché i controlli del carosello funzionino correttamente. Quando si aggiungono più caroselli o quando si cambia un carosello id, assicurarsi di aggiornare i controlli pertinenti.

Tramite attributi di dati

Usa gli attributi dei dati per controllare facilmente la posizione del carosello. data-slideaccetta le parole chiaveprev o next, che altera la posizione della diapositiva rispetto alla sua posizione corrente. In alternativa, utilizzare data-slide-toper passare un indice di diapositiva non elaborato al carosello data-slide-to="2", che sposta la posizione della diapositiva su un indice particolare che inizia con 0.

Ildata-ride="carousel" attributo viene utilizzato per contrassegnare un carosello come animato a partire dal caricamento della pagina. Non può essere utilizzato in combinazione con l'inizializzazione JavaScript esplicita (ridondante e non necessaria) dello stesso carosello.

Tramite JavaScript

Chiama il carosello manualmente con:

$('.carousel').carousel()

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-interval="".

Nome genere predefinito descrizione
intervallo numero 5000 La quantità di tempo di ritardo tra il ciclo automatico di un elemento. Se è falso, il carosello non scorrerà automaticamente.
pausa stringa | nullo "volare" Se impostato su "hover", mette in pausa il ciclo del carosello mouseentere riprende il ciclo del carosello mouseleave. Se impostato su null, il passaggio del mouse sopra il carosello non lo metterà in pausa.
avvolgere booleano VERO Se il carosello deve scorrere continuamente o avere arresti bruschi.
tastiera del computer booleano VERO Se il carosello deve reagire agli eventi della tastiera.

Inizializza il carosello con un'opzione opzionale objecte inizia a scorrere gli elementi.

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

Scorre gli elementi del carosello da sinistra a destra.

Impedisce al carosello di scorrere gli oggetti.

Fa scorrere il carosello su un fotogramma particolare (basato su 0, simile a una matrice).

Passa all'elemento precedente.

Passa all'elemento successivo.

La classe del carosello di Bootstrap espone due eventi per l'aggancio alla funzionalità del carosello.

Entrambi gli eventi hanno le seguenti proprietà aggiuntive:

  • direction: La direzione in cui scorre il carosello (o "left"o "right").
  • relatedTarget: l'elemento DOM che viene inserito come elemento attivo.

Tutti gli eventi del carosello vengono attivati ​​sul carosello stesso (cioè al <div class="carousel">).

Tipo di evento Descrizione
diapositiva.bs.carousel Questo evento viene attivato immediatamente quando slideviene richiamato il metodo dell'istanza.
carosello.bs.scorrevole Questo evento viene attivato quando il carosello ha completato la transizione della diapositiva.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Apporre affix.js

Esempio

Il plug-in affix position: fixed;si attiva e disattiva, emulando l'effetto trovato con position: sticky;. La sottonavigazione a destra è una demo live del plug-in affix.


Utilizzo

Usa il plug-in affix tramite attributi di dati o manualmente con il tuo JavaScript. In entrambe le situazioni, devi fornire CSS per il posizionamento e la larghezza del tuo contenuto apposto.

Nota: non utilizzare il plug-in affix su un elemento contenuto in un elemento posizionato relativamente, come una colonna estratta o spostata, a causa di un bug di rendering di Safari .

Posizionamento tramite CSS

Il plug-in affix alterna tre classi, ognuna delle quali rappresenta uno stato particolare: .affix, .affix-top, e .affix-bottom. Devi fornire tu stesso gli stili, ad eccezione di position: fixed;on .affix, per queste classi (indipendentemente da questo plugin) per gestire le posizioni effettive.

Ecco come funziona il plug-in affix:

  1. Per iniziare, il plugin aggiunge.affix-top per indicare che l'elemento è nella sua posizione più alta. A questo punto non è richiesto alcun posizionamento CSS.
  2. Scorrendo oltre l'elemento che si desidera apporre dovrebbe attivare l'apposizione vera e propria. Qui è dove .affixsostituisce .affix-tope imposta position: fixed;(fornito dal CSS di Bootstrap).
  3. Se è definito un offset inferiore, scorrendo oltre dovrebbe sostituirlo .affixcon .affix-bottom. Poiché gli offset sono opzionali, impostarne uno richiede di impostare il CSS appropriato. In questo caso, aggiungere position: absolute;quando necessario. Il plug-in utilizza l'attributo dati o l'opzione JavaScript per determinare dove posizionare l'elemento da lì.

Segui i passaggi precedenti per impostare il tuo CSS per una delle seguenti opzioni di utilizzo.

Tramite attributi di dati

Per aggiungere facilmente il comportamento dell'affisso a qualsiasi elemento, basta aggiungere data-spy="affix"all'elemento che vuoi spiare. Usa gli offset per definire quando attivare o disattivare il blocco di un elemento.

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

Tramite JavaScript

Chiama il plug-in affix tramite JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset-top="200".

Nome genere predefinito descrizione
compensare numero | funzione | oggetto 10 Pixel da scostare dallo schermo durante il calcolo della posizione di scorrimento. Se viene fornito un solo numero, l'offset verrà applicato in entrambe le direzioni superiore e inferiore. Per fornire un offset univoco, inferiore e superiore, è sufficiente fornire un oggetto offset: { top: 10 }o offset: { top: 10, bottom: 5 }. Utilizzare una funzione quando è necessario calcolare dinamicamente un offset.
obbiettivo selettore | nodo | elemento jQuery l' windowoggetto Specifica l'elemento di destinazione dell'affisso.

Metodi

.affix(options)

Attiva i tuoi contenuti come contenuti apposti. Accetta opzioni opzionali object.

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

.affix('checkPosition')

Ricalcola lo stato dell'affisso in base alle dimensioni, alla posizione e alla posizione di scorrimento degli elementi rilevanti. Le classi .affix, .affix-top, e .affix-bottomvengono aggiunte o rimosse dal contenuto apposto in base al nuovo stato. Questo metodo deve essere richiamato ogni volta che si modificano le dimensioni del contenuto apposto o dell'elemento target, per garantire il corretto posizionamento del contenuto apposto.

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

Eventi

Il plug-in di affisso di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di affisso.

Tipo di evento Descrizione
affisso.b.affisso Questo evento si attiva immediatamente prima che l'elemento sia stato apposto.
apposto.bs.affisso Questo evento viene attivato dopo che l'elemento è stato apposto.
affix-top.bs.affix Questo evento si attiva immediatamente prima che l'elemento sia stato apposto in alto.
apposto-top.bs.affix Questo evento viene attivato dopo che l'elemento è stato apposto in alto.
affix-bottom.bs.affix Questo evento si attiva immediatamente prima che l'elemento sia stato apposto in basso.
affisso-inferiore.bs.affisso Questo evento viene attivato dopo che l'elemento è stato apposto in basso.