JavaScript

Doneu vida als components de Bootstrap, ara amb 13 connectors de jQuery personalitzats.

Individual o compilat

Els connectors es poden incloure individualment (encara que alguns tenen dependències necessàries) o tots alhora. Tant bootstrap.js com bootstrap.min.js contenen tots els connectors en un sol fitxer.

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

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

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

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

  1. $ ( "#myModal" ). modal () // inicialitzat amb valors per defecte
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // inicialitzat sense teclat
  3. $ ( "#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').

Sense conflicte

De vegades és necessari utilitzar connectors Bootstrap amb altres marcs d'interfície d'usuari. En aquestes circumstàncies, ocasionalment es poden produir col·lisions d'espais de noms. Si això passa, podeu trucar .noConflictal connector del qual voleu revertir el valor.

  1. var bootstrapButton = $ . fn . botó . noConflict () // retorna $.fn.button al valor assignat anteriorment
  2. $ . fn . bootstrapBtn = bootstrapButton // dóna a $().bootstrapBtn la funcionalitat d'arrencada

Esdeveniments

Bootstrap ofereix esdeveniments personalitzats per a la majoria de les accions úniques del connector. Generalment, aquests 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 possibilitat d'aturar l'execució d'una acció abans que comenci.

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

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.

  1. <div class = "esvaïment d'ocultació modal" >
  2. <div class = "capçalera-modal" >
  3. <button type = "button" class = "tancar" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Capçalera modal </h3>
  5. </div>
  6. <div class = "cos modal" >
  7. <p> Un bon cos... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Tanca </a>
  11. <a href = "#" class = "btn btn-primary" > Desa els canvis </a>
  12. </div>
  13. </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.

  1. <!-- Botó per activar el modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Llança la demostració modal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "capçalera-modal" >
  7. <button type = "button" class = "tancar" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Capçalera modal </h3>
  9. </div>
  10. <div class = "cos modal" >
  11. <p> Un bon cos... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tanca </button>
  15. <button class = "btn btn-primary" > Desa els canvis </button>
  16. </div>
  17. </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.

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

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

Nom tipus per defecte descripció
teló de fons booleà veritat Inclou un element de fons modal. Alternativament, especifiqueu staticun teló de fons que no tanqui el modal en fer clic.
teclat booleà veritat Tanca el modal quan es prem la tecla d'escapament
espectacle booleà veritat Mostra el modal quan s'inicialitza.
remot Camí fals

Si es proporciona una URL remota, el contingut es carregarà mitjançant el loadmètode de jQuery i s'injectarà al fitxer .modal-body. Si utilitzeu l'API de dades, també podeu utilitzar l' hrefetiqueta per especificar la font remota. A continuació es mostra un exemple d'això:

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

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

.modal('canviar')

Commuta manualment un modal.

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

.modal('mostrar')

Obre manualment un modal.

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

.modal('amagar')

Amaga manualment un modal.

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

Esdeveniments

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

Esdeveniment Descripció
espectacle Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat Aquest esdeveniment s'activa quan el modal s'ha fet visible per a l'usuari (esperarà que es completin les transicions CSS).
amagar Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
amagat Aquest esdeveniment s'activa quan el modal s'ha acabat d'ocultar a l'usuari (esperarà que es completin les transicions CSS).
  1. $ ( '#myModal' ). on ( 'amagat' , funció () {
  2. // fer quelcom…
  3. })

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.

@greix

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi abans que s'esgotin qui. Tumblr drets de la bicicleta de la granja a la taula qualsevol. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 llop lluna irure. Suèter Cosby pantalons curts de texans lomo, dessuadora amb caputxa de williamsburg mínim qui probablement no n'has sentit a parlar i cardigan trust fund culpa biodièsel wes anderson estètica. Nihil tatuat acusamus, cred ironia biodièsel keffiyeh artesà ullamco consequat.

@mdo

Veniam marfa bigoti monopatí, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camió de menjar amb jersei cosby tatuat, vinil quis no freegan de mcsweeney. Lo-fi wes anderson +1 sartorial. Carles no exercici estètic quis gentrify. Brooklyn adipisicing cervesa artesana vice keytar desert.

un

Occaecat commodo aliqua delectus. Fap cervesa artesana deserunt monopatí ea. Lomo bicycle rights adipisicing banh mi, velit ea are next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS és adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, delectus sostenible consectetur fanny pack iphone.

dos

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica clixé ironia, thundercats probablement no n'hagueu sentit a parlar consequat hoodie sense gluten lo-fi fap aliquip. Treballa el lloc abans que s'esgotin, terry richardson proident brunch no s'ha d'aconseguir un jersei cosby igual que un artesà helvètic. Cardigan cervesa artesana seitan readymade velit. VHS cambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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

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

Mitjançant JavaScript

Truqueu al scrollspy mitjançant JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Caps amunt! Els enllaços de la barra de navegació han de tenir objectius d'identificació resolubles. Per exemple, un <a href="#home">home</a>ha de correspondre a alguna cosa del dom com <div id="home"></div>.

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:

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

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

Nom tipus per defecte descripció
compensació nombre 10 Píxels a compensar des de la part superior quan es calcula la posició del desplaçament.

Esdeveniments

Esdeveniment Descripció
activar Aquest esdeveniment s'activa cada vegada que el scrollspy activa un element nou.

Pestanyes d'exemple

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

Denim cru, probablement no has sentit parlar d'ells, Austin. Nesciunt tofu stumptown aliqua, neteja mestre de sintetitzadors retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Ús

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

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

Podeu activar pestanyes individuals de diverses maneres:

  1. $ ( '#myTab a[href="#profile"]' ). pestanya ( 'mostrar' ); // Seleccioneu la pestanya pel nom
  2. $ ( '#myTab a:first' ). pestanya ( 'mostrar' ); // Seleccioneu la primera pestanya
  3. $ ( '#myTab a:last' ). pestanya ( 'mostrar' ); // Seleccioneu l'última pestanya
  4. $ ( '#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

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Inici </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Missatges </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Configuració </a></li>
  6. </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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Inici </a></li>
  3. <li><a href = "#profile" > Perfil </a></li>
  4. <li><a href = "#messages" > Missatges </a></li>
  5. <li><a href = "#settings" > Configuració </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pae active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "perfil" > ... </div>
  11. <div class = "tab-pane" id = "missatges" > ... </div>
  12. <div class = "tab-pane" id = "configuració" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funció () {
  17. $ ( '#myTab a:last' ). pestanya ( 'mostrar' );
  18. })
  19. </script>

Esdeveniments

Esdeveniment Descripció
espectacle Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
mostrat Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'mostrat' , funció ( e ) {
  2. e . target // pestanya activada
  3. e . relatedTarget // pestanya anterior
  4. })

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.

Per raons de rendiment, la informació sobre eines i les API de dades emergents estan activades, és a dir, les heu d'inicialitzar vosaltres mateixos .

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

Pantalons ajustats keffiyeh del següent nivell , probablement no n'hagueu sentit a parlar. Photo Booth barba denim cru tipografia bossa de missatgeria vegana stumptown. Seitan de granja a taula, la roba americana de quinoa sostenible de 8 bits fixie de mcsweeney té un cambray de vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodièsel williamsburg marfa, quatre loko mcsweeney's cleanse vegan chambray. Un artesà realment irònic , sigui quin sigui el keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origen únic viral.

Quatre direccions

Consells d'eines en grups d'entrada

Quan utilitzeu informació sobre eines i finestres emergents amb els grups d'entrada de Bootstrap, haureu d'establir l' containeropció (documentada a continuació) per evitar efectes secundaris no desitjats.


Ús

Activa la informació sobre eines mitjançant JavaScript:

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

Nom tipus per defecte descripció
animació booleà veritat apliqueu una transició d'esvaïment CSS a la informació sobre eines
html booleà fals Inseriu html a la informació sobre eines. Si és fals, texts'utilitzarà el mètode de jquery per inserir contingut al dom. Utilitzeu text si us preocupen els atacs XSS.
col·locació cadena | funció 'superior' com posicionar la informació sobre eines - superior | baix | esquerra | dret
selector corda fals Si es proporciona un selector, els objectes d'informació eines es delegaran als objectius especificats.
títol cadena | funció '' valor de títol predeterminat si l'etiqueta `title` no està present
disparador corda 'enfocament al ratolí' com s'activa la informació sobre eines - feu clic a | flotar | focus | manual. Tingueu en compte que passeu l'activador de diversos tipus, separats per espais i tipus d'activador.
retard nombre | objecte 0

retard en mostrar i amagar la informació sobre eines (ms): no s'aplica al tipus d'activador manual

Si es proporciona un número, s'aplica un retard tant per ocultar com per mostrar

L'estructura de l'objecte és:delay: { show: 500, hide: 100 }

contenidor cadena | fals fals

Afegeix la informació sobre eines a un element específiccontainer: 'body'

Caps amunt! Les opcions per a les instruccions individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades.

Marcatge

  1. <a href = "#" data-toggle = "tooltip" title = "primera informació sobre eines" > 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.

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

.tooltip('amaga')

Amaga la informació sobre eines d'un element.

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

.tooltip('canviar')

Commuta la informació sobre eines d'un element.

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

.tooltip('destrueix')

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

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

Cap sobre popover

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

Popover a la dreta

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

Popover inferior

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

Popover a l'esquerra

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

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

Demo en directe

Quatre direccions


Ús

Activa les finestres emergents mitjançant JavaScript:

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

Nom tipus per defecte descripció
animació booleà veritat apliqueu una transició d'esvaïment CSS a la informació sobre eines
html booleà fals Insereix html a la finestra emergent. Si és fals, texts'utilitzarà el mètode de jquery per inserir contingut al dom. Utilitzeu text si us preocupen els atacs XSS.
col·locació cadena | funció 'dret' com posicionar el popover - superior | baix | esquerra | dret
selector corda fals si es proporciona un selector, els objectes d'informació eines es delegaran als objectius especificats
disparador corda 'clic' com s'activa el popover - feu clic a | flotar | focus | manual
títol cadena | funció '' valor de títol predeterminat si l'atribut `title` no està present
contingut cadena | funció '' valor de contingut per defecte si l'atribut `data-content` no està present
retard nombre | objecte 0

retard en mostrar i amagar la finestra emergent (ms): no s'aplica al tipus d'activador manual

Si es proporciona un número, s'aplica un retard tant per ocultar com per mostrar

L'estructura de l'objecte és:delay: { show: 500, hide: 100 }

contenidor cadena | fals fals

Afegeix la finestra emergent a un element específiccontainer: 'body'

Caps amunt! Les opcions per a popovers individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades.

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.

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

.popover('amagar')

Amaga una finestra emergent d'elements.

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

.popover('canviar')

Activa o desactiva una finestra emergent d'elements.

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

.popover('destrueix')

Amaga i destrueix el popover d'un element.

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

Alertes d'exemple

Afegiu la funcionalitat de descartar a tots els missatges d'alerta amb aquest connector.

Sant guacamole! Millor comproveu-vos, no teniu massa bona pinta.

Oh snap! Tens un error!

Canvia això i allò i torna-ho a provar. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Feu aquesta acció O fes això


Ús

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

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

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

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

Esdeveniments

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

Esdeveniment Descripció
Tanca Aquest esdeveniment s'activa immediatament quan closees crida al mètode d'instància.
tancat Aquest esdeveniment s'activa quan l'alerta s'ha tancat (esperarà que finalitzin les transicions CSS).
  1. $ ( '#la meva-alerta' ). bind ( 'tancat' , funció () {
  2. // fer quelcom…
  3. })

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

Afegeix data-loading-text="Loading..."per utilitzar un estat de càrrega en un botó.

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

Canvi únic

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

  1. <button type = "button" class = "btn btn-primary" 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.

  1. <div class = "btn-group" data-toggle = "bottons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Esquerra </button>
  3. <button type = "button" class = "btn btn-primary" > Mitjà </button>
  4. <button type = "button" class = "btn btn-primary" > Dreta </button>
  5. </div>

Ràdio

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

  1. <div class = "btn-group" data-toggle = "botons-ràdio" >
  2. <button type = "button" class = "btn btn-primary" > Esquerra </button>
  3. <button type = "button" class = "btn btn-primary" > Mitjà </button>
  4. <button type = "button" class = "btn btn-primary" > Dreta </button>
  5. </div>

Ús

Activa els botons mitjançant JavaScript:

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

Caps amunt! Podeu activar la commutació automàtica d'un botó mitjançant l' data-toggleatribut.
  1. <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.

  1. <button type = "button" class = "btn" data-loading-text = "carregant coses..." > ... </button>
Caps amunt! El Firefox manté l'estat desactivat durant les càrregues de pàgines . Una solució alternativa és utilitzar autocomplete="off".

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

  1. <button type = "button" class = "btn" data-complete-text = "acabat!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). botó ( 'complet' )
  4. </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ó:

Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus labore sostenible VHS.
Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus labore sostenible VHS.
Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus labore sostenible VHS.
  1. <div class = "acordió" id = "acordió2" >
  2. <div class = "grup d'acordió" >
  3. <div class = "acordió-capçalera" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Element de grup plegable #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "Cos d'acordió col·lapse" >
  9. <div class = "acordió-interior" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "grup d'acordió" >
  15. <div class = "acordió-capçalera" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Element de grup plegable núm. 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "collapse del cos d'acordió" >
  21. <div class = "acordió-interior" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

També podeu utilitzar el connector sense el marcatge d'acordió. Feu que un botó commuti l'expansió i el replegament d'un altre element.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. simple plegable
  3. </button>
  4.  
  5. <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:

  1. $ ( ".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="".

Nom tipus per defecte descripció
pare selector fals Si selector, tots els elements plegables sota el pare especificat es tancaran quan es mostri aquest element plegable. (semblant al comportament tradicional d'acordió)
alternar booleà veritat Activa o desactiva l'element plegable en invocació

Mètodes

.collapse(opcions)

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

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

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

Esdeveniment Descripció
espectacle Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat Aquest esdeveniment s'activa quan un element de col·lapse s'ha fet visible per a l'usuari (esperarà que es completin les transicions CSS).
amagar Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode.
amagat Aquest esdeveniment s'activa quan s'ha amagat un element de col·lapse per a l'usuari (esperarà que finalitzin les transicions CSS).
  1. $ ( '#myCollapsible' ). on ( 'amagat' , funció () {
  2. // fer quelcom…
  3. })

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.

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

Voleu configurar autocomplete="off"per evitar que els menús del navegador predeterminats apareguin al menú desplegable Bootstrap 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:

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

Nom tipus per defecte descripció
font matriu, funció [ ] La font de dades per a la consulta. Pot ser una matriu de cadenes o una funció. A la funció se li passen dos arguments, el queryvalor del camp d'entrada i la processdevolució de trucada. La funció es pot utilitzar de manera síncrona retornant la font de dades directament o de manera asíncrona mitjançant l' processúnic argument de la devolució de trucada.
elements nombre 8 El nombre màxim d'elements per mostrar al menú desplegable.
minLongitud nombre 1 La longitud mínima de caràcters necessària abans d'activar els suggeriments d'emplenament automàtic
emparellador funció cas insensible El mètode utilitzat per determinar si una consulta coincideix amb un element. Accepta un sol argument, itemamb el qual provar la consulta. Accediu a la consulta actual amb this.query. Retorna un valor booleà truesi la consulta coincideix.
classificador funció concordança exacta,
distingeix entre majúscules i minúscules, no distingeix entre
majúscules i minúscules
Mètode utilitzat per ordenar els resultats d'autocompletar. Accepta un sol argument itemsi té l'abast de la instància typeahead. Feu referència a la consulta actual amb this.query.
actualitzador funció retorna l'element seleccionat El mètode utilitzat per retornar l'element seleccionat. Accepta un sol argument, el itemi té l'abast de la instància typeahead.
subratllador funció ressalta totes les coincidències predeterminades Mètode utilitzat per destacar els resultats d'autocompletar. Accepta un sol argument itemi té l'abast de la instància typeahead. Hauria de tornar html.

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.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Caps amunt! Heu de gestionar la posició d'un element fixat i el comportament del seu pare immediat. La posició està controlada per affix, affix-top, i affix-bottom. Recordeu comprovar si hi ha un pare potencialment col·lapsat quan s'iniciï l'afix, ja que elimina contingut del flux normal de la pàgina.

Mitjançant JavaScript

Truqueu al connector d'afix mitjançant JavaScript:

  1. $ ( '#navbar' ). afix ()

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

Nom tipus per defecte descripció
compensació nombre | funció | objecte 10 Píxels a compensar de la pantalla en calcular la posició del desplaçament. Si es proporciona un sol número, el desplaçament s'aplicarà tant a la part superior com a l'esquerra. Per escoltar una sola direcció o diversos desplaçaments únics, només cal que proporcioneu un objecte offset: { x: 10 }. Utilitzeu una funció quan necessiteu proporcionar una compensació dinàmica (útil per a alguns dissenys sensibles).