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

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

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.

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.

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>

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

Contenuto modale variabile in base al pulsante di attivazione

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,

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

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

Metodi

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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

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

Dropdown dropdown.js

Esempi

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

Utilizzo

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

Opzioni

Nessuno

Metodi

$().dropdown('toggle')

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

Eventi

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.

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

Utilizzo

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

Eventi

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

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.

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

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>

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

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

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

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

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

Esempi

Popover statico

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

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.

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

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

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

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

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.

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

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

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

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.

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

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

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

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.

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

Esempi

Precedente Prossimo

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

Prima etichetta diapositiva

Nulla vitae elit libero, a pharetra augue mollis interdum.

Etichetta della seconda diapositiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Terza etichetta diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Precedente Prossimo

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

Utilizzo

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

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

Metodi

.carousel(options)

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

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

.carousel('cycle')

Scorre gli elementi del carosello da sinistra a destra.

.carousel('pause')

Impedisce al carosello di scorrere gli oggetti.

.carousel(number)

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

.carousel('prev')

Passa all'elemento precedente.

.carousel('next')

Passa all'elemento successivo.

Eventi

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

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

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.