À propositu di modali

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

Esempiu staticu

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

Utilizà 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 = "modale" > 
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modale" > × </a>  
    <h3> Intestazione modale </h3>
  </div>
  <div class = "corpu-modale" > 
    <p> Un corpu bellu ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn btn-primary" > Salvà i cambiamenti </a>  
    <a href = "#" class = "btn" > Chiudi </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
  • Azzione
  • Un'altra azione
  • Qualcosa altru quì
  • Ligame separatu
• menu a tendina 2
  • Azzione
  • Un'altra azione
  • Qualcosa altru quì
  • Ligame separatu
• menu a tendina 3
  • Azzione
  • Un'altra azione
  • Qualcosa altru quì
  • Ligame separatu

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

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>  

Opzioni

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

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

$ ( '#myTab' ). tab ( 'mostra' )

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.

<ul class = "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 = "#ettings" data-toggle = "tab" > Impostazioni </a></li>  
</ul>

I metudi

$().tab

Attiva un elementu di tabulazione è cuntenutu di cuntenutu. A tabulazione deve avè un "data-target" o un "href" destinatu à un node di cuntainer in u dom.

<ul class = "tabs" > 
  <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 = "impostazioni" > ... </div>  
</div>
 
<script>
  $ ( funzione () {  
    $ ( '.tabs 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 in l'imaghjini, uss css3 per l'animazioni, è l'attributi di dati per u almacenamentu di u 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.

I metudi

$().tooltip(opzioni)

Attacca un gestore di tooltip à una cullizzioni di elementi.

.tooltip('mostra')

Revela un tooltip di elementi.

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

.tooltip('hide')

Nasconde un tooltip di elementi.

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

.tooltip('toggle')

Commuta un tooltip di elementi.

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

À 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à, basta à specificà 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-alerts.js

Abilita l'eliminazione di una alerta via javascript:

$ ( ".alert-message" ). 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 classa .fadeè .indigià applicata à elli.

.alert('close')

Chiude una alerta.

$ ( ".alert-message" ). 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:

$ ( '.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à à btn l'aspettu chì hè statu attivatu.

<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 carica deve esse definitu nantu à l'elementu di 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(string)

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.

Esempiu di accordion

Utilizendu u plugin di collapse, 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 andà in bicicletta attraversu elementi. Un carrughju.

Esempiu di carrusel

Fighjate u slideshow 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.

Second Thumbnail label

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.

Third Thumbnail label

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ò integrali à u plugin carousel. Verificate l'esempiu di codice sottu per i varii tipi di marcatura.

<div class = "carousel" > 
  <!-- Elementi di carrusel -->
  <div class = "carousel-inner" > 
    ...
  </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.

$ ( '.myCarousel' ). 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 modale di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità modale.

À 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 cù un typahead.