Resumen

Individual o compilado

Se pueden incluir los plug-in individualmente (usando archivos *.js individuales de Bootstrap) o todos a la vez (usando bootstrap.js o el bootstrap.min.js minimizado).

Empleando la versión comprimida de javascript

Ambos bootstrap.js y bootstrap.min.js contienen los plugins necesarios en un único fichero. Solo necesita añadir uno de los dos.

Atributos en los componentes de los datos

Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

Dependencias de plug-in

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

Atributos de datos

Puede usar todos los plug-in de Bootstrap simplemente por medio de API marcado sin escribir una sola línea de código de JavaScript. Este es el API de primera clase de Bootstrap y debería ser su primera consideración cuando utilice un plug-in.

Es así que en algunas situaciones puede ser necesario desactivar esta funcionalidad. Por tanto, también proveemos la opción de desactivar el API de atributos de datos al desenlazar todos los eventos del documento con espacio de nombre (namespace) con data-api. Esto se ve así:

$(document).off('.data-api')

Alternativamente, para enfocarse en un plug-in específico, solo incluya su nombre como un espacio de nombre junto con el de API de datos, de esta forma:

$(document).off('.alert.data-api')

API de programas

También pensamos que debería poder usar todos los plug-in de Bootstrap solamente por medio de JavaScript. Todos los API públicos son métodos encadenables y únicos y generan la colección sobre la que se actúa.

$('.btn.danger').button('toggle').addClass('fat')

Todos los métodos deben aceptar un objeto de opciones no requeridas, una cadena que se enfoque en un método específico, o nada (lo que inicia un plug-in con un comportamiento predeterminado):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel="popover"%5D').data('popover').

Sin conflictos

Algunas veces es necesario usar plug-in de Bootstrap con otras estructuras de interfaz de usuario. En estas circunstancias, los conflictos por espacios de nombre pueden ocurrir ocasionalmente. Si pasa esto, usted puede llamar .noConflict en el plug-in cuyo valor desea revertir.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Eventos

Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.

Desde la versión 3.0.0, todos los eventos de Bootstrap tienen espacio de nombre.

Todos los eventos en infinitivo proveen funcionalidad preventDefault. Esto provee la capacidad de detener la ejecución de una acción antes de que esta se inicie.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Third-party libraries

Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.

Transiciones transition.js

Acerca de transiciones

Para efectos sencillos de transición, incluya transition.js junto a otros archivos de JS. Si está usando el bootstrap.js compilado (o minimizado), no hace falta agregarlo. Ya se ha incorporado.

¿Qué hay adentro?

Transition.js es una herramienta de ayuda básica para eventos de transitionEnd además de un emulador de transiciones de CSS. Se usa por otros plug-in para revisar la compatibilidad de transiciones de CSS y para detectar transiciones incompletas.

Modales modal.js

Ejemplos

Los modales son mensajes de pantalla de diálogo flexibles y eficientes, con una funcionalidad requerida mínima y valores predeterminados inteligentes.

No se permiten los modales sobrepuestos.

Asegúrese de no abrir un modal cuando otro esté visible. Para mostrar más de uno, se requiere código personalizado.

Colocación de código de modales

Intente siempre colocar un código HTML de modal en una posición de nivel superior de su documento para evitar que los demás componentes afecten su aspecto y/o funcionalidad.

Consejos sobre dispositivos móviles

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

Ejemplo estático

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

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Demostración en vivo

Puede conmutar un modal mediante JavaScript, al hacer clic en el botón siguiente. Se desplazará hacia abajo y desvanecerá desde el tope de la página.

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Cómo hacer que los modales sean accesibles

Asegúrese de agregar role="dialog" al atributo .modal, aria-labelledby="myModalLabel" para referirse al título del modal y aria-hidden="true" para solicitar a las tecnologías de asistencia que se salten los elementos de DOM de modales.

Adicionalmente, puede agregar una descripción de su diálogo de modal con aria-describedby en .modal.

Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

Tamaños opcionales

Los modales tiene dos tamaños opcionales, disponibles mediante las clases de modificadores que se incluirán en un .modal-dialog.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Remove animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

Uso

El plug-in de modal conmuta su contenido oculto bajo demanda, mediante atributos de datos o JavaScript. También agrega .modal-open al <body>, para anular el funcionamiento del desplazamiento predeterminado. Este genera un .modal-backdrop con el fin de proveer un área para cliquear. Se pueden quitar los modales visibles, cuando se hace clic fuera del modal.

Mediante atributos de datos

Active un modal sin código de JavaScript. Configure data-toggle="modal" en un elemento de control, tal como un botón, junto con un data-target="#foo" o href="#foo", lo que sirve para escoger un modal específico para conmutar.

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

Mediante JavaScript

Invoque un modal con id myModal, mediante una sola línea de JavaScript.

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

Opciones

Se pueden pasar las opciones mediante atributos de datos o JavaScript. Para atributos de datos, agregue el nombre de la opción a data-, como en el caso de data-backdrop="".

Nombre Tipo predeterm. descripción
telón de fondo booleano o la cadena 'static' verdadero Incluye un elemento de telón de fondo de modal. Alternativamente, especifique static para un telón de fondo que no permita que se cierre el modal cuando se haga clic.
teclado booleano verdadero Cierra el modal cuando se pulsa la tecla de escape.
mostrar booleano verdadero Muestra el modal cuando se inicializa.
remoto ruta falso

Si se provee un URL remoto, se cargará el contenido una vez mediante el método de JQuery load y se insertará en el div. de .modal-content. Si está usando el data-api, puede aplicar alternativamente el atributo href, con el fin de especificar la fuente remota. Un ejemplo se indica a continuación:

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

Métodos

.modal(options)

Activa su contenido como un modal. Acepta una opción no obligatoria object.

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

.modal('toggle')

Conmuta manualmente un modal. Regresa al elemento invocador antes de que se haya realmente mostrado u ocultado el modal (es decir antes de que ocurra el evento shown.bs.modal o hidden.bs.modal).

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

.modal('show')

Abre manualmente un modal. Regresa al elemento invocador antes de que se haya realmente mostrado el modal (es decir antes de que ocurra el evento shown.bs.modal).

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

.modal('hide')

Oculta manualmente un modal. Regresa al elemento invocador antes de que se haya realmente ocultado el modal (es decir antes de que ocurra el evento hidden.bs.modal).

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

Eventos

La clase modal de Bootstrap expone unos pocos eventos para acceder a la funcionalidad de modales.

Tipo de evento Descripción
show.bs.modal Se lanza inmediatamente este evento cuando se invoca el método de instancia show. Si fue causado por un clic, el elemento cliqueado está disponible como la propiedad relatedTarget del evento.
shown.bs.modal Se lanza este evento cuando se ha hecho visible el modal al usuario (se espera que concluyan las transiciones de CSS). Si fue causado por un clic, el elemento cliqueado está disponible como la propiedad relatedTarget del evento.
hide.bs.modal Se lanza inmediatamente este evento cuando se ha invocado el método de instancia hide.
hidden.bs.modal Se inicia este evento cuando termina de ocultarse el modal del usuario. (Se esperará que se completen las transiciones de CSS.)
loaded.bs.modal Se lanza este evento cuando el modal ha cargado contenido utilizando la opción remota.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Desplegables dropdown.js

Agregue menús desplegables a casi cualquier cosa con este plug-in sencillo, incluyendo en barras de navegación, fichas y píldoras.

Para una barra de navegación

En píldoras

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu. Note: The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

Mediante atributos de datos
<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <span class="caret"></span>
  </a>


  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Para mantener los URL intactos, utilice el atributo data-target en vez de href="#".

Call the dropdowns via JavaScript:

Mediante JavaScript
$('.dropdown-toggle').dropdown()
Invoque las listas desplegables mediante JavaScript:

data-toggle="dropdown" still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.

Options

None

Opciones

$().dropdown('toggle')

Métodos

Events

Conmuta el menú desplegable de una barra de navegación o navegación con fichas.

Eventos
Event Type Description
show.bs.dropdown This event fires immediately when the show instance method is called. The toggling anchor element is available as the relatedTarget property of the event.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
hide.bs.dropdown This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the relatedTarget property of the event.
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Ejemplo en la barra de navegación

El plug-in ScrollSpy sirve para actualizar automáticamente los objetos de navegación, con base en la posición de desplazamiento. Desplácese por el área por debajo de la barra de navegación y verá cómo cambia la clase activa. Los ítems secundarios del desplegable se resaltarán también.

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

Uso

Requires relative positioning

No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>.

Mediante atributos de datos

Para agregar comportamiento de Scrollspy a su navegación de barra superior, añada data-spy="scroll" al elemento que desea espiar. (Generalmente este sería el <body>.) Luego aumente el atributo data-target con el ID o la clase del elemento de padre en cualquier componente .nav.

body {
  position: relative;
}
<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Mediante JavaScript

After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('body').scrollspy({ target: '.navbar-example' })

ID de objetos solucionables requeridos

Los enlaces de barra de navegación deben tener objetivos de ID que se puedan resolver. Por ejemplo, un <a href="#home">home</a> debe corresponder a algo en el DOM como <div id="home"></div>.

Non-:visible target elements ignored

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

Métodos

.scrollspy('refresh')

Cuando utilice Scrollspy junto con agregar o quitar los elementos de DOM, deberá invocar el método de actualizar así:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Opciones

Se pueden transmitir las opciones mediante atributos de datos o JavaScript. En el caso de atributos de datos, agregue el nombre de la opción a data-, como en data-offset="".

Nombre Tipo predeterm. descripción
desplazamiento número 10 Los píxeles que se desplazarán desde el tope cuando se calcule la posición de desplazamiento.

Eventos

Tipo de evento Descripción
activate.bs.scrollspy Se inicia este evento cuando un nuevo ítem se activa mediante ScrollSpy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Fichas conmutables tab.js

Fichas de ejemplo

Agregue funcionalidad rápida para fichas con el fin de hacer una transición por medio de paneles de contenido local, incluso menús desplegables.

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.

Se amplia la navegación de fichas.

This plugin extends the tabbed navigation component to add tabbable areas.

Uso

Active fichas que se pueden escoger mediante JavaScript. (Cada ficha debe activarse individualmente,)

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Se pueden activar las fichas individuales de varias formas:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Marcado

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<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>

Efecto de desvanecimiento

Para que las fichas aparezcan gradualmente, agregue .fade a cada .tab-pane. El primer panel de ficha debe tener .in para mostrarse adecuadamente en el contenido inicial.

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

Métodos

$().tab

Se activa un elemento de ficha y el contenedor de contenido. La ficha debe tener un data-target o un href cuyo enfoque sea un nodo de contenedor en el DOM.

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">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 () {
    $('#myTab a:last').tab('show')
  })
</script>

Eventos

Tipo de evento Descripción
show.bs.tab Este evento se lanza cuando se muestra la ficha, pero antes de que se haya desplegado la primera ficha. Utilice event.target y event.relatedTarget para enfocarse en la ficha activa y la ficha activa previa (si fuera el caso), respectivamente.
shown.bs.tab Este evento se lanza cuando se muestra una ficha pero antes de que se haya mostrado cualquier ficha. Utilice event.target y event.relatedTarget para enfocarse en la ficha activa y la ficha activa previa (si fuera el caso), respectivamente.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Herramientas de ayuda o consejo tooltip.js

Esto se inspiró en el excelente plug-in jQuery.tipsy escrito por Jason Frame. Las herramientas de ayuda son versiones actualizadas, que no dependen de imágenes. Se utiliza CSS para animaciones y los atributos de datos de almacenamiento de títulos local.

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Ejemplos

Desplácese por encima de los enlaces siguientes para ver las herramientas de ayuda:

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.

Four directions

Cuatro direcciones
Herramienta en la izquierda

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Funcionalidad opcional

Por motivos de rendimiento, los data-apis de Tooltip y Popover son opcionales, lo que significa que usted mismo debe inicializarlos.

Las herramientas de ayuda en grupos de botones y de entrada requieren configuraciones especiales.

Cuando utiliza herramientas de ayuda en elementos dentro de un .btn-group o un .input-group, tendrá que especificar la opción container: 'body' (descrita a continuación) para evitar efectos secundarios no deseados (tales como el ensanchamiento del elemento y/o la pérdida de esquinas redondeadas cuando se active la herramienta).

Tooltips on disabled elements require wrapper elements

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

Usage

Uso

El plug-in de la herramienta de ayuda genera contenido y marcado bajo demanda, y, de forma predeterminada, coloca las herramientas después de su elemento activador.

Accione las herramientas de ayuda mediante JavaScript.
$('#example').tooltip(options)

Markup

Marcado

El marcado requerido para una herramienta de ayuda es solamente un atributo data y title en el elemento de HTML en el que desee tener una herramienta de ayuda. El marcado generado de una herramienta de ayuda es bastante sencillo, a pesar de que requiere una posición (de manera predeterminada, fijada en la parte superior o top por el plug-in).

Multiple-line links

Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

Enlaces de varias líneas

Options

Opciones

Se pueden transmitir las opciones mediante atributos de datos o JavaScript. Si desea atributos de datos, agregue el nombre de la opción data-, tal como data-animation="".
Name Type Default Description
animation boolean true Apply a CSS fade transition to the tooltip
container string | false false

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

delay number | object 0

Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

html boolean false Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'top' How to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML to use when creating the tooltip.

The tooltip's title will be injected into the .tooltip-inner.

.tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class.

title string | function '' Default title value if title attribute isn't present
trigger string 'hover focus' How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
viewport string | object { selector: 'body', padding: 0 }

Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

Data attributes for individual tooltips

Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.

Methods

Métodos

Attaches a tooltip handler to an element collection.

Agrega un manejador de herramientas de ayuda a una colección de elementos.

Reveals an element's tooltip.

Muestra una herramienta de ayuda de elemento
$('#element').tooltip('show')

.tooltip('hide')

Hides an element's tooltip.

Oculta la herramienta de ayuda de un elemento
$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element's tooltip.

Conmuta la herramienta de ayuda de un elemento.
$('#element').tooltip('toggle')

.tooltip('destroy')

Hides and destroys an element's tooltip.

Oculta y destruye la herramienta de ayuda de un elemento.
$('#element').tooltip('destroy')

Events

Eventos
Event Type Description
show.bs.tooltip This event fires immediately when the show instance method is called.
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.tooltip This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Ejemplos

Agregar pequeñas cubiertas de contenido, como las del iPad, a un elemento para albergar información secundaria.

Plugin dependency

Popovers require the tooltip plugin to be included in your version of Bootstrap.

Dependencia de plug-in

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Funcionalidad opcional

Por motivos de rendimiento, los data-apis de Tooltip y Popover son opcionales, lo que significa que usted mismo debe inicializarlos.

Los popover de grupos de entradas y botones necesitan una configuración especial.

Cuando se usan popovers en elementos de un .btn-group o un .input-group, tendrá que especificar la opción container: 'body' (indicada a continuación) para evitar los efectos secundarios no deseados (tales como que un elemento se haga más ancho y/o pierda sus esquinas redondeadas) cuando se activa el popover.

Popovers on disabled elements require wrapper elements

To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.

Static popover

Four options are available: top, right, bottom, and left aligned.

Popover estático

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

Demostración en vivo
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

Cuatro direcciones
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Multiple-line links

Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

Usage

Uso

Active los popover mediante JavaScript.
$('#example').popover(options)

Options

Opciones

Se pueden transmitir las opciones mediante atributos de datos o JavaScript. Si desea atributos de datos, agregue el nombre de la opción data-, tal como data-animation="".
Name Type Default Description
animation boolean true Apply a CSS fade transition to the popover
container string | false false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

content string | function ''

Default content value if data-content attribute isn't present.

If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.

delay number | object 0

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

html boolean false Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'right' How to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-title.

The popover's content will be injected into the .popover-content.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.

title string | function '' Default title value if title attribute isn't present
trigger string 'click' How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
viewport string | object { selector: 'body', padding: 0 }

Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

Methods

Métodos

Initializes popovers for an element collection.

Inicializa los popover para una colección de elementos.

Reveals an elements popover.

Presenta los popover de un elemento.
$('#element').popover('show')

.popover('hide')

Hides an elements popover.

Oculta el popover de un elemento.
$('#element').popover('hide')

.popover('toggle')

Toggles an elements popover.

Conmuta un popover de un elemento.
$('#element').popover('toggle')

.popover('destroy')

Hides and destroys an element's popover.

Oculta y destruye el popover de un elemento
$('#element').popover('destroy')

Events

Eventos
Event Type Description
show.bs.popover This event fires immediately when the show instance method is called.
shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popover This event is fired immediately when the hide instance method has been called.
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mensajes de alerta alert.js

Alertas de ejemplo

Con este plug-in, puede agregar / descartar la funcionalidad para todos los mensajes de alerta.

Uso

Active el proceso de descartar de una alerta mediante JavaScript.

$(".alert").alert()

Marcado

Solo añada data-dismiss="alert" a su botón de cierre para que automáticamente se active una funcionalidad de alerta de cierre.

<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

Métodos

$().alert()

Encapsula todas las alertas con funcionalidad de cierre. Para asegurarse de que sus alertas se animen gradualmente cuando se cierren, asegúrese de que se hayan aplicado las clases .fade y .ina estas.

.alert('close')

Cierra una alerta.

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

Eventos

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

Tipo de evento Descripción
close.bs.alert Este evento se lanza inmediatamente cuando se invoca el método de instancia close.
closed.bs.alert Este evento se activa cuando se ha cerrado la alerta. (Se esperará hasta que se completen las transiciones de CSS.)
$('#my-alert').on('closed.bs.alert', function () {
  // do something…
})

Botones button.js

Ejemplo de usos

Más opciones de botones. Controle los estados de botones o cree grupos de botones para obtener más componentes como barras de herramientas.

Con estado

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

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Conmutador único

Añada data-toggle="button" para activar la conmutación en un solo botón.

<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>

Casillero de verificación

Añada data-toggle="buttons" a un grupo de casilleros de verificación para lograr una conmutación similar a la de casilleros en un grupo de botones.

Pre-checked options need .active

For pre-checked options, you must add the .active class to the input's label yourself.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Botón de radio

Añada data-toggle="buttons" a un grupo de botones de radio seleccionables para lograr un estilo de conmutación similar en un grupo de botones.

Preselected options need .active

For preselected options, you must add the .active class to the input's label yourself.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Uso

Active los botones mediante JavaScript

$('.btn').button()

Marcado

Los atributos de datos son esenciales para los plug-in de botones. Revise el código de ejemplo siguiente donde hay varios tipos de marcado.

Opciones

Ninguna

Métodos

$().button('toggle')

Activa / desactiva el estado de inserción. Le da al botón la apariencia de activado.

Conmutación automática

Puede activar la conmutación automática de un botón al usar el atributo data-toggle.

<button type="button" class="btn btn-primary" data-toggle="button">...</button>

$().button('loading')

Fija el estado del botón en "se está cargando". Se desactiva el botón y el texto será uno de carga. Se debe definir el texto de carga en el elemento del botón utilizando el atributo de datos data-loading-text.

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Compatibilidad con varios navegadores

Firefox persists form control states across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

Reinicia el estado del botón - permuta el texto al existente originalmente.

$().button(string)

Reinicia el estado del botón - permuta el texto a cualquier estado de texto definido.

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

Colapsar collapse.js

Explicación

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

Dependencia de plug-in

Collapse requires the transitions plugin to be included in your version of Bootstrap.

Ejemplo de acordeón

Utilizando el plug-in de contracción, creamos un acordeón sencillo mediante la extensión del componente de panel.

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.
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        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.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        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.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        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.
      </div>
    </div>
  </div>
</div>

Puede usar también el plug-in sin el marcado de acordeón. Mediante un botón se puede conmutar la expansión y contracción de otro elemento.

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

<div id="demo" class="collapse in">...</div>

Uso

El plug-in de colapsar usa unas pocas clases para manejar el difícil proceso:

  • .collapse hides the content
  • .collapse.in shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

Se incluyen estas clases en component-animations.less.

Mediante atributos de datos

Solo añada data-toggle="collapse" y un data-target al elemento para asignar automáticamente el control a un elemento colapsable. El atributo data-target acepta un seleccionador de CSS al cual se puede aplicar la acción de colapsar. Asegúrese de agregar la clase collapse al elemento colapsable. Si desea que de forma predeterminada se abra, añada la clase adicional in.

Con el fin de agregar un manejo de grupo similar al acordeón a un control colapsable, añada el atributo de datosdata-parent="#selector". Revise la demostración donde se indica cómo funciona.

Mediante JavaScript

Active manualmente con:

$('.collapse').collapse()

Opciones

Se pueden transmitir las opciones con atributos de datos o JavaScript. En el caso de atributos de datos, añada el nombre de opción data-, como en data-parent="".

Nombre Tipo predeterm. descripción
padre seleccionador falso Si escoge seleccionador, todos los elementos colapsables bajo el padre especificado se cerrarán cuando se muestre este ítem colapsable. (De forma similar al comportamiento tradicional del acordeón, esto depende de la clase panel.)
conmutar booleano verdadero Conmuta el elemento de colapso cuando se invoca.

Métodos

.collapse(options)

Activa su contenido como un elemento colapsable. Acepta opciones no obligatorias object.

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

.collapse('toggle')

Conmuta un elemento colapsable para que se muestre u oculte.

.collapse('show')

Muestra un elemento colapsable.

.collapse('hide')

Oculta un elemento colapsable.

Eventos

La clase de colapso de Bootstrap expone unos pocos eventos para acceder a la funcionalidad de contracción

Tipo de evento Descripción
show.bs.collapse Este evento se lanza inmediatamente cuando se invoca el método de instancia show.
shown.bs.collapse Se inicia este evento cuando se ha hecho visible al usuario un elemento colapsable. (Se esperará hasta que se completen las transiciones de CSS.)
hide.bs.collapse Este evento se lanza inmediatamente cuando se invoca el método hide.
hidden.bs.collapse Se inicia este evento cuando se oculta al usuario un elemento colapsable. (Se esperará hasta que se completen las transiciones de CSS.)
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Bandeja circular carousel.js

Las diapositivas siguientes muestran un plug-in genérico y componente para alternar entre elementos, como si se tratara de una bandeja circular.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Leyendas opcionales

Añada leyendas a sus diapositivas fácilmente con el elemento .carousel-caption en cualquier .item. Agregue casi cualquier HTML opcional ahí y se alineará y formateará automáticamente.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Problema de accesibilidad

El componente de bandeja circular generalmente no es compatible con los estándares de accesibilidad. Si necesita esta compatibilidad, por favor considere otras opciones para presentar su contenido.

Varias bandejas circulares

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

Mediante atributos de datos

Utilice atributos de dato para controlar fácilmente la posición de la bandeja circular. data-slide acepta las palabras clave prev o next, que alterna la posición de la diapositiva en relación con su posición actual. Otra opción es usar data-slide-to para pasar el dato de un índice de diapositivas sin procesar a la bandeja circular data-slide-to="2". Esto hace que se desplace la posición de diapositiva a un índice específico que se inicia con 0.

El atributo data-ride="carousel" se usa para marcar una bandeja circular para indicar que la animación se inicia en la carga de página.

Mediante JavaScript

Invoque manualmente la bandeja circular con:

$('.carousel').carousel()

Opciones

Se pueden transmitir las opciones con atributos de datos o JavaScript. En el caso de atributos de datos, añada el nombre de opción data-, como en data-interval="".

Nombre Tipo predeterm. descripción
intervalo número 5000 La cantidad de tiempo de retraso entre el ciclo automático de un ítem. Si es falso, la bandeja circular no pasará por el ciclo automáticamente.
pausa cadena movimiento por encima Detiene el ciclo de la bandeja circular en mouseenter y resume el ciclo de la misma cuando ocurre mouseleave.
encapsulado booleano verdadero Determina si la bandeja circular debe pasar por el ciclo continuamente o que haya paradas fijas.

Métodos

.carousel(options)

Inicializa la bandeja circular con opciones varias object y el ciclo se inicia por los ítems.

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

.carousel('cycle')

Establece un ciclo de ítems de la bandeja circular que va de izquierda a derecha.

.carousel('pause')

Detiene el ciclo de los ítems de la bandeja circular.

.carousel(number)

Hace que el ciclo vaya a una imagen específica (los números se inician en cero, como en las matrices).

.carousel('prev')

Sirve para regresarse al ítem anterior.

.carousel('next')

Sirve para ir al siguiente ítem.

Eventos

La clase de la bandeja circular de Bootstrap expone dos eventos para acceder a su funcionalidad.

Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
Tipo de evento Descripción
slide.bs.carousel Este evento se lanza inmediatamente cuando se invoca el método de instancia slide.
slid.bs.carousel Se activa este evento cuando la bandeja circular ha completado su transición de diapositivas.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix (anexar) affix.js

Ejemplo

La sub-navegación de la derecha es una demostración en vivo del plug-in de affix (adjuntar).


Uso

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Posicionamiento mediante CSS

El plug-in de affix conmuta entre tres clases, cada una de las cuales representa un estado específico: .affix, .affix-top y .affix-bottom. Debe proveer los estilos para estas clases usted mismo (sin depender de este plug-in) con el fin de manejar las posiciones reales.

El plug-in de affix funciona así:

  1. Para comenzar, el plug-in agrega .affix-top para indicar que el elemento está en su posición más superior. En este punto, no se requiere ningún posicionamiento de CSS.
  2. Si se desplaza más allá del elemento que desea adjuntar, esto activará el proceso de affix real. En este punto, .affix reemplaza .affix-top y fija position: fixed;. (Esto lo provee el CSS de Bootstrap.)
  3. Si se define un desplazamiento inferior, al desplazarse más allá del punto, esto reemplaza .affix con .affix-bottom. Debido a que los desplazamientos son opcionales, al configurarlos se requiere fijar un CSS adecuado. En este caso, añada position: absolute;, si fuera necesario. El plug-in usa el atributo de datos o la opción de JavaScript con el fin de determinar dónde posicionar el elemento con respecto a este.

Siga los pasos anteriores para configurar su CSS para cualquiera de las opciones de uso siguientes.

Mediante atributos de datos

Para fácilmente agregar comportamiento de affix a cualquier elemento, solo agregue data-spy="affix" en el elemento que desee espiar. Utilice desplazamientos para definir cuándo se conmutará si se coloca una tachuela en un elemento.

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

Mediante JavaScript

Invoque el plug-in de affix (agregar) con JavaScript

$('#my-affix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

Opciones

Se pueden transmitir las opciones con atributos de datos o JavaScript. En el caso de atributos de datos, añada el nombre de opción data-, como en data-offset-top="200".

Nombre Tipo predeterm. descripción
desplazamiento número | función | objeto 10 Pixeles para desplazar de pantalla cuando se calcule la posición del desplazamiento. Si se indica un solo número, se aplicará el desplazamiento en las direcciones inferior y superior. Para proveer un valor de desplazamiento inferior y superior, solo incluya un objeto offset: { top: 10 } o offset: { top: 10, bottom: 5 }. Utilice una función si requiere calcular dinámicamente un desplazamiento.
target selector | node | jQuery element the window object Specifies the target element of the affix.

Eventos

La clase de affix de Bootstrap expone algunos eventos donde se puede añadir la funcionalidad de affix.

Tipo de evento Descripción
affix.bs.affix Este evento se lanza inmediatamente cuando antes de usar affix en el elemento.
affixed.bs.affix Este evento se lanza inmediatamente después del affix del elemento.
affix-top.bs.affix Este evento se lanza inmediatamente cuando se hace affix en la parter superior.
affixed-top.bs.affix Este evento se lanza inmediatamente después del affix en la parte superior.
affix-bottom.bs.affix Este evento se lanza inmediatamente antes de hacer affix en la parte inferior.
affixed-bottom.bs.affix Este evento se lanza después de hacer affix en la parte inferior.