Individual o compilado

Los complementos se pueden incluir individualmente (aunque algunos tienen dependencias requeridas) o todos a la vez. Tanto bootstrap.js como bootstrap.min.js contienen todos los complementos en un solo archivo.

Atributos de datos

Puede usar todos los complementos de Bootstrap únicamente a través de la API de marcado sin escribir una sola línea de JavaScript. Esta es la API de primera clase de Bootstrap y debe ser su primera consideración al usar un complemento.

Dicho esto, en algunas situaciones puede ser conveniente desactivar esta funcionalidad. Por lo tanto, también brindamos la posibilidad de deshabilitar la API de atributos de datos al desvincular todos los eventos en el cuerpo con espacio de nombres `'data-api'`. Esto se ve así:

$ ( 'cuerpo' ). desactivado ( '.data-api' )

Alternativamente, para apuntar a un complemento específico, simplemente incluya el nombre del complemento como un espacio de nombres junto con el espacio de nombres de la API de datos de esta manera:

$ ( 'cuerpo' ). desactivado ( '.alert.data-api' )

API programática

También creemos que debería poder usar todos los complementos de Bootstrap únicamente a través de la API de JavaScript. Todas las API públicas son métodos únicos que se pueden encadenar y devuelven la colección sobre la que se actúa.

$ ( ".btn.peligro" ). botón ( "alternar" ). addClass ( "gordo" )

Todos los métodos deben aceptar un objeto de opciones opcionales, una cadena que apunta a un método en particular o nada (lo que inicia un complemento con el comportamiento predeterminado):

$ ( "#miModal" ). modal () // inicializado con valores predeterminados                       
$ ( "#miModal" ). modal ({ teclado : falso }) // inicializado sin teclado     
$ ( "#miModal" ). modal ( 'show' ) // inicializa e invoca show inmediatamente                

Cada complemento también expone su constructor en bruto en una propiedad `Constructor`: $.fn.popover.Constructor. Si desea obtener una instancia de complemento en particular, recupérela directamente de un elemento: $('[rel=popover]').data('popover').

No conflicto

A veces es necesario usar complementos de Bootstrap con otros marcos de interfaz de usuario. En estas circunstancias, ocasionalmente pueden ocurrir colisiones de espacios de nombres. Si esto sucede, puede llamar .noConflictal complemento cuyo valor desea revertir.

var botón de arranque = $ . fn _ botón _ noConflict () // devuelve $.fn.button al valor previamente asignado 
$ . fn _ bootstrapBtn = bootstrapButton             // otorga a $().bootstrapBtn la funcionalidad de arranque

Eventos

Bootstrap proporciona eventos personalizados para la mayoría de las acciones únicas de los complementos. Por lo general, estos vienen en forma de infinitivo y participio pasado, donde el infinitivo (p. ej. show) se activa al comienzo de un evento y su forma de participio pasado (p. ej.) se activa al showncompletar una acción.

Todos los eventos de infinitivo proporcionan la funcionalidad preventDefault. Esto proporciona la capacidad de detener la ejecución de una acción antes de que comience.

$ ( '#miModal' ). en ( 'mostrar' , función ( e ) {   
    si (! datos ) devuelve e . preventDefault () // evita que se muestre modal   
})

Acerca de las transiciones

Para efectos de transición simples, incluya bootstrap-transition.js una vez junto con los otros archivos JS. Si está utilizando bootstrap.js compilado (o minimizado) , no es necesario incluirlo, ya está allí.

casos de uso

Algunos ejemplos del complemento de transición:

• Deslizamiento o desvanecimiento en modales
• Pestañas que se desvanecen
• Alertas que se desvanecen
• Paneles deslizantes de carrusel

Ejemplos

Los modales son mensajes de diálogo simplificados, pero flexibles, con la funcionalidad mínima requerida y valores predeterminados inteligentes.

Ejemplo estático

Un modal representado con encabezado, cuerpo y conjunto de acciones en el pie de página.

<div clase = "desvanecimiento de ocultación modal" > 
  < clase div = "encabezado-modal" > 
    < tipo de botón = "botón" clase = "cerrar" data-dismiss = "modal" aria-hidden = "true" > × </botón>    
    <h3> Cabecera modal </h3>
  </div>
  <div clase = "cuerpo-modal" > 
    <p> Un buen cuerpo... </p>
  </div>
  <div clase = "modal-pie de página" > 
    <a href = "#" class = "btn" > Cerrar </a>  
    <a href = "#" class = "btn btn-primary" > Guardar cambios </a>  
  </div>
</div>

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.

<!-- Botón para activar modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Iniciar demostración modal </a>    
 
<!-- Modales -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  < clase div = "encabezado-modal" > 
    < tipo de botón = "botón" clase = "cerrar" datos-descartar = "modal" aria-hidden = "verdadero" > × </botón>    
    <h3 id = "myModalLabel" > Cabecera modal </h3> 
  </div>
  <div clase = "cuerpo-modal" > 
    <p> Un buen cuerpo... </p>
  </div>
  <div clase = "modal-pie de página" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Cerrar </button>   
    <button class = "btn btn-primary" > Guardar cambios </button> 
  </div>
</div>

Uso

A través de atributos de datos

Activa un modal sin escribir JavaScript. Establézcalo data-toggle="modal"en un elemento del controlador, como un botón, junto con data-target="#foo"o href="#foo"para apuntar a un modal específico para alternar.

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

A través de JavaScript

Llame a un modal con id myModalcon una sola línea de JavaScript:

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-backdrop="".

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

Métodos

.modal(opciones)

Activa tu contenido como modal. Acepta opciones opcionales object.

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

.modal('alternar')

Cambia manualmente un modal.

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

.modal('mostrar')

Abre manualmente un modal.

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

.modal('ocultar')

Oculta manualmente un modal.

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

Eventos

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

$ ( '#miModal' ). en ( 'oculto' , función () {   
  // hacer algo…
})

Ejemplos

Agregue menús desplegables a casi cualquier cosa con este complemento simple, incluida la barra de navegación, las pestañas y las píldoras.

Dentro de una barra de navegación

Dentro de pestañas

Uso

A través de atributos de datos

Agregue data-toggle="dropdown"a un enlace o botón para alternar un menú desplegable.

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

Para mantener intactas las URL, use el data-targetatributo en lugar de href="#".

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

A través de JavaScript

Llame a los menús desplegables a través de JavaScript:

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

Opciones

Ninguna

Métodos

$().dropdown('alternar')

Una API programática para alternar menús para una barra de navegación determinada o navegación con pestañas.

Ejemplo en la barra de navegación

El complemento ScrollSpy es para actualizar automáticamente los objetivos de navegación en función de la posición de desplazamiento. Desplácese por el área debajo de la barra de navegación y observe cómo cambia la clase activa. Los subelementos desplegables también se resaltarán.

Uso

A través de atributos de datos

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) y data-target=".navbar"seleccione qué navegación usar. Querrás usar scrollspy con un .navcomponente.

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

A través de JavaScript

Llame al scrollspy a través de JavaScript:

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

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:

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-offset="".

Eventos

Pestañas de ejemplo

Agregue una funcionalidad de pestaña dinámica y rápida para pasar a través de paneles de contenido local, incluso a través de menús desplegables.

Uso

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

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

Puede activar pestañas individuales de varias maneras:

$ ( '#myTab a[href="#perfil"]' ). tabulador ( 'mostrar' ); // Seleccionar pestaña por nombre 
$ ( '#myTab a:first' ). tabulador ( 'mostrar' ); // Selecciona la primera pestaña 
$ ( '#myTab a: last' ). tabulador ( 'mostrar' ); //Seleccionar última pestaña 
$ ( '#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 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 Bootstrap.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Inicio </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>  
  <li><a href = "#mensajes" data-toggle = "tab" > Mensajes </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Configuración </a></li>  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Inicio </a></li>  
  <li><a href = "#perfil" > Perfil </a></li> 
  <li><a href = "#mensajes" > Mensajes </a></li> 
  <li><a href = "#settings" > Configuración </a></li> 
</ul>
 
< clase div = "contenido de la pestaña" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "perfil" > ... </div>  
  <div clase = "panel de pestañas" id = "mensajes" > ... </div>  
  <div clase = "panel de pestañas" id = "configuración" > ... </div>  
</div>
 
<script>
  $ ( función () {  
    $ ( '#myTab a: last' ). tabulador ( 'mostrar' );
  })
</script>

Eventos

$ ( 'a[cambio de datos="tab"]' ). en ( 'mostrado' , función ( e ) {   
  mi . objetivo // pestaña activada
  mi . objetivo relacionado // pestaña anterior
})

Ejemplos

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, utiliza CSS3 para animaciones y atributos de datos para el almacenamiento local de títulos.

Por razones de rendimiento, la información sobre herramientas y las API de datos emergentes están habilitadas, lo que significa que debe inicializarlas usted mismo .

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

cuatro direcciones

Información sobre herramientas en grupos de entrada

Cuando use información sobre herramientas y ventanas emergentes con los grupos de entrada de Bootstrap, deberá configurar la containeropción (documentada a continuación) para evitar efectos secundarios no deseados.

Uso

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

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-animation="".

Margen

<a href = "#" data-toggle = "tooltip" 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.

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

.tooltip('ocultar')

Oculta la información sobre herramientas de un elemento.

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

.tooltip('alternar')

Alterna la información sobre herramientas de un elemento.

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

.tooltip('destruir')

Oculta y destruye la información sobre herramientas de un elemento.

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

Ejemplos

Agregue pequeñas superposiciones de contenido, como las del iPad, a cualquier elemento para albergar información secundaria. Pase el cursor sobre el botón para activar la ventana emergente. Requiere Tooltip para ser incluido.

ventana emergente estática

Hay cuatro opciones disponibles: alineación superior, derecha, inferior e izquierda.

No se generan marcas que se muestran como elementos emergentes a partir de JavaScript y contenido dentro de un dataatributo.

Demo en vivo

cuatro direcciones

Uso

Habilitar ventanas emergentes a través de JavaScript:

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

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-animation="".

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.

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

.popover('ocultar')

Oculta una ventana emergente de elementos.

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

.popover('alternar')

Alterna una ventana emergente de elementos.

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

.popover('destruir')

Oculta y destruye el popover de un elemento.

$ ( '#elemento' ). popover ( 'destruir' )

Alertas de ejemplo

Agregue la funcionalidad de descartar a todos los mensajes de alerta con este complemento.

Uso

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

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

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

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

Eventos

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

$ ( '#mi-alerta' ). enlazar ( 'cerrado' , función () {   
  // hacer algo…
})

Ejemplos de usos

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.

con estado

Agregar data-loading-text="Loading..."para usar un estado de carga en un botón.

<button type = "button" class = "btn btn-primary" data-loading-text = "Cargando..." > Estado de carga </button>   

Cambio único

Agregue data-toggle="button"para activar alternar en un solo botón.

< tipo de botón = "botón" clase = "btn btn-primary" alternancia de datos = "botón" > Cambio único </botón>   

Caja

Agregue data-toggle="buttons-checkbox"para alternar el estilo de casilla de verificación en btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  < tipo de botón = "botón" clase = "btn btn-primary" > Izquierda </button>  
  < tipo de botón = "botón" clase = "btn btn-primary" > Medio </button>  
  < tipo de botón = "botón" clase = "btn btn-primary" > Derecha </button>  
</div>

Radio

Agregue data-toggle="buttons-radio"para alternar el estilo de radio en btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  < tipo de botón = "botón" clase = "btn btn-primary" > Izquierda </button>  
  < tipo de botón = "botón" clase = "btn btn-primary" > Medio </button>  
  < tipo de botón = "botón" clase = "btn btn-primary" > Derecha </button>  
</div>

Uso

Habilitar botones a través de JavaScript:

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

Opciones

Ninguna

Métodos

$().button('alternar')

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

< tipo de botón = "botón" clase = "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.

<button type = "button" class = "btn" data-loading-text = "cargando cosas..." > ... </button>    

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

< tipo de botón = "botón" clase = "btn" texto completo de datos = "¡terminado!" > ... </botón>    
<script>
  $ ( '.btn' ). botón ( 'completar' )
</script>

Sobre

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

* Requiere que se incluya el complemento Transiciones.

acordeón de ejemplo

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

<div class = "acordeón" id = "acordeón2" >  
  <div clase = "grupo-acordeón" > 
    <div clase = "título-acordeón" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Artículo de grupo plegable n.º 1
      </a>
    </div>
    <div id = "collapseOne" class = "cuerpo de acordeón colapsar en" >  
      <div clase = "acordeón-interior" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
  <div clase = "grupo-acordeón" > 
    <div clase = "título-acordeón" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Artículo de grupo plegable n.º 2
      </a>
    </div>
    <div id = "collapseTwo" class = "colapso del cuerpo del acordeón" >  
      <div clase = "acordeón-interior" > 
        Anim pariatur cliché...
      </div>
    </div>
  </div>
</div>
...

También puede usar el complemento sin el marcado de acordeón. Haga que un botón alterne la expansión y el colapso de otro elemento.

< tipo de botón = "botón" clase = "btn btn-peligro" alternar datos = "contraer" objetivo de datos = "#demo" >    
  plegable simple
</botón>
 
<div id = "demo" class = "contraer en" > … </div>  

Uso

A través de atributos de datos

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.

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.

A través de JavaScript

Habilitar manualmente con:

$ ( ".contraer" ). colapso ()

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-parent="".

Métodos

.collapse(opciones)

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

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

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

$ ( '#myCollapsible' ). en ( 'oculto' , función () {   
  // hacer algo…
})

Carrusel de ejemplo

La presentación de diapositivas a continuación muestra un complemento genérico y un componente para recorrer elementos como un carrusel.

Primera etiqueta de 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.

‹ ›

<div id = "myCarousel" class = "diapositiva del carrusel" >  
  < clase ol = "indicadores-carrusel" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Elementos del carrusel -->
  <div clase = "carrusel-interior" > 
    <div clase = "elemento activo" > … </div> 
    <div clase = "elemento" > … </div> 
    <div clase = "elemento" > … </div> 
  </div>
  <!-- Navegación carrusel -->
  <a class = "carrusel-control izquierda" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carrusel-control derecho" href = "#myCarousel" data-slide = "siguiente" > › </a>   
</div>

Uso

A través de atributos de datos

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

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

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".