Nuestro complemento Modal es una versión súper delgada del complemento modal js tradicional, teniendo especial cuidado de incluir solo la funcionalidad básica que requerimos aquí en Twitter.

Descargar

Usando bootstrap-modal

$ ( '#mi-modal' ). modal ( opciones )

Opciones

Nombre	escribe	defecto	descripción
fondo	booleano, cadena	falso	Incluye un elemento de fondo modal. Establezca el fondo en "static"si no desea que el modal se cierre cuando se haga clic en el fondo.
teclado	booleano	falso	Cierra el modal cuando se presiona la tecla escape
mostrar	booleano	falso	Abre modal en la inicialización de clase.

Margen

Puede activar modales en su página fácilmente sin tener que escribir una sola línea de javascript. Simplemente asigne a un elemento un data-controls-modalatributo que corresponda a una identificación de elemento modal, y cuando se haga clic, se iniciará su modal. Para agregar opciones modales, simplemente inclúyalas también como atributos de datos.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Iniciar modal </a>    

Aviso Si desea que su modal se anime dentro y fuera, simplemente agregue una .fadeclase a su .modalelemento (consulte la demostración para ver esto en acción).

Métodos

.modal(opciones)

Activa tu contenido como modal. Acepta opciones opcionales object.

$ ( '#mi-modal' ). modales ({
  teclado : cierto 
})

.modal('alternar')

Cambia manualmente un modal.

$ ( '#mi-modal' ). modal ( 'alternar' )

.modal('mostrar')

Abre manualmente un modal.

$ ( '#mi-modal' ). modal ( 'mostrar' )

.modal('ocultar')

Oculta manualmente un modal.

$ ( '#mi-modal' ). modal ( 'ocultar' )

.modal(verdadero)

Devuelve una instancia de clase modal de elementos.

$ ( '#mi-modal' ). modal ( verdadero )

Aviso Alternativamente, esto se puede recuperar con $().data('modal').

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

$ ( '#mi-modal' ). enlazar ( 'oculto' , función () {   
  // hacer algo ...
})

Manifestación

Modo de lanzamiento

Este complemento es para agregar interacción desplegable a la barra superior de arranque o navegaciones con pestañas.

Descargar

Usando bootstrap-dropdown.js

$ ( '#barra superior' ). menú desplegable ()

Margen

Para agregar rápidamente la funcionalidad desplegable a cualquier elemento de navegación, use el data-dropdownatributo. Cualquier menú desplegable de arranque válido se activará automáticamente.

< clase ul = "pestañas" > 
  <li class = "activo" ><a href = "#" > Inicio </a></li>  
  <li clase = "desplegable" data-dropdown = "desplegable" >   
    <a href = "#" class = "dropdown-toggle" > Menú desplegable </a>  
    <ul clase = "menú desplegable" > 
      <li><a href = "#" > Enlace secundario </a></li> 
      <li><a href = "#" > Algo más aquí </a></li> 
      <li clase = "divisor" ></li> 
      <li><a href = "#" > Otro enlace </a></li> 
    </ul>
  </li>
</ul>

Aviso Si su interfaz de usuario tiene varios menús desplegables, considere agregar el data-dropdownatributo a un elemento contenedor más significativo como .tabso .topbar.

Métodos

$().desplegable()

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

Manifestación

Este complemento es para agregar la interacción scrollspy (navegación de actualización automática) a la barra superior de arranque.

Descargar

Usando bootstrap-scrollspy.js

$ ( '#barra superior' ). scrollEspía ()

Margen

Para agregar fácilmente el comportamiento de scrollspy a su navegación, simplemente agregue el data-scrollspyatributo al archivo .topbar.

<div class = "barra superior" data-scrollspy = "scrollspy" > ... </div>   

Métodos

$().desplazamientoEspía()

Auto activa los botones de navegación por la posición de desplazamiento de los usuarios.

$ ( 'cuerpo > .barra superior' ). scrollEspía ()

Tenga en cuenta que las etiquetas de anclaje de la barra superior 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>.

.scrollSpy('actualizar')

El scrollspy almacena en caché los botones de navegación y las coordenadas de sección para el rendimiento. Si necesita actualizar este caché (probablemente si tiene contenido dinámico), simplemente llame a este método de actualización. Si usó el atributo de datos para definir su scrollspy, simplemente llame a actualizar en el cuerpo.

$ ( 'cuerpo' ). scrollSpy ( 'actualizar' )

Manifestación

Echa un vistazo a la navegación de la barra superior en esta página.

Este complemento ofrece funcionalidad adicional para administrar el estado del botón.

Descargar

Usando bootstrap-botones.js

$ ( '.pestañas' ). botón ()

Métodos

$().button('alternar')

Cambia el estado de inserción. Da a btn la apariencia de que ha sido activado.

Aviso Puede habilitar el cambio automático de un botón usando el data-toggleatributo.

< clase de botón = "btn" alternar datos = "alternar" > ... </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').button('completar')
</script>

Manifestación

Cargando demostración Alternar demostración

Este complemento agrega pestañas rápidas y dinámicas y funcionalidad de píldora.

Descargar

Usando bootstrap-tabs.js

$ ( '.pestañas' ). pestañas ()

Margen

Puede activar una pestaña o navegación de píldora sin escribir ningún javascript simplemente dándoles un atributo data-tabso .data-pills

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Métodos

$().pestañas o $().pastillas

Activa la funcionalidad de pestañas y píldoras para un contenedor determinado. Los enlaces de las pestañas deben hacer referencia a los identificadores en el documento.

< clase ul = "pestañas" > 
  <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>
 
<div class = "píldora-contenido" > 
  <div clase = "activo" id = "inicio" > ... </div>  
  <div id = "perfil" > ... </div> 
  <div id = "mensajes" > ... </div> 
  <div id = "configuración" > ... </div> 
</div>
 
<script>
  $ ( función () {  
    $ ( '.pestañas' ). pestañas ()
  })
</script>

Eventos

Evento	Descripción
cambio	Este evento se activa al cambiar de pestaña. Use event.targety event.relatedTargetpara orientar la pestaña activa y la pestaña activa anterior respectivamente.

$ ( '#.pestañas' ). enlazar ( 'cambiar' , función ( e ) {   
  mi . objetivo // pestaña activada
  mi . objetivo relacionado // pestaña anterior
})

Manifestación

• Hogar
• Perfil
• Mensajes
• Ajustes
• Desplegable
  • @grasa
  • @mdo

Basado en el excelente complemento jQuery.tipsy escrito por Jason Frame; twipsy es una versión actualizada, que no se basa en imágenes, utiliza css3 para animaciones y atributos de datos para el almacenamiento de títulos.

Descargar

Usando bootstrap-twipsy.js

$ ( '#ejemplo' ). Twipsy ( opciones )

Opciones

Nombre	escribe	defecto	descripción
animar	booleano	verdadero	aplicar una transición de fundido css a la información sobre herramientas
retraso en	número	0	retraso antes de mostrar información sobre herramientas (ms)
retrasar	número	0	retraso antes de ocultar información sobre herramientas (ms)
retroceder	cuerda	''	texto para usar cuando no hay un título de información sobre herramientas presente
colocación	cuerda	'arriba'	cómo colocar la información sobre herramientas - arriba | abajo | izquierda | Correcto
html	booleano	falso	permite contenido html dentro de la información sobre herramientas
En Vivo	booleano	falso	use la delegación de eventos en lugar de controladores de eventos individuales
compensar	número	0	Desplazamiento de píxeles de información sobre herramientas desde el elemento de destino
título	cadena, función	'título'	atributo o método para recuperar el texto del título
generar	cuerda	'flotar'	cómo se activa la información sobre herramientas - hover | enfoque | manual
modelo	cuerda	[marcado predeterminado]	La plantilla html utilizada para renderizar un twipsy.

Aviso Las opciones individuales de instancias de twipsy se pueden especificar alternativamente mediante el uso de atributos de datos.

<a href = "#" data-placement = "abajo" rel = 'twipsy' title = 'Algo de texto de título' > texto </a>    

Métodos

$().twipsy(opciones)

Adjunta un controlador twipsy a una colección de elementos.

.twipsy('mostrar')

Revela un elemento twipsy.

$ ( '#elemento' ). Twipsy ( 'espectáculo' )

.twipsy('ocultar')

Oculta un elemento twipsy.

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

.twipsy (verdadero)

Devuelve una instancia de la clase twipsy de elementos.

$ ( '#elemento' ). Twipsy ( verdadero )

Aviso Alternativamente, esto se puede recuperar con $().data('twipsy').

Manifestación

El complemento popover proporciona una interfaz simple para agregar popovers a su aplicación. Extiende el complemento bootstrap-twipsy.js , ¡así que asegúrese de tomar ese archivo también cuando incluya popovers en su proyecto!

Aviso Debe incluir el archivo bootstrap-twipsy.js antes de bootstrap-popover.js.

Descargar

Usando bootstrap-popover.js

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

Opciones

Nombre	escribe	defecto	descripción
animar	booleano	verdadero	aplicar una transición de fundido css a la información sobre herramientas
retraso en	número	0	retraso antes de mostrar información sobre herramientas (ms)
retrasar	número	0	retraso antes de ocultar información sobre herramientas (ms)
retroceder	cuerda	''	texto para usar cuando no hay un título de información sobre herramientas presente
colocación	cuerda	'Correcto'	cómo colocar la información sobre herramientas - arriba | abajo | izquierda | Correcto
html	booleano	falso	permite contenido html dentro de la información sobre herramientas
En Vivo	booleano	falso	use la delegación de eventos en lugar de controladores de eventos individuales
compensar	número	0	Desplazamiento de píxeles de información sobre herramientas desde el elemento de destino
título	cadena, función	'título'	atributo o método para recuperar el texto del título
contenido	cadena, función	'contenido de datos'	una cadena o método para recuperar texto de contenido. si no se proporciona ninguno, el contenido se obtendrá de un atributo de contenido de datos.
generar	cuerda	'flotar'	cómo se activa la información sobre herramientas - hover | enfoque | manual
modelo	cuerda	[marcado predeterminado]	La plantilla html utilizada para representar un popover.

Aviso Las opciones de instancias emergentes individuales se pueden especificar alternativamente mediante el uso de atributos de datos.

<a data-placement = "abajo" href = "#" class = "btn peligro" rel = "popover" > texto </a>    

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

Manifestación

flotar para popover

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

Descargar

Usando bootstrap-alerts.js

$ ( ".mensaje de alerta" ). alerta ()

Margen

Simplemente agregue un data-alertatributo a sus mensajes de alerta para darles automáticamente una funcionalidad de cierre.

Opciones

Nombre	escribe	defecto	descripción
selector	cuerda	'.cerca'	Qué selector apuntar para cerrar una alerta.

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.

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

Manifestación