Javascript para Boostrap.

Da vida a los componentes de Boostrap —ahora con 12 plugins de jQuery personalizados.

¡Atención! Todos los plugins de javascript requieren la última versión de jQuery.

Sobre modals

Un plugin modal eficiente pero flexible en el javascript tradicional con solo una funcionalidad mínima requerida y valores por defecto inteligentes.

Descargar archivo

Ejemplo estático

Abajo tienes un modal rendido estáticamente.

Demo en vivo

Alternando (toggle) un modal a través de javascript clicando el botón inferior. Se mostrará y aparecerá al principio de la página.

Activar demo modal

Usando bootstrap-modal

Llama al modal a través de javascript:

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

Opciones

Nombre Tipo Por defecto Descripción
situación general boolean true Incluye un elemento modal-backdrop. Alternativamente, especifica static para una situación general que no cierre el modal con un clic.
teclado boolean true Cierra el modal cuando se presiona la tecla ESC.
muestra boolean true Muestra el modal cuando se inicia.

Etiquetado

Puedes activar modales en tu página de manera fácil sin tener que escribir una línea individual de javascript. Simplemente aplica data-toggle="modal" en un elemento controlador con data-target="#foo" o href="#foo" que corresponde a un elemento modal id, y que cuando se hace clic, lanzará tu modal.

Además, para añadir opciones a tu caso de modal, incluyelas como atributos data adicionales tanto en el elemento de control como en el etiquetado modal mismo.

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
¡Atención! Si quieres que tu modal se anime dentro y fuera, añade una clase .fade al elemento .modal (mira la demo para ver esto en acción) e incluye boostrap-transition.js.

Métodos

.modal(opciones)

Activa tu contenido como modal. Acepta un object de opciones opcionales.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

hace un modal con flip-flop manual.

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

.modal('show')

Muestra manualmente un modal

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

.modal('hide')

Esconde manualmente un modal.

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

Eventos

La clase modal de Bootstrap expone unos eventos para engancharse en una funcionalidad modal.

Evento Descripción
mostrar Este evento se activa directamente cuando el método de caso show se llama.
mostrado Este evento se activa cuando el modal ha sido puesto visible para el usuario (esperará que las transiciones css se completen).
esconder Este evento se activa inmediatamente cuando el método de caso hide se llama.
escondido Este evento se activa cuando el modal ha terminado de ser escondido del usuario (esperará que las transiciones css se completen).
$('#myModal').on('hidden', function () {
  // do something…
})

El plugin ScrollSpy es para una actualización de objetivos (targets) nav automática basada en una posición de desplazamiento.

Descargar archivo

Ejemplo de navbar con scrollspy

Desplaza el área inferior y observa la actualización de la navegación. Los objetos sub desplegables también se subrayarán. ¡Inténtalo!

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

uno

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus 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.

tres

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 cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Usando bootstrap-scrollspy.js

Llama al scrollspy vía javascript:

$('#navbar').scrollspy()

Etiquetado

Para añadir el comportamiento scrollspy fácilmente a tu navegación de barra superior, simplemente añade data-spy="scroll" al elemento que quieres ‘espiar’ (normalmente se haría en el cuerpo).

<body data-spy="scroll" >...</body>
¡Atención! Los enlaces navbar deben de tener id de fácil resolución. Por ejemplo, un <a href="#home">home</a> debe corresponder a algo en el dom como <div id="home"></div>.

Opciones

Nombre Tipo Por defecto Descripción
offset número 10 Pixels to offset from top when calculating position of scroll.

Este plugin añade facilmente un tab dinámico y una funcionalidad de pills para transicionar a través de contenido local.

Descargar archivo

Ejemplo de tabs

Haz clic en los tabs inferiores para hacer un flip-flop (toggle) entre los paneles escondidos, incluso vía menús depslegables

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit 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.


Usando bootstrap-tab.js

Habilita tabs tabulables vía javascript:

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

Etiquetado

Puedes activar una navegación de tabs o de pills sin escribir cualquier javascript especificando data-toggle="tab" o data-toggle="pill" en un elemento.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Perfil</a></li>
  <li><a href="#messages" data-toggle="tab">Mensajes</a></li>
  <li><a href="#settings" data-toggle="tab">Ajustes</a></li>
</ul>

Métodos

$().tab

Activa un elemento de tabulador y un contenedor de contenido. El tabulador debería tener tanto un ‘data-target’ o un ‘href’ dirigido al nodo de contenido en el dom.

<ul class="nav nav-tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('.tabs a:last').tab('show')
  })
</script>

Eventos

Evento Descripción
mostrar Este evento se activa cuando se muestra el tab, pero antes de que el nuevo tab se haya mostrado. Utiliza event.target y event.relatedTarget para dirigir el tabulador activo y el tabulador activo anterior (si está disponible) respectivamente.
mostrado Este evento se activa cuando se muestra un tabulador después de que se haya mostrado un tabulador. Utiliza event.target y event.relatedTarget para dirigir un tabulador activo y un tabulador activo anterior (si está disponible) respectivamente.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Sobre los Tooltips

Inspirado por un plugin jQuery.tipsy excelente escrito por Jason Frame; Los Tooltips son una versión actualizada, que no dependen de imágenes, utilizan css3 para animaciones, y "data-attributes" para un almacenamiento de título local.

Descargar archivo

Ejemplo del uso de Tooltips

Desplázate sobre los enlaces inferiores para ver las tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Usando bootstrap-tooltip.js

Activa el tooltip vía javascript:

$('#example').tooltip(options)

Opciones

Nombre Tipo Por defecto Descripción
animation boolean true Aplica como una transición de desaparición (fade) css al tooltip
placement string|function 'top' como posicionar el tooltip - arriba | abajo | izquierda | derecha
selector string false Si se proporciona un seleccionador, los objetos de tooltip se delegarán a unos objteivos (targets) específicos.
title string | function '' Valor de título por defecto si la etiqueta ‘title’ no está presente.
trigger string 'hover' Como se activa tooltip - hover | focus | manual
delay number | object 0

Retrasa la muestra y el escondido del tooltip (ms)

Si se da un número, se retrasan ambas acciones.

Estructura de objeto: delay: { show: 500, hide: 100 }

¡Atención! Las opciones para tooltips individuales se pueden especificar alternativamente a través del uso de los atributos data.

Etiquetado

Por razones de funcionamiento, los data-apis de Tooltip y Popover será una opción. Si te gustaría usarlos especifica una opción de seleccionador.

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>

Métodos

$().tooltip(options)

Añade un handler (controlador) de tooltip a una colección de elemento

.tooltip('show')

Revela un tooltip de un elemento.

$('#element').tooltip('show')

.tooltip('hide')

Esconde un tooltip de un elemento.

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

.tooltip('toggle')

Hace un fip-flop (toggle) de un tooltip de un elemento.

$('#element').tooltip('toggle')

Sobre los popovers

Añade pequeñas capas de contenido, como las de iPad, a cualquier elemento para dar información secundaria en caja.

* Requiere que se incluya Tooltip

Descarga el archivo

Ejemplo de popover con hover

Muévete por encia del botón para activar el popover.


Usando bootstrap-popover.js

Habilita popovers vía javascript:

$('#example').popover(options)

Options

Nombre Tipo Por defecto Descripción
animación boolean true Aplica una transición fade de css al tooltip
Colocación string|function 'right' como posicionar el popover - arriba| abajo | izquierda | derecha
Seleccionador string false si se proporciona un seleccionador, los objetos tooltip se delegarán a objetivos específicos
Activar string 'hover' como se activa un tooltip - hover | focus | manual
Título string | function '' valor de título por defecto si el atributo ‘title’ no está presente.
Contenido string | function '' valor de contenido por defecto si el atributo ‘data-content’ default content no está presente.
Retraso number | object 0

Retrasa la muestra y el escondido popover (ms) Si se da un número, se aplica un retraso en ambas acciones.

Estructura del objeto: delay: { show: 500, hide: 100 }

¡Atención! Las opciones para popovers individuales se pueden especificar alternativamente a través del uso de atributos data

Etiquetado

Por razones de funcionamiento, los data-apis de Tooltip y de Popover serán una opción. Si te gustaría usarlos tan solo especifica una opción de seleccionador.

Métodos

$().popover(options)

Inicia popovers para una colección de elemento.

.popover('show')

Muestra un popover de un elemento.

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

.popover('hide')

Esconde un popover de un elemento.

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

.popover('toggle')

Hace un flip-flop de un popover de un elemento.

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

Sobre alertas

El plugin de alerta es una clase diminuta para añadir funcionalidad cercana a las alertas.

Descarga el archivo

Ejemplos de alertas

Los plugins de alerta funcionan en mensajes de alerta regulares, y mensaje de bloque.

× ¡Oh dios mio! Mejor que lo compruebes tú mismo, no pareces estar bien.
×

¡Oh, no! Tienes un error!

Cambia esto y esto y pruébalo otra vez. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Haz esta acción O haz esto otro


Usando bootstrap-alert.js

Habilita el rechazo de una alerta vía javascript:

$(".alert").alert()

Etiquetado

Simplemente añade data-dismiss="alert" a tu botón de cerrar para dar automáticamente una funcionalidad de cerradura a tu alerta.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Métodos

$().alert()

Envuelve todas las alerta con funcionalidad de cerradura. Para tener alertas animadas cuando se cierran, asegúrate de que tiene la clase .fade y .in aplicadas.

.alert('close')

Cierra la alerta.

$(".alert").alert('close')

Eventos

Las clases de alerta de Boostrap expone unos eventos para enganchar una funcionalidad de alerta.

Evento Descripción
cerrar Este evento se activa automáticamente cuando se llama al método de caso close .
cerrado Este evento se activa cuando se ha cerrado la alerta (esperará que se completen transiciones css).
$('#my-alert').bind('closed', function () {
  // do something…
})

Sobre los botones

Haz más con botones. Estados de boton de control o crear grupos de botones para más componentes como las barras de herramientas.

Descarga el archivo

Ejemplos de usos

Utiliza plugins de botón para estados y flip-flops (toggles).

De estado
Flip-flop (toggle) individual
Checkbox
Radio

Usando bootstrap-button.js

Habilita botones vía javascript:

$('.tabs').button()

Etiquetado

Los atributos data son esenciales para el plugin de botón. Comprueba el código de caso inferior para más tipos de etiquetado diferente.

<!-- Add data-toggle="button" to activate toggling on a single button -->
<button class="btn" data-toggle="button">Single Toggle</button>

<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Métodos

$().button('toggle')

Estado push de flip-flops (toggle). Da la apariencia al botón que se ha activado.

¡Atención! Puedes habilitar tu auto flip-flop usando el atributo data-toggle .
<button class="btn" data-toggle="button" >…</button>

$().button('loading')

Aplica el estado de botón para cargar - deshabilita o intercambia el texto de botón al texto de carga. El texto de carga debería definirse en el elemento de botón usando el atributo data-loading-text.

<button class="btn" data-loading-text="loading stuff..." >...</button>
¡Atención! Firefox insiste en estados deshabilitados a través de las cargas de página. Una solución para esto es usar autocomplete="off".

$().button('reset')

Resetea el estado de botón - intercambia el texto del texto original.

$().button(string)

Reseteta el estado de botón - intercambia el texto a cualquier estado de texto definido.

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

Sobre collapse

Obtén los estilos base y el soporte flexible para componentes desplegables como acordeones y navegación.

Descargar archivo

Ejemplo de acordeón

Usando el plugin de plegado, creamos un widget de estilo de acordeón simple:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Usando bootstrap-collapse.js

Actívalo vía javascript:

$(".collapse").collapse()

Opciones

Nombre tipo defecto descripción
pariente (parent) selector false si se selecciona entonces pone los elementos plegados debajo del pariente especificado se cerrará cuando este objeto plegado se muestre. (similar al compotamiento de acordeón tradicional)
toggle boolean true Flip-flops (toggles) en el elemento plegado por invocación

Etiquetado

Añade data-toggle="collapse" y data-target al elemento para asignar automáticamente control de un elemento plegado. El atributo data-target acepta un selector css para aplicar el plegado. Asegúrate de añadir la clase collapse al elemento plegado. Si te gustaría tenerlo como abierto por defecto, añade la clase in.

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in"> … </div>
¡Atención! Para añadir un manejo de grupo como acordeón a un control de plegado, añade el atributo data-parent="#selector". Mira la demo para ver esta acción.

Métodos

.collapse(options)

Activa tu contenido como elemento de plegado. Acepta un object opcional.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Flip-flop en el elemento de plegado para mostrar o esconder.

.collapse('show')

Muestra un elemento de plegado.

.collapse('hide')

Esconde un elemento de plegado.

Eventos

La clase de plegado de Boostrap expone unos eventos para enganchar una funcionalidad de plegado.

Evento Descripción
show (mostrar) Este evento se activa inmediatamente cuando se llama al método de caso show .
shown (mostrado) Este evento se activa cuando se ha hecho visible el elemento de plegado al usuario (esperará que se completen las transiciones css).
hide (esconder) Este evento se activa inmediatamente cuando se ha llamado al método hide .
hidden (escondido) Este evento se activa cuando se ha escondido el elemento de plegado (esperará que se completen las transiciones css) .
$('#myCollapsible').on('hidden', function () {
  // do something…
})

Sobre typeahead

Un plugin básico y fácilmente extendido para crear un typeahed elegante con cualquier entrada de texto de formulario.

Descargar achivo

Ejemplo

Empieza a teclear en el campo inferior para mostrar los resultados de typeahead.


Usando bootstrap-typeahead.js

Llama al typeahead vía javascript:

$('.typeahead').typeahead()

Opciones

Nombre tipo Por defecto descripción
source (fuente de datos) array [ ] La fuente de datos donde buscará una coincidencia en cualquier consulta realizada.
items número 8 El número máximo de objetos para mostrar en el desplegable.
matcher función case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter función exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
highlighter función highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Etiquetado

Añade atributos data para registrar un elemento con una funcionalidad typeahead.

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

Métodos

.typeahead(options)

Inicia una entrada con un typeahead.