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.

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.

Usando bootstrap-modal

Llame al modal a través de javascript:

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

Opciones

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.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Iniciar modal </a>    

<div class = "modal hide" id = "myModal" >  
  < clase div = "encabezado-modal" > 
    < tipo de botón = "botón" clase = "cerrar" datos-descartar = "modal" > × </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" data-dismiss = "modal" > Cerrar </a>   
    <a href = "#" class = "btn btn-primary" > Guardar cambios </a>  
  </div>
</div>

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…
})

Acerca de los menús desplegables

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.

Ejemplos

Haga clic en los enlaces de navegación desplegables en la barra de navegación y las píldoras a continuación para probar los menús desplegables.

• Enlace habitual
• Desplegable
  • Action
  • Another action
  • Something else here
  • Separated link
• Menú desplegable 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Menú desplegable 3
  • Action
  • Another action
  • Something else here
  • Separated link

Usando bootstrap-dropdown.js

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

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

Margen

Para agregar rápidamente la funcionalidad desplegable a cualquier elemento, simplemente agregue data-toggle="dropdown"y cualquier menú desplegable de arranque válido se activará automáticamente.

<ul class = "píldoras de navegación de navegación" > 
  <li class = "active" ><a href = "#" > Enlace normal </a></li>  
  <li clase = "desplegable" id = "menú1" >  
    <a class = "desplegable-alternar" data-alternar = "desplegable" href = "#menu1" >   
      Desplegable
      <b clase = "intercalación" ></b> 
    </a>
    <ul clase = "menú desplegable" > 
      <li><a href = "#" > Acción </a></li> 
      <li><a href = "#" > Otra acción </a></li> 
      <li><a href = "#" > Algo más aquí </a></li> 
      <li clase = "divisor" ></li> 
      <li><a href = "#" > Enlace separado </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "píldoras de navegación de navegación" > 
  <li clase = "desplegable" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Desplegable
      <b clase = "intercalación" ></b> 
    </a>
    <ul clase = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Métodos

$().desplegable()

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

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

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!

Usando bootstrap-scrollspy.js

Llame al scrollspy a través de javascript:

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

<body data-spy = "desplazamiento" > ... </body>  

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

Eventos

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.

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.

• Hogar
• Perfil
• Desplegable
  • @fat
  • @mdo

Usando bootstrap-tab.js

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

<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
})

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.

Ejemplo de uso de información sobre herramientas

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

Usando bootstrap-tooltip.js

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

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

Opciones

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.

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

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

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

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:

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

Opciones

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' )

Acerca de las alertas

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

Alertas de ejemplo

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

Usando bootstrap-alert.js

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…
})

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.

Ejemplos de usos

Use el complemento de botones para estados y alterna.

Usando bootstrap-button.js

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.

<!-- Agregue data-toggle="button" para activar la alternancia en un solo botón -->
<button class = "btn" data-toggle = "button" > Cambio único </button>  
 
<!-- 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" >  
  < clase de botón = "btn" > Izquierda </botón> 
  < clase de botón = "btn" > Medio </botón> 
  < clase de botón = "btn" > Derecha </botón> 
</div>
 
<!-- Agregue data-toggle="buttons-radio" para alternar el estilo de radio en btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  < clase de botón = "btn" > Izquierda </botón> 
  < clase de botón = "btn" > Medio </botón> 
  < clase de botón = "btn" > Derecha </botón> 
</div>

Métodos

$().button('alternar')

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

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

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

<button class = "btn" data-complete-text = "¡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:

Usando bootstrap-collapse.js

Habilitar a través de javascript:

$ ( ".contraer" ). colapso ()

Opciones

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.

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

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…
})

Sobre

Un complemento genérico para recorrer elementos en bicicleta. Un tiovivo ronda.

Carrusel de ejemplo

Mira la presentación de diapositivas a continuación.

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.

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

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

‹ ›

Usando bootstrap-carousel.js

Llamar a través de javascript:

$ ( '.carrusel' ). carrusel ()

Opciones

Margen

Los atributos de datos se utilizan para los controles anterior y siguiente. Echa un vistazo al marcado de ejemplo a continuación.

<div id = "myCarousel" class = "diapositiva del carrusel" >  
  <!-- 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>

Métodos

.carrusel(opciones)

Inicializa el carrusel con opciones opcionales objecty comienza a recorrer los elementos.

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

.carrusel('ciclo')

Recorre los elementos del carrusel de izquierda a derecha.

.carrusel('pausa')

Evita que el carrusel pase de un elemento a otro.

.carrusel(número)

Cicla el carrusel a un marco en particular (basado en 0, similar a una matriz).

.carrusel('anterior')

Pasa al elemento anterior.

.carrusel('siguiente')

Pasa al elemento siguiente.

Eventos

La clase de carrusel de Bootstrap expone dos eventos para conectarse a la funcionalidad del carrusel.

Sobre

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

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:

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

Opciones

Margen

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

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

Métodos

.typeahead (opciones)

Inicializa una entrada con una escritura anticipada.