À propositu di modali

Un simplificatu, ma flessibile, pigliate u plugin modale javascript tradiziunale cù solu a funziunalità minima necessaria è i predefiniti intelligenti.

Esempiu staticu

Sottu hè un modal renditu staticamente.

Demo live

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

Utilizendu bootstrap-modal

Chjamate u modale via javascript:

$ ( '#myModal' ). modale ( opzioni )

Opzioni

Marcatura

Pudete attivà i modali nantu à a vostra pagina facilmente senza avè da scrive una sola linea di javascript. Basta à mette data-toggle="modal"nantu à un elementu di cuntrollu cù a data-target="#foo"o href="#foo"chì currisponde à un id di l'elementu modale, è quandu cliccà, lanciarà u vostru modale.

Inoltre, per aghjunghje l'opzioni à a vostra istanza modale, include solu cum'è attributi di dati supplementari nantu à l'elementu di cuntrollu o in u marcatu modale stessu.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modale" > × </button>   
    <h3> Intestazione modale </h3>
  </div>
  <div class = "corpu-modale" > 
    <p> Un corpu bellu ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Chiudi </a>   
    <a href = "#" class = "btn btn-primary" > Salvà i cambiamenti </a>  
  </div>
</div>

I metudi

.modale (opzioni)

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

$ ( '#myModal' ). modale ({
  tastiera : false 
})

.modal('toggle')

Cambia manualmente un modale.

$ ( '#myModal' ). modale ( 'basculà' )

.modal('mostra')

Apertura manualmente un modale.

$ ( '#myModal' ). modale ( 'mostra' )

.modal('hide')

Oculta manualmente un modale.

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

Avvenimenti

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

$ ( '#myModal' ). on ( 'hidden' , funzione () {   
  // fà qualcosa...
})

À propositu di dropdowns

Aghjunghjite menu dropdown à quasi tuttu in Bootstrap cù stu plugin simplice. Bootstrap presenta un supportu cumpletu di menu a tendina in a barra di navigazione, tabulazioni è pillole.

Esempii

Cliccate nantu à i ligami di navigazione dropdown in a barra di navigazione è i pills sottu per pruvà i dropdowns.

• Ligame regulare
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• menu a tendina 2
  • Action
  • Another action
  • Something else here
  • Separated link
• menu a tendina 3
  • Action
  • Another action
  • Something else here
  • Separated link

Utilizendu bootstrap-dropdown.js

Chjamate i menu dropdown via javascript:

$ ( '.dropdown-toggle' ). menu a tendina ()

Marcatura

Per aghjustà rapidamente a funziunalità dropdown à qualsiasi elementu basta à aghjunghje data-toggle="dropdown"è ogni dropdown di bootstrap validu serà attivatu automaticamente.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Ligame regulare </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      <li><a href = "#" > Azzione </a></li> 
      <li><a href = "#" > Un'altra azione </a></li> 
      <li><a href = "#" > Qualcosa altru quì </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Ligame separatu </a></li> 
    </ul>
  </li>
  ...
</ul>

Per mantene l'URL intactu, utilizate l' data-targetattributu invece di href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

I metudi

$().dropdown()

Una api programatica per attivà i menu per una data navbar o navigazione tabulata.

U plugin ScrollSpy hè per aghjurnà automaticamente i miri di navigazione basatu nantu à a pusizione di scroll.

Esempiu di navbar cù scrollspy

Scorri l'area sottu è fighjate l'aghjurnamentu di navigazione. I sub-elementi di menu a tendina saranu ancu evidenziati. Pruvate!

Utilizendu bootstrap-scrollspy.js

Chjamate u scrollspy via javascript:

$ ( '#navbar' ). scrollspy ()

Marcatura

Per aghjustà facilmente u cumpurtamentu scrollspy à a vostra navigazione in cima, aghjunghje solu data-spy="scroll"à l'elementu chì vulete spià (a più tipica questu seria u corpu).

<body data-spy = "scroll" > ... </body>  

I metudi

.scrollspy('refresh')

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

$ ( '[data-spy="scroll"]' ). ognunu ( funzione () {  
  var $spy = $ ( questu ). scrollspy ( 'refresh' )
});

Opzioni

Avvenimenti

Stu plugin aghjusta una tabulazione rapida è dinamica è funziunalità di pillola per a transizione per u cuntenutu locale.

Esempi di tabs

Cliccate nantu à e tabulazioni sottu per bascà trà i riquadri nascosti, ancu via menu a tendina.

• A casa
• Prufilu
• Dropdown
  • @fat
  • @mdo

Utilizendu bootstrap-tab.js

Abilita tabulazioni tabulabili via javascript (ogni tabulazione deve esse attivata individualmente):

$ ( '#myTab a' ). cliccate ( funzione ( e ) {  
  e . preventDefault ();
  $ ( questu ). tab ( 'mostra' );
})

Pudete attivà tabulazioni individuali in parechje manere:

$ ( '#myTab a[href="#profile"]' ). tab ( 'mostra' ); // Selezziunate tabulazione per nome 
$ ( '#myTab a:first' ). tab ( 'mostra' ); // Selezziunà a prima tabulazione 
$ ( '#myTab a:last' ). tab ( 'mostra' ); // Selezziunate l'ultima tabulazione 
$ ( '#myTab li:eq(2) a' ). tab ( 'mostra' ); // Selezziunate a terza tabulazione (0-indexata) 

Marcatura

Pudete attivà una tabulazione o una navigazione di pillola senza scrivite alcuna javascript solu per specificà data-toggle="tab"o data-toggle="pill"nantu à un elementu. Aghjunghjendu nave nav-tabsclassi à a tabulazione ulapplicà u stilu di tabulazione bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profilu </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Missaghji </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Impostazioni </a></li>  
</ul>

I metudi

$().tab

Attiva un elementu di tabulazione è cuntenutu di cuntenutu. A tabulazione deve avè un data-targeto un hreftargeting un node di cuntainer in u DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Missaghji </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "casa" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( funzione () {  
    $ ( '#myTab a:last' ). tab ( 'mostra' );
  })
</script>

Avvenimenti

$ ( 'a[data-toggle="tab"]' ). on ( 'mostratu' , funzione ( e ) {   
  e . target // tab attivata
  e . relatedTarget // tab precedente
})

À propositu di Tooltips

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

Esempiu di usu di Tooltips

Passa sopra i ligami sottu per vede tooltips:

Utilizendu bootstrap-tooltip.js

Trigger u tooltip via javascript:

$ ( '#esempiu' ). tooltip ( opzioni )

Opzioni

Marcatura

Per ragioni di rendiment, u Tooltip è Popover data-apis sò opt in. Se vulete usà solu specificate una opzione selettore.

<a href = "#" rel = "tooltip" title = "prima tooltip" > passa sopra à mè </a>   

I metudi

$().tooltip(opzioni)

Attacca un gestore di tooltip à una cullizzioni di elementi.

.tooltip('mostra')

Revela u tooltip di l'elementu.

$ ( '#elementu' ). tooltip ( 'mostra' )

.tooltip('hide')

Nasconde u tooltip di un elementu.

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

.tooltip('toggle')

Commuta u tooltip di un elementu.

$ ( '#elementu' ). tooltip ( 'basculà' )

À propositu di popovers

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

* Richiede Tooltip per esse inclusu

Esempiu popover hover

Passa sopra u buttone per attivà u popover.

Utilizendu bootstrap-popover.js

Abilita i popover via javascript:

$ ( '#esempiu' ). popover ( opzioni )

Opzioni

Marcatura

Per ragioni di rendiment, u Tooltip è Popover data-apis sò opt in. Se vulete usà solu specificate una opzione selettore.

I metudi

$().popover(opzioni)

Inizializza popovers per una cullizzioni di elementi.

.popover('mostra')

Revela un popover di elementi.

$ ( '#elementu' ). popover ( 'mostra' )

.popover('hide')

Nasconde un popover di elementi.

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

.popover('toggle')

Commuta un popover di elementi.

$ ( '#elementu' ). popover ( 'alternativu' )

À propositu di avvisi

U plugin d'alerta hè una classa chjuca per aghjunghje funziunalità vicinu à l'alerta.

Esempi di avvisi

U plugin d'alerte travaglia nantu à i missaghji d'alerta regulare, è bluccà i missaghji.

Utilizà bootstrap-alert.js

Habilita l'eliminazione di una alerta via javascript:

$ ( ".alert" ). alerta ()

Marcatura

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

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

I metudi

$().alert()

Avvolge tutte l'alerte cù una funziunalità stretta. Per avè i vostri alerti animati quandu sò chjusi, assicuratevi di avè a classe .fadeè .indigià applicata à elli.

.alert('close')

Chiude una alerta.

$ ( ".alert" ). alerta ( 'close' )

Avvenimenti

A classa d'alerta di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità d'alerta.

$ ( '#my-alert' ). bind ( 'chjusu' , funzione () {   
  // fà qualcosa...
})

À propositu

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

Esempiu di usu

Aduprate u plugin di i buttoni per i stati è toggles.

Utilizendu bootstrap-button.js

Abilita i buttoni via javascript:

$ ( '.nav-tabs' ). buttone ()

Marcatura

L'attributi di dati sò integrali à u plugin di buttone. Verificate l'esempiu di codice sottu per i varii tipi di marcatura.

<!-- Aghjunghjite data-toggle="button" per attivà u toggling nantu à un solu buttone -->
<button class = "btn" data-toggle = "button" > Unicu Toggle </button>  
 
<!-- Aghjunghjite data-toggle="buttons-checkbox" per u stilu di checkbox in u btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > A manca </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Destra </button> 
</div>
 
<!-- Aghjunghjite data-toggle="buttons-radio" per l'alternanza di stile di radiu in btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > A manca </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Destra </button> 
</div>

I metudi

$().button('toggle')

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

<button class = "btn" data-toggle = "button" > ... </button>   

$().button('caricamentu')

Imposta u statu di u buttone à carica - disattiva u buttone è scambia u testu à u testu di carica. U testu di caricamentu deve esse definitu nantu à l'elementu buttone cù l'attributu di dati data-loading-text.

<button class = "btn" data-loading-text = "carricamentu di cose..." > ... </button>   

$().button('reset')

Resetta u statu di u buttone - scambia u testu à u testu originale.

$().button(stringa)

Resetta u statu di u buttone - scambia u testu à qualsiasi statu di testu definitu di dati.

<button class = "btn" data-complete-text = "finitu!" > ... </button>   
<script>
  $ ( '.btn' ). buttone ( 'completu' )
</script>

À propositu

Ottene stili di basa è supportu flessibile per cumpunenti pieghevoli cum'è accordioni è navigazione.

* Richiede chì u plugin Transitions sia inclusu.

Esempiu di accordion

Utilizendu u plugin di colapsu, avemu custruitu un widget simplice di stile di accordion:

Utilizendu bootstrap-collapse.js

Abilita via javascript:

$ ( ".collapse" ). collapse ()

Opzioni

Marcatura

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

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  semplice colapsable
</button>
 
<div id = "demo" class = "collapse in" > ... </div>  

I metudi

.collapse (opzioni)

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

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

.collapse('basculà')

Cambia un elementu pieghevule per esse mostratu o oculatu.

.collapse('mostra')

Mostra un elementu colapsable.

.collapse('hide')

Oculta un elementu colapsable.

Avvenimenti

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

$ ( '#myCollapsible' ). on ( 'hidden' , funzione () {   
  // fà qualcosa...
})

À propositu

Un plugin genericu per u ciclismu attraversu elementi. Un carrughju.

Esempiu di carrusel

Fighjate a presentazione sottu.

Prima etichetta miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Seconda etichetta miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Terza etichetta miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Utilizendu bootstrap-carousel.js

Chjama via javascript:

$ ( '.carousel' ). carrusel ()

Opzioni

Marcatura

L'attributi di dati sò usati per i cuntrolli precedenti è successivi. Verificate l'esempiu di marcatura sottu.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Elementi di carrusel -->
  <div class = "carousel-inner" > 
    <div class = "elementu attivu" > ... </div> 
    <div class = "elementu" > ... </div> 
    <div class = "elementu" > ... </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

I metudi

.carousel (opzioni)

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

$ ( '.carousel' ). carrusel ({
  intervallu : 2000 
})

.carousel('ciclu')

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

.carousel('pausa')

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

.carousel (numeru)

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

.carousel('prev')

Cicli à l'articulu precedente.

.carousel('next')

Cicli à u prossimu articulu.

Avvenimenti

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

À propositu

Un plugin basicu, facilmente allargatu per creà rapidamente caratteri eleganti cù qualsiasi input di testu di forma.

Esempiu

Accuminciate à scrive in u campu sottu per vede i risultati typeahead.

Utilizendu bootstrap-typeahead.js

Chjamate u typeahead via javascript:

$ ( '.typeahead' ). scrive in avanti ()

Opzioni

Marcatura

Aghjunghjite attributi di dati per registrà un elementu cù funziunalità typeahead.

<input type = "text" data-provide = "typeahead" >  

I metudi

.typeahead (opzioni)

Inizializza un input cun un typeahead.