JavaScript para Bootstrap

Haga que los componentes de Bootstrap cobren vida, ahora con 12 complementos jQuery personalizados.

modales

Una versión simplificada, pero flexible, del complemento modal de javascript tradicional con solo la funcionalidad mínima requerida y valores predeterminados inteligentes.

Listas deplegables

Agregue menús desplegables a casi cualquier cosa en Bootstrap con este complemento simple. Bootstrap presenta soporte de menú desplegable completo en la barra de navegación, pestañas y píldoras.

Desplazamiento

Use scrollspy para actualizar automáticamente los enlaces en su barra de navegación para mostrar el enlace activo actual según la posición de desplazamiento.

Pestañas conmutables

Use este complemento para hacer que las pestañas y las píldoras sean más útiles al permitirles alternar entre los paneles tabulados de contenido local.

Información sobre herramientas

La información sobre herramientas, una nueva versión del complemento jQuery Tipsy, no se basa en imágenes: utiliza CSS3 para animaciones y atributos de datos para el almacenamiento local de títulos.

Popovers *

Agregue pequeñas superposiciones de contenido, como las del iPad, a cualquier elemento para albergar información secundaria.

* Requiere información sobre herramientas para ser incluido

Mensajes de alerta

El complemento de alerta es una clase pequeña para agregar una funcionalidad cercana a las alertas.

Botones

Haz más con los botones. Controle los estados de los botones o cree grupos de botones para más componentes, como barras de herramientas.

Colapsar

Obtenga estilos básicos y soporte flexible para componentes plegables como acordeones y navegación.

Carrusel

Cree un tiovivo de cualquier contenido que desee proporcionar una presentación de diapositivas interactiva de contenido.

Escritura anticipada

Un complemento básico y fácilmente ampliable para crear rápidamente mecanografiados elegantes con cualquier tipo de entrada de texto.

Transiciones *

Para efectos de transición simples, incluya bootstrap-transition.js una vez para deslizar modales o atenuar alertas.

* Requerido para animación en complementos

¡Aviso! Todos los complementos de JavaScript requieren la última versión de jQuery.

Acerca de los modales

Una versión simplificada, pero flexible, del complemento modal de javascript tradicional con solo la funcionalidad mínima requerida y valores predeterminados inteligentes.

Descargar archivo

Ejemplo estático

A continuación se muestra un modal renderizado estáticamente.

Demo en vivo

Alterne un modal a través de javascript haciendo clic en el botón a continuación. Se deslizará hacia abajo y se desvanecerá desde la parte superior de la página.

Lanzar modo de demostración

Usando bootstrap-modal

Llame al modal a través de javascript:

  1. $ ( '#miModal' ). modal ( opciones )

Opciones

Nombre escribe defecto descripción
fondo booleano verdadero Incluye un elemento de fondo modal. Alternativamente, especifique staticun fondo que no cierre el modal al hacer clic.
teclado booleano verdadero Cierra el modal cuando se presiona la tecla escape
mostrar booleano verdadero Muestra el modal cuando se inicializa.

Margen

Puede activar modales en su página fácilmente sin tener que escribir una sola línea de javascript. Simplemente configure data-toggle="modal"un elemento de controlador con un data-target="#foo"o href="#foo"que corresponda a una identificación de elemento modal, y cuando se haga clic, se iniciará su modal.

Además, para agregar opciones a su instancia modal, simplemente inclúyalas como atributos de datos adicionales en el elemento de control o en el propio marcado modal.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Iniciar modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. < clase div = "encabezado-modal" >
  3. < tipo de botón = "botón" clase = "cerrar" datos-descartar = "modal" > × </botón>
  4. <h3> Cabecera modal </h3>
  5. </div>
  6. <div clase = "cuerpo-modal" >
  7. <p> Un buen cuerpo... </p>
  8. </div>
  9. <div clase = "modal-pie de página" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Cerrar </a>
  11. <a href = "#" class = "btn btn-primary" > Guardar cambios </a>
  12. </div>
  13. </div>
¡Aviso! Si desea que su modal se anime dentro y fuera, simplemente agregue una .fadeclase al .modalelemento (consulte la demostración para ver esto en acción) e incluya bootstrap-transition.js.

Métodos

.modal(opciones)

Activa tu contenido como modal. Acepta opciones opcionales object.

  1. $ ( '#miModal' ). modales ({
  2. teclado : falso
  3. })

.modal('alternar')

Cambia manualmente un modal.

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

.modal('mostrar')

Abre manualmente un modal.

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

.modal('ocultar')

Oculta manualmente un modal.

  1. $ ( '#miModal' ). modal ( 'ocultar' )

Eventos

La clase modal de Bootstrap expone algunos eventos para conectarse a la funcionalidad modal.

Evento Descripción
mostrar Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones css).
ocultar Este evento se activa inmediatamente cuando hidese llama al método de instancia.
oculto Este evento se activa cuando el modal ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones css).
  1. $ ( '#miModal' ). en ( 'oculto' , función () {
  2. // hacer algo…
  3. })

El complemento ScrollSpy es para actualizar automáticamente los objetivos de navegación en función de la posición de desplazamiento.

Descargar archivo

Ejemplo de barra de navegación con scrollspy

Desplácese por el área a continuación y observe la actualización de navegación. Los subelementos desplegables también se resaltarán. ¡Intentalo!

@grasa

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antes de que se agotaran qui. Derechos de bicicleta de la granja a la mesa de Tumblr, lo que sea. Cárdigan anim keffiyeh carles. Cabina de fotos de velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui probablemente no hayas oído hablar de ellos et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuado accusamus, cred irony biodiesel keffiyeh artesano ullamco consequat.

@mdo

Veniam marfa bigote monopatín, adipisicing fugiat velit horca barba. Freegan barba aliqua cupidatat mcsweeney's vero. Cupidatat cuatro loko nisi, ea helvetica nulla carles. Camión de comida de suéter cosby tatuado, vinilo quis non freegan de mcsweeney. Lo-fi wes anderson +1 sastrería. Carles ejercicio no estético quis gentrify. Brooklyn adipisicing cerveza artesanal vice keytar deserunt.

una

Occaecat commodo aliqua delectus. Fap craft beer deserunt monopatín ea. Lomo bicicleta derechos adipisicing banh mi, velit ea sunt siguiente nivel locavore café de origen único en magna veniam. Vinilo de identificación de alta vida, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY bolso de mensajero mínimo. Cred ex in, sostenible delectus consectetur riñonera 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, bolsa de mensajero culpa marfa lo que sea camión de comida delectus. Sapiente sintetizador id asunción. Locavore sed helvetica cliché ironía, thundercats probablemente no hayas oído hablar de ellos consequat hoodie sin gluten lo-fi fap aliquip. Labore elit placeat antes de que se agotaran, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica craft. Cardigan cerveza artesana seitán readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Usando bootstrap-scrollspy.js

Llame al scrollspy a través de javascript:

  1. $ ( '#barra de navegación' ). scrollspy ()

Margen

Para agregar fácilmente el comportamiento de scrollspy a la navegación de la barra superior, simplemente agregue data-spy="scroll"el elemento que desea espiar (por lo general, este sería el cuerpo).

  1. <body data-spy = "desplazamiento" > ... </body>
¡Aviso! Los enlaces de la barra de navegación deben tener objetivos de identificación resolubles. Por ejemplo, a <a href="#home">home</a>debe corresponder a algo en el dom como <div id="home"></div>.

Métodos

.scrollspy('actualizar')

Cuando use scrollspy junto con la adición o eliminación de elementos del DOM, deberá llamar al método de actualización de la siguiente manera:

  1. $ ( '[data-spy="scroll"]' ). cada ( función () {
  2. var $espía = $ ( esto ). scrollspy ( 'actualizar' )
  3. });

Opciones

Nombre escribe defecto descripción
compensar número 10 Píxeles para compensar desde la parte superior al calcular la posición de desplazamiento.

Eventos

Evento Descripción
activar Este evento se activa cada vez que el scrollspy activa un nuevo elemento.

Este complemento agrega una funcionalidad rápida y dinámica de pestañas y píldoras para la transición a través del contenido local.

Descargar archivo

Pestañas de ejemplo

Haga clic en las pestañas a continuación para alternar entre paneles ocultos, incluso a través de menús desplegables.

Denim crudo, probablemente no hayas oído hablar de los shorts de jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Bigote cliché temporal, williamsburg carles vegan helvetica. Reprehenderit carnicero retro keffiyeh sintetizador atrapasueños. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ropa americana, carnicero 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.


Usando bootstrap-tab.js

Habilite las pestañas que se pueden tabular a través de javascript (cada pestaña debe activarse individualmente):

  1. $ ( '#myTab a' ). hacer clic ( función ( e ) {
  2. mi . prevenirPredeterminado ();
  3. $ ( esto ). tabulador ( 'mostrar' );
  4. })

Puede activar pestañas individuales de varias maneras:

  1. $ ( '#myTab a[href="#perfil"]' ). tabulador ( 'mostrar' ); // Seleccionar pestaña por nombre
  2. $ ( '#myTab a:first' ). tabulador ( 'mostrar' ); // Selecciona la primera pestaña
  3. $ ( '#myTab a: last' ). tabulador ( 'mostrar' ); //Seleccionar última pestaña
  4. $ ( '#miTab li:eq(2) a' ). tabulador ( 'mostrar' ); // Seleccione la tercera pestaña (0-indexado)

Margen

Puede activar una pestaña o una píldora de navegación sin escribir ningún javascript simplemente especificando data-toggle="tab"o data-toggle="pill"en un elemento. Agregar las clases navy a la pestaña aplicará el estilo de la pestaña de arranque.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Inicio </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>
  4. <li><a href = "#mensajes" data-toggle = "tab" > Mensajes </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Configuración </a></li>
  6. </ul>

Métodos

$().pestaña

Activa un elemento de pestaña y un contenedor de contenido. La pestaña debe tener un data-targeto un hrefnodo contenedor en el DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Inicio </a></li>
  3. <li><a href = "#perfil" > Perfil </a></li>
  4. <li><a href = "#mensajes" > Mensajes </a></li>
  5. <li><a href = "#settings" > Configuración </a></li>
  6. </ul>
  7.  
  8. < clase div = "contenido de la pestaña" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "perfil" > ... </div>
  11. <div clase = "panel de pestañas" id = "mensajes" > ... </div>
  12. <div clase = "panel de pestañas" id = "configuración" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( función () {
  17. $ ( '#myTab a: last' ). tabulador ( 'mostrar' );
  18. })
  19. </script>

Eventos

Evento Descripción
mostrar Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Use event.targety event.relatedTargetpara apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
mostrado Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Use event.targety event.relatedTargetpara apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
  1. $ ( 'a[cambio de datos="tab"]' ). en ( 'mostrado' , función ( e ) {
  2. mi . objetivo // pestaña activada
  3. mi . objetivo relacionado // pestaña anterior
  4. })

Acerca de la información sobre herramientas

Inspirado en el excelente complemento jQuery.tipsy escrito por Jason Frame; La información sobre herramientas es una versión actualizada, que no se basa en imágenes, usa css3 para animaciones y atributos de datos para el almacenamiento local de títulos.

Descargar archivo

Ejemplo de uso de información sobre herramientas

Pase el cursor sobre los enlaces a continuación para ver información sobre herramientas:

Pantalones ajustados al siguiente nivel keffiyeh , probablemente no hayas oído hablar de ellos. Bolso bandolera vegano tipo fotomatón con barba en denim crudo stumptown. El seitán de la granja a la mesa, la ropa americana de 8 bits de quinoa sostenible fixie de mcsweeney tiene un cambray de vinilo terry richardson. Beard stumptown, cárdigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, cuatro loko mcsweeney's cleanse vegan chambray. Un artesano realmente irónico sea cual sea el keytar , scenester de la granja a la mesa .


Usando bootstrap-tooltip.js

Active la información sobre herramientas a través de javascript:

  1. $ ( '#ejemplo' ). información sobre herramientas ( opciones )

Opciones

Nombre escribe defecto descripción
animación booleano verdadero aplicar una transición de fundido css a la información sobre herramientas
colocación cadena|función 'parte superior' cómo colocar la información sobre herramientas - parte superior | fondo | izquierda | Correcto
selector cuerda falso Si se proporciona un selector, los objetos de información sobre herramientas se delegarán a los destinos especificados.
título cadena | función '' valor de título predeterminado si la etiqueta `título` no está presente
generar cuerda 'flotar' cómo se activa la información sobre herramientas - hover | enfoque | manual
demora número | objeto 0

retraso en mostrar y ocultar la información sobre herramientas (ms) - no se aplica al tipo de disparo manual

Si se proporciona un número, la demora se aplica tanto para ocultar/mostrar

La estructura del objeto es:delay: { show: 500, hide: 100 }

¡Aviso! Las opciones para información sobre herramientas individuales se pueden especificar alternativamente mediante el uso de atributos de datos.

Margen

Por motivos de rendimiento, las API de información sobre herramientas y ventana emergente están habilitadas. Si desea utilizarlas, simplemente especifique una opción de selección.

  1. <a href = "#" rel = "información sobre herramientas" title = "primera información sobre herramientas" > pasa el cursor sobre mí </a>

Métodos

$().información sobre herramientas(opciones)

Adjunta un controlador de información sobre herramientas a una colección de elementos.

.tooltip('mostrar')

Revela la información sobre herramientas de un elemento.

  1. $ ( '#elemento' ). información sobre herramientas ( 'mostrar' )

.tooltip('ocultar')

Oculta la información sobre herramientas de un elemento.

  1. $ ( '#elemento' ). información sobre herramientas ( 'ocultar' )

.tooltip('alternar')

Alterna la información sobre herramientas de un elemento.

  1. $ ( '#elemento' ). información sobre herramientas ( 'alternar' )

Acerca de los popovers

Agregue pequeñas superposiciones de contenido, como las del iPad, a cualquier elemento para albergar información secundaria.

* Requiere información sobre herramientas para ser incluido

Descargar archivo

Ejemplo de ventana emergente flotante

Pase el cursor sobre el botón para activar la ventana emergente.


Usando bootstrap-popover.js

Habilite popovers a través de javascript:

  1. $ ( '#ejemplo' ). ventana emergente ( opciones )

Opciones

Nombre escribe defecto descripción
animación booleano verdadero aplicar una transición de fundido css a la información sobre herramientas
colocación cadena|función 'Correcto' cómo colocar el popover - parte superior | fondo | izquierda | Correcto
selector cuerda falso si se proporciona un selector, los objetos de información sobre herramientas se delegarán a los objetivos especificados
generar cuerda 'flotar' cómo se activa la información sobre herramientas - hover | enfoque | manual
título cadena | función '' valor de título predeterminado si el atributo `título` no está presente
contenido cadena | función '' valor de contenido predeterminado si el atributo `data-content` no está presente
demora número | objeto 0

retraso en mostrar y ocultar el popover (ms) - no se aplica al tipo de activación manual

Si se proporciona un número, la demora se aplica tanto para ocultar/mostrar

La estructura del objeto es:delay: { show: 500, hide: 100 }

¡Aviso! Las opciones para ventanas emergentes individuales se pueden especificar alternativamente mediante el uso de atributos de datos.

Margen

Por motivos de rendimiento, las API de información sobre herramientas y ventana emergente están habilitadas. Si desea utilizarlas, simplemente especifique una opción de selección.

Métodos

$().popover(opciones)

Inicializa popovers para una colección de elementos.

.popover('mostrar')

Revela una ventana emergente de elementos.

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

.popover('ocultar')

Oculta una ventana emergente de elementos.

  1. $ ( '#elemento' ). popover ( 'ocultar' )

.popover('alternar')

Alterna una ventana emergente de elementos.

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

Acerca de las alertas

El complemento de alerta es una clase pequeña para agregar una funcionalidad cercana a las alertas.

Descargar

Alertas de ejemplo

El complemento de alertas funciona en mensajes de alerta regulares y mensajes de bloqueo.

¡Santo guacamole! Será mejor que lo compruebes tú mismo, no te ves muy bien.

¡Oh, chasquido! ¡Tienes un error!

Cambia esto y aquello e inténtalo de nuevo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Toma esta acción o haz esto


Usando bootstrap-alert.js

Habilite el rechazo de una alerta a través de javascript:

  1. $ ( ".alerta" ). alerta ()

Margen

Simplemente agréguelo data-dismiss="alert"a su botón de cierre para dar automáticamente una funcionalidad de cierre de alerta.

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

Métodos

$().alerta()

Envuelve todas las alertas con funcionalidad de cierre. Para que sus alertas se activen cuando estén cerradas, asegúrese de que ya se les haya aplicado la clase .fadey ..in

.alert('cerrar')

Cierra una alerta.

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

Eventos

La clase de alerta de Bootstrap expone algunos eventos para conectarse a la funcionalidad de alerta.

Evento Descripción
cerca Este evento se activa inmediatamente cuando closese llama al método de instancia.
cerrado Este evento se activa cuando se ha cerrado la alerta (esperará a que se completen las transiciones css).
  1. $ ( '#mi-alerta' ). enlazar ( 'cerrado' , función () {
  2. // hacer algo…
  3. })

Sobre

Haz más con los botones. Controle los estados de los botones o cree grupos de botones para más componentes, como barras de herramientas.

Descargar archivo

Ejemplos de usos

Use el complemento de botones para estados y alterna.

con estado
Cambio único
Caja
Radio

Usando bootstrap-button.js

Habilitar botones a través de javascript:

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

Margen

Los atributos de datos son parte integral del complemento del botón. Consulte el código de ejemplo a continuación para ver los distintos tipos de marcado.

  1. <!-- Agregue data-toggle="button" para activar la alternancia en un solo botón -->
  2. <button class = "btn" data-toggle = "button" > Cambio único </button>
  3.  
  4. <!-- Agregue data-toggle="buttons-checkbox" para alternar el estilo de casilla de verificación en btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. < clase de botón = "btn" > Izquierda </botón>
  7. < clase de botón = "btn" > Medio </botón>
  8. < clase de botón = "btn" > Derecha </botón>
  9. </div>
  10.  
  11. <!-- Agregue data-toggle="buttons-radio" para alternar el estilo de radio en btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. < clase de botón = "btn" > Izquierda </botón>
  14. < clase de botón = "btn" > Medio </botón>
  15. < clase de botón = "btn" > Derecha </botón>
  16. </div>

Métodos

$().button('alternar')

Cambia el estado de inserción. Da al botón la apariencia de que ha sido activado.

¡Aviso! Puede habilitar el cambio automático de un botón usando el data-toggleatributo.
  1. < clase de botón = "btn" alternar datos = "botón" > </botón>

$().button('cargando')

Establece el estado del botón en carga: desactiva el botón y cambia el texto por el texto de carga. El texto de carga debe definirse en el elemento del botón usando el atributo de datos data-loading-text.

  1. <button class = "btn" data-loading-text = "cargando cosas..." > ... </button>
¡Aviso! Firefox persiste en el estado deshabilitado al cargar la página . Una solución para esto es usar autocomplete="off".

$().button('restablecer')

Restablece el estado del botón: cambia el texto al texto original.

$().button(cadena)

Restablece el estado del botón: cambia el texto a cualquier estado de texto definido por datos.

  1. <button class = "btn" data-complete-text = "¡terminado!" > ... </botón>
  2. <script>
  3. $ ( '.btn' ). botón ( 'completar' )
  4. </script>

Sobre

Obtenga estilos básicos y soporte flexible para componentes plegables como acordeones y navegación.

Descargar archivo

* Requiere que se incluya el complemento Transiciones.

acordeón de ejemplo

Usando el complemento de colapso, construimos un widget de estilo acordeón simple:

Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible VHS.

Usando bootstrap-collapse.js

Habilitar a través de javascript:

  1. $ ( ".contraer" ). colapso ()

Opciones

Nombre escribe defecto descripción
padre selector falso Si se selecciona, todos los elementos contraíbles bajo el padre especificado se cerrarán cuando se muestre este elemento contraíble. (similar al comportamiento tradicional del acordeón)
palanca booleano verdadero Alterna el elemento contraíble en la invocación

Margen

Simplemente agregue data-toggle="collapse"y un data-targetelemento para asignar automáticamente el control de un elemento contraíble. El data-targetatributo acepta un selector css para aplicar el colapso. Asegúrese de agregar la clase collapseal elemento contraíble. Si desea que se abra de forma predeterminada, agregue la clase adicional in.

  1. < clase de botón = "btn btn-peligro" alternar datos = "contraer" objetivo de datos = "#demo" >
  2. plegable simple
  3. </botón>
  4.  
  5. <div id = "demo" class = "contraer en" > </div>
¡Aviso! Para agregar una administración de grupos similar a un acordeón a un control contraíble, agregue el atributo de datos data-parent="#selector". Consulte la demostración para ver esto en acción.

Métodos

.collapse(opciones)

Activa tu contenido como un elemento colapsable. Acepta opciones opcionales object.

  1. $ ( '#myCollapsible' ). colapsar ({
  2. alternar : falso
  3. })

.collapse('alternar')

Cambia un elemento colapsable a mostrado u oculto.

.collapse('mostrar')

Muestra un elemento plegable.

.collapse('ocultar')

Oculta un elemento contraíble.

Eventos

La clase de colapso de Bootstrap expone algunos eventos para conectarse a la funcionalidad de colapso.

Evento Descripción
mostrar Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado Este evento se activa cuando un elemento de colapso se ha hecho visible para el usuario (esperará a que se completen las transiciones css).
ocultar Este evento se activa inmediatamente cuando hidese llama al método.
oculto Este evento se activa cuando un elemento de colapso se ha ocultado al usuario (esperará a que se completen las transiciones css).
  1. $ ( '#myCollapsible' ). en ( 'oculto' , función () {
  2. // hacer algo…
  3. })

Sobre

Un complemento básico y fácilmente ampliable para crear rápidamente mecanografiados elegantes con cualquier tipo de entrada de texto.

Descargar archivo

Ejemplo

Comience a escribir en el campo de abajo para mostrar los resultados de escritura anticipada.


Usando bootstrap-typeahead.js

Llame al typeahead a través de javascript:

  1. $ ( '.escribir por adelantado' ). escribir adelante ()

Opciones

Nombre escribe defecto descripción
fuente formación [ ] La fuente de datos contra la que se va a realizar la consulta.
elementos número 8 El número máximo de elementos para mostrar en el menú desplegable.
emparejador función mayúsculas y minúsculas El método utilizado para determinar si una consulta coincide con un elemento. Acepta un solo argumento, itemcontra el cual probar la consulta. Accede a la consulta actual con this.query. Devuelve un booleano truesi la consulta es una coincidencia.
clasificador función coincidencia exacta,
mayúsculas y minúsculas,
mayúsculas y minúsculas
Método utilizado para ordenar los resultados de autocompletar. Acepta un solo argumento itemsy tiene el alcance de la instancia de escritura anticipada. Haga referencia a la consulta actual con this.query.
resaltador función resalta todas las coincidencias predeterminadas Método utilizado para resaltar los resultados de autocompletar. Acepta un solo argumento itemy tiene el alcance de la instancia de escritura anticipada. Debería devolver html.

Margen

Agregue atributos de datos para registrar un elemento con funcionalidad de escritura anticipada.

  1. < tipo de entrada = "texto" suministro de datos = "escribir por adelantado" >

Métodos

.typeahead (opciones)

Inicializa una entrada con una escritura anticipada.