Individual o compilat

Si heu baixat la darrera versió de Bootstrap, tant bootstrap.js com bootstrap.min.js contenen tots els connectors que s'enumeren en aquesta pàgina.

Atributs de dades

Podeu utilitzar tots els connectors Bootstrap únicament a través de l'API de marcatge sense escriure una sola línia de JavaScript. Aquesta és l'API de primera classe de Bootstrap i hauria de ser la vostra primera consideració quan feu servir un connector.

Dit això, en algunes situacions pot ser desitjable desactivar aquesta funcionalitat. Per tant, també oferim la possibilitat de desactivar l'API d'atribut de dades desvinculant tots els esdeveniments del cos amb espai de noms amb `'data-api''. Això es veu així:

$ ( 'cos' ). apagat ( '.data-api' )

Alternativament, per orientar un connector específic, només cal incloure el nom del connector com a espai de noms juntament amb l'espai de noms de l'API de dades com aquest:

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

API programàtica

També creiem que hauríeu de poder utilitzar tots els connectors Bootstrap només mitjançant l'API de JavaScript. Totes les API públiques són mètodes únics que es poden encadenar i retornen la col·lecció sobre la qual s'ha actuat.

$ ( ".btn.danger" ). botó ( "commutar" ). addClass ( "greix" )

Tots els mètodes haurien d'acceptar un objecte d'opcions opcionals, una cadena que tingui com a objectiu un mètode concret o res (que iniciï un connector amb un comportament predeterminat):

$ ( "#myModal" ). modal () // inicialitzat amb valors per defecte                       
$ ( "#myModal" ). modal ({ keyboard : false }) // inicialitzat sense teclat     
$ ( "#myModal" ). modal ( 'mostrar' ) // inicialitza i invoca show immediatament                

Cada connector també exposa el seu constructor en brut en una propietat `Constructor`: $.fn.popover.Constructor. Si voleu obtenir una instància de connector concreta, recupera-la directament d'un element: $('[rel=popover]').data('popover').

Esdeveniments

Bootstrap ofereix esdeveniments personalitzats per a la majoria de les accions úniques del connector. En general, es presenten en una forma d'infinitiu i de participi passat, on l'infinitiu (p. ex. show) s'activa a l'inici d'un esdeveniment i la seva forma de participi passat (p. ex. shown) s'activa en finalitzar una acció.

Tots els esdeveniments infinitius proporcionen la funcionalitat preventDefault. Això proporciona la capacitat d'aturar l'execució d'una acció abans que comenci.

$ ( '#myModal' ). on ( 'mostrar' , funció ( e ) {   
    si (! dades ) retorna e . preventDefault () // deixa de mostrar el modal   
})

Sobre les transicions

Per obtenir efectes de transició senzills, incloeu bootstrap-transition.js una vegada juntament amb els altres fitxers JS. Si utilitzeu el fitxer bootstrap.js compilat (o minificat), no cal incloure-ho, ja hi és.

Casos d'ús

Alguns exemples del connector de transició:

• Lliscant o esvaint en modals
• S'esvaeixen les pestanyes
• Desapareixen les alertes
• Vidres de carrusel lliscants

Exemples

Els modals són indicacions de diàleg simplificades, però flexibles amb la funcionalitat mínima necessària i els valors predeterminats intel·ligents.

Exemple estàtic

Un modal representat amb la capçalera, el cos i el conjunt d'accions al peu de pàgina.

<div class = "esvaïment d'ocultació modal" > 
  <div class = "capçalera-modal" > 
    <button type = "button" class = "tancar" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Capçalera modal </h3>
  </div>
  <div class = "cos modal" > 
    <p> Un bon cos... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tanca </a>  
    <a href = "#" class = "btn btn-primary" > Desa els canvis </a>  
  </div>
</div>

Demo en directe

Commuteu un modal mitjançant JavaScript fent clic al botó següent. Es lliscarà cap avall i s'esvaeix des de la part superior de la pàgina.

<-- Botó per activar el modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Llança la demostració modal </a>    
 
<-- Modal -->
<div class = "modal" id = "myModal" tabindex = " -1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "capçalera-modal" > 
    <button type = "button" class = "tancar" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Capçalera modal </h3> 
  </div>
  <div class = "cos modal" > 
    <p> Un bon cos... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tanca </button>   
    <button class = "btn btn-primary" > Desa els canvis </button> 
  </div>
</div>

Ús

Mitjançant atributs de dades

Activa un modal sense escriure JavaScript. Estableix data-toggle="modal"en un element del controlador, com un botó, juntament amb un data-target="#foo"o href="#foo"per orientar un modal específic per alternar.

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

Mitjançant JavaScript

Truqueu a un modal amb id myModalamb una sola línia de JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-backdrop="".

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

Mètodes

.modal (opcions)

Activa el teu contingut com a modal. Accepta opcions opcionals object.

$ ( '#myModal' ). modal ({
  teclat : fals 
})

.modal('canviar')

Commuta manualment un modal.

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

.modal('mostrar')

Obre manualment un modal.

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

.modal('amagar')

Amaga manualment un modal.

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

Esdeveniments

La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal.

$ ( '#myModal' ). on ( 'amagat' , funció () {   
  // fer quelcom…
})

Exemples

Afegiu menús desplegables a gairebé qualsevol cosa amb aquest connector senzill, incloses la barra de navegació, les pestanyes i les píndoles.

Dins d'una barra de navegació

Dins de les pestanyes

Ús

Mitjançant atributs de dades

Afegeix data-toggle="dropdown"a un enllaç o un botó per canviar un menú desplegable.

<div class = "menú desplegable" > 
  <a class = "dropdown-toggle" href = "#" > Activador desplegable </a>  
  <ul class = "menú desplegable" rol = "menú" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Per mantenir intactes els URL, utilitzeu l' data-targetatribut en lloc de href="#".

<div class = "menú desplegable" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Menú desplegable
    <b class = "caret" ></b> 
  </a>
  <ul class = "menú desplegable" rol = "menú" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Mitjançant JavaScript

Truqueu als menús desplegables mitjançant JavaScript:

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

Opcions

Cap

Mètodes

$().menjador desplegable()

Una API programàtica per activar menús per a una determinada barra de navegació o navegació per pestanyes.

Exemple a la barra de navegació

El connector ScrollSpy serveix per actualitzar automàticament els objectius de navegació en funció de la posició del desplaçament. Desplaceu-vos per l'àrea de sota de la barra de navegació i observeu el canvi de classe activa. També es destacaran els subelements desplegables.

Ús

Mitjançant atributs de dades

Per afegir fàcilment un comportament scrollspy a la vostra navegació de la barra superior, només cal data-spy="scroll"que afegiu l'element que voleu espiar (normalment aquest seria el cos) i data-target=".navbar"seleccioneu quin navegador utilitzar. Voleu utilitzar scrollspy amb un .navcomponent.

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

Mitjançant JavaScript

Truqueu al scrollspy mitjançant JavaScript:

$ ( '#navbar' ). scrollspy ()

Mètodes

.scrollspy('actualitzar')

Quan utilitzeu scrollspy juntament amb l'addició o eliminació d'elements del DOM, haureu de cridar el mètode d'actualització de la següent manera:

$ ( '[data-spy="scroll"]' ). cada ( funció () {  
  var $spy = $ ( això ). scrollspy ( 'actualitzar' )
});

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset="".

Esdeveniments

Pestanyes d'exemple

Afegiu una funcionalitat de pestanya ràpida i dinàmica per passar pels panells de contingut local, fins i tot mitjançant menús desplegables.

Ús

Activa les pestanyes amb tabulació mitjançant JavaScript (cada pestanya s'ha d'activar individualment):

$ ( '#myTab a' ). feu clic ( funció ( e ) {  
  e . preventDefault ();
  $ ( això ). pestanya ( 'mostrar' );
})

Podeu activar pestanyes individuals de diverses maneres:

$ ( '#myTab a[href="#profile"]' ). pestanya ( 'mostrar' ); // Seleccioneu la pestanya pel nom 
$ ( '#myTab a:first' ). pestanya ( 'mostrar' ); // Seleccioneu la primera pestanya 
$ ( '#myTab a:last' ). pestanya ( 'mostrar' ); // Seleccioneu l'última pestanya 
$ ( '#myTab li:eq(2) a' ). pestanya ( 'mostrar' ); // Seleccioneu la tercera pestanya (indexada 0) 

Marcatge

Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement especificant data-toggle="tab"o data-toggle="pill"en un element. Si afegiu les classes navi a la pestanya , s'aplicarà l'estil de la pestanya Bootstrap.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Inici </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Missatges </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Configuració </a></li>  
</ul>

Mètodes

$().tab

Activa un element de pestanya i un contenidor. La pestanya hauria de tenir un node de contenidor data-targeto una hreforientació al DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Inici </a></li>  
  <li><a href = "#profile" > Perfil </a></li> 
  <li><a href = "#messages" > Missatges </a></li> 
  <li><a href = "#settings" > Configuració </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pae active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "perfil" > ... </div>  
  <div class = "tab-pane" id = "missatges" > ... </div>  
  <div class = "tab-pane" id = "configuració" > ... </div>  
</div>
 
<script>
  $ ( funció () {  
    $ ( '#myTab a:last' ). pestanya ( 'mostrar' );
  })
</script>

Esdeveniments

$ ( 'a[data-toggle="tab"]' ). on ( 'mostrat' , funció ( e ) {   
  e . target // pestanya activada
  e . relatedTarget // pestanya anterior
})

Exemples

Inspirat en l'excel·lent connector jQuery.tipsy escrit per Jason Frame; Els consells sobre eines són una versió actualitzada, que no es basen en imatges, utilitza CSS3 per a animacions i atributs de dades per a l'emmagatzematge de títols locals.

Passeu el cursor per sobre dels enllaços següents per veure els consells sobre eines:

Quatre direccions

Ús

Activa la informació sobre eines mitjançant JavaScript:

$ ( '#exemple' ). informació sobre eines ( opcions )

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Marcatge

Per raons de rendiment, la informació sobre eines i l'apis de dades emergents estan activades. Si voleu utilitzar-les, només heu d'especificar una opció de selecció.

<a href = "#" rel = "tooltip" title = "primer tooltip" > passa el cursor per sobre meu </a>   

Mètodes

$().tooltip(opcions)

Adjunta un controlador d'informació eines a una col·lecció d'elements.

.tooltip('mostra')

Revela la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'mostra' )

.tooltip('amaga')

Amaga la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'amaga' )

.tooltip('canviar')

Commuta la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'commuta' )

.tooltip('destrueix')

Amaga i destrueix la informació sobre eines d'un element.

$ ( '#element' ). informació sobre eines ( 'destrueix' )

Exemples

Afegiu petites superposicions de contingut, com les de l'iPad, a qualsevol element per allotjar informació secundària. Passeu el cursor per sobre del botó per activar el popover. Requereix que s'inclogui Tooltip .

Popover estàtic

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra.

No es mostra cap marcatge perquè es generen finestres emergents a partir de JavaScript i el contingut d'un dataatribut.

Demo en directe

Ús

Activa les finestres emergents mitjançant JavaScript:

$ ( '#exemple' ). popover ( opcions )

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Marcatge

Per raons de rendiment, la informació sobre eines i l'apis de dades emergents estan activades. Si voleu utilitzar-les, només heu d'especificar una opció de selecció.

Mètodes

$().popover(opcions)

Inicialitza les finestres emergents per a una col·lecció d'elements.

.popover('mostra')

Revela un popover d'elements.

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

.popover('amagar')

Amaga una finestra emergent d'elements.

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

.popover('canviar')

Activa o desactiva una finestra emergent d'elements.

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

.popover('destrueix')

Amaga i destrueix el popover d'un element.

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

Alertes d'exemple

Afegiu la funcionalitat de descartar a tots els missatges d'al·lèrgia amb aquest connector.

Ús

Activa l'eliminació d'una alerta mitjançant JavaScript:

$ ( ".alerta" ). alerta ()

Marcatge

Només heu d'afegir data-dismiss="alert"al vostre botó de tancament per donar automàticament una funcionalitat de tancament d'alerta.

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

Mètodes

$().alert()

Embolcalla totes les alertes amb una funcionalitat propera. Perquè les vostres alertes s'animin quan estiguin tancades, assegureu-vos que ja tenen la classe .fadei .inaplicada.

.alert('tancar')

Tanca una alerta.

$ ( ".alerta" ). alerta ( 'tancar' )

Esdeveniments

La classe d'alerta de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat d'alerta.

$ ( '#la meva-alerta' ). bind ( 'tancat' , funció () {   
  // fer quelcom…
})

Exemples d'usos

Fes més amb els botons. Controla els estats dels botons o crea grups de botons per a més components com ara barres d'eines.

Estatal

Afegiu data-loading-text="S'està carregant..." per utilitzar un estat de càrrega en un botó.

<button type = "button" class = "btn btn-primary" data-loading-text = "S'està carregant..." > Estat de càrrega </button>   

Canvi únic

Afegiu data-toggle="button" per activar la commutació en un sol botó.

<button type = "button" class = "btn" data-toggle = "button" > Canvi únic </button>   

casella de selecció

Afegiu data-toggle="buttons-checkbox" per canviar l'estil de la casella de selecció a btn-group.

<div class = "btn-group" data-toggle = "bottons-checkbox" >  
  <button type = "button" class = "btn" > Esquerra </button>  
  <button type = "button" class = "btn" > Mitjà </button>  
  <button type = "button" class = "btn" > Dreta </button>  
</div>

Ràdio

Afegiu data-toggle="buttons-radio" per canviar l'estil de ràdio a btn-group.

<div class = "btn-group" data-toggle = "botons-ràdio" >  
  <button type = "button" class = "btn" > Esquerra </button>  
  <button type = "button" class = "btn" > Mitjà </button>  
  <button type = "button" class = "btn" > Dreta </button>  
</div>

Ús

Activa els botons mitjançant JavaScript:

$ ( '.nav-tabs' ). botó ()

Marcatge

Els atributs de dades són integrals al connector del botó. Consulteu el codi d'exemple següent per als diferents tipus de marques.

Opcions

Cap

Mètodes

$().button('canviar')

Commuta l'estat push. Dóna al botó l'aspecte que s'ha activat.

<button type = "button" class = "btn" data-toggle = "botó" > … </button>    

$().button('carregant')

Estableix l'estat del botó a la càrrega: desactiva el botó i canvia el text al text de càrrega. El text de càrrega s'ha de definir a l'element botó mitjançant l'atribut de dades data-loading-text.

<button type = "button" class = "btn" data-loading-text = "carregant coses..." > ... </button>    

$().button('restableix')

Restableix l'estat del botó: canvia el text pel text original.

$().button(cadena)

Restableix l'estat del botó: canvia el text a qualsevol estat de text definit amb dades.

<button type = "button" class = "btn" data-complete-text = "acabat!" > ... </button>    
<script>
  $ ( '.btn' ). botó ( 'complet' )
</script>

Sobre

Obteniu estils bàsics i suport flexible per a components plegables com els acordions i la navegació.

* Cal que s'inclogui el connector Transitions.

Exemple d'acordió

Utilitzant el connector de col·lapse, vam crear un giny senzill d'estil acordió:

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  simple plegable
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Ús

Mitjançant atributs de dades

Només cal afegir data-toggle="collapse"i data-targeta l'element per assignar automàticament el control d'un element plegable. L' data-targetatribut accepta un selector de css per aplicar el col·lapse. Assegureu-vos d'afegir la classe collapsea l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional in.

Per afegir una gestió de grups semblant a un acordió a un control plegable, afegiu l'atribut de dades data-parent="#selector". Consulteu la demostració per veure-ho en acció.

Mitjançant JavaScript

Habilita manualment amb:

$ ( ".collapse" ). col·lapsar ()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-parent="".

Mètodes

.collapse(opcions)

Activa el teu contingut com a element plegable. Accepta opcions opcionals object.

$ ( '#myCollapsible' ). col·lapse ({
  alternar : fals 
})

.collapse('canviar')

Commuta un element plegable per mostrar-lo o amagar-lo.

.collapse('mostra')

Mostra un element plegable.

.collapse('amagar')

Amaga un element plegable.

Esdeveniments

La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.

$ ( '#myCollapsible' ). on ( 'amagat' , funció () {   
  // fer quelcom…
})

Exemple de carrusel

La presentació de diapositives següent mostra un complement i un component genèrics per recórrer elements com un carrusel.

Primera etiqueta de miniatura

Cras justo odio, dapibus ac facilitis 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.

‹ ›

<div id = "myCarousel" class = "diapositiva del carrusel" >  
  <!-- Elements del carrusel -->
  <div class = "carrusel-interior" > 
    <div class = "element actiu" > … </div> 
    <div class = "element" > … </div> 
    <div class = "element" > … </div> 
  </div>
  <!-- Navegació del carrusel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "anterior" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "següent" > › </a>   
</div>

Ús

Mitjançant atributs de dades

...

Mitjançant JavaScript

Truqueu manualment al carrusel amb:

$ ( '.carrusel' ). carrusel ()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-interval="".

Mètodes

.carrusel (opcions)

Inicialitza el carrusel amb opcions opcionals objecti comença a circular pels elements.

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

.carousel('cicle')

Recorre els elements del carrusel d'esquerra a dreta.

.carousel('pausa')

Impedeix que el carrusel circuli per elements.

.carrusel(número)

Cicle el carrusel a un fotograma concret (basat en 0, similar a una matriu).

.carousel('anterior')

Cicles a l'element anterior.

.carousel('següent')

Passa a l'element següent.

Esdeveniments

La classe de carrusel de Bootstrap exposa dos esdeveniments per connectar-se a la funcionalitat del carrusel.

Exemple

Un connector bàsic i fàcil d'ampliar per crear ràpidament capes de lletra elegants amb qualsevol entrada de text de formulari.

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

Ús

Mitjançant atributs de dades

Afegiu atributs de dades per registrar un element amb la funcionalitat typeahead tal com es mostra a l'exemple anterior.

Mitjançant JavaScript

Truqueu al typeahead manualment amb:

$ ( '.typeahead' ). escriviu ()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-source="".

Mètodes

.typeahead(opcions)

Inicialitza una entrada amb una tipografia.

Exemple

La subnavegació de l'esquerra és una demostració en directe del connector afix.

Ús

Mitjançant atributs de dades

Per afegir fàcilment un comportament d'afixos a qualsevol element, només cal que afegiu data-spy="affix"-lo a l'element que voleu espiar. A continuació, utilitzeu els desplaçaments per definir quan activar i desactivar la fixació d'un element.

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

Mitjançant JavaScript

Truqueu al connector d'afix mitjançant JavaScript:

$ ( '#navbar' ). afix ()

Mètodes

.affix('actualitzar')

Quan utilitzeu afix juntament amb l'addició o eliminació d'elements del DOM, voldreu cridar el mètode d'actualització:

$ ( '[data-spy="affix"]' ). cada ( funció () {  
  $ ( això ). afix ( 'actualitzar' )
});

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset-top="200".