Visión general

Individual o compilado

Los complementos se pueden incluir individualmente (usando los *.jsarchivos individuales de Bootstrap) o todos a la vez (usando bootstrap.jso minificado bootstrap.min.js).

Usando el JavaScript compilado

Ambos bootstrap.jsy bootstrap.min.jscontienen todos los complementos en un solo archivo. Incluye solo uno.

Dependencias de complementos

Algunos complementos y componentes CSS dependen de otros complementos. Si incluye plugins individualmente, asegúrese de comprobar si existen estas dependencias en los documentos. También tenga en cuenta que todos los complementos dependen de jQuery (esto significa que jQuery debe incluirse antes de los archivos del complemento). Consulte nuestrobower.json para ver qué versiones de jQuery son compatibles.

Atributos de datos

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

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

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

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

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

Solo un complemento por elemento a través de atributos de datos

No utilice atributos de datos de varios complementos en el mismo elemento. Por ejemplo, un botón no puede tener información sobre herramientas y alternar un modal. Para lograr esto, use un elemento envolvente.

API programática

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

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

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

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

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

Configuración por defecto

Puede cambiar la configuración predeterminada de un complemento modificando el Constructor.DEFAULTSobjeto del complemento:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

No conflicto

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

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

Eventos

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

A partir de la versión 3.0.0, todos los eventos de Bootstrap tienen espacios de nombres.

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

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

Números de versión

Se puede acceder a la versión de cada uno de los complementos jQuery de Bootstrap a través de la VERSIONpropiedad del constructor del complemento. Por ejemplo, para el complemento de información sobre herramientas:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

No hay respaldos especiales cuando JavaScript está deshabilitado

Los complementos de Bootstrap no se recuperan de manera particularmente elegante cuando JavaScript está deshabilitado. Si le importa la experiencia del usuario en este caso, utilícelo <noscript>para explicar la situación (y cómo volver a habilitar JavaScript) a sus usuarios y/o agregue sus propios recursos alternativos personalizados.

Bibliotecas de terceros

Bootstrap no admite oficialmente bibliotecas de JavaScript de terceros como Prototype o jQuery UI. A pesar .noConflictde los eventos con espacio de nombres, puede haber problemas de compatibilidad que deba solucionar por su cuenta.

Transiciones transición.js

Acerca de las transiciones

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

Qué hay adentro

Transition.js es un ayudante básico para transitionEndeventos, así como un emulador de transición CSS. Los otros complementos lo utilizan para verificar la compatibilidad con la transición de CSS y para detectar transiciones colgantes.

Deshabilitar transiciones

Las transiciones se pueden deshabilitar globalmente usando el siguiente fragmento de código de JavaScript, que debe aparecer después de que se haya cargado transition.js(o bootstrap.jso bootstrap.min.js, según sea el caso):

$.support.transition = false

Modales modal.js

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

Múltiples modales abiertos no soportados

Asegúrese de no abrir un modal mientras otro aún esté visible. Mostrar más de un modal a la vez requiere un código personalizado.

Colocación de marcado modal

Siempre trate de colocar el código HTML de un modal en una posición de nivel superior en su documento para evitar que otros componentes afecten la apariencia y/o funcionalidad del modal.

Advertencias para dispositivos móviles

Hay algunas advertencias con respecto al uso de modales en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para obtener más información.

Debido a cómo HTML5 define su semántica, el autofocusatributo HTML no tiene efecto en los modales de Bootstrap. Para lograr el mismo efecto, use JavaScript personalizado:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Ejemplos

Ejemplo estático

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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 -->

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.

<!-- Button trigger modal -->
<button type="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">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>

Hacer modales accesibles

Asegúrese de agregar role="dialog"y aria-labelledby="...", haciendo referencia al título modal, a .modal, y role="document"al .modal-dialogmismo.

Además, puede dar una descripción de su diálogo modal con aria-describedbyon .modal.

Incrustación de videos de YouTube

Incrustar videos de YouTube en modales requiere JavaScript adicional que no está en Bootstrap para detener automáticamente la reproducción y más. Consulte esta útil publicación de desbordamiento de pila para obtener más información.

Tamaños opcionales

Los modales tienen dos tamaños opcionales, disponibles a través de clases de modificadores para colocar en un archivo .modal-dialog.

<!-- Large modal -->
<button type="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">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="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">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Eliminar animación

Para los modales que simplemente aparecen en lugar de aparecer gradualmente, elimine la .fadeclase de su marcado modal.

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

Usando el sistema de cuadrícula

Para aprovechar el sistema de cuadrícula Bootstrap dentro de un modal, simplemente anide .rows dentro de .modal-bodyy luego use las clases normales del sistema de cuadrícula.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </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 -->

¿Tiene un montón de botones que activan el mismo modal, solo que con contenidos ligeramente diferentes? Use event.relatedTargetlos atributos HTMLdata-* (posiblemente a través de jQuery ) para variar el contenido del modal según el botón en el que se hizo clic. Consulte los documentos Modal Events para obtener detalles sobre relatedTarget,

...más botones...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Uso

El complemento modal alterna su contenido oculto a pedido, a través de atributos de datos o JavaScript. También se agrega .modal-openpara <body>anular el comportamiento de desplazamiento predeterminado y genera un .modal-backdroppara proporcionar un área de clic para descartar los modales mostrados al hacer clic fuera del modal.

A través de atributos de datos

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

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

A través de JavaScript

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

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

Opciones

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

Nombre escribe defecto descripción
fondo booleano o la cadena'static' verdadero Incluye un elemento de fondo modal. Alternativamente, especifique staticun fondo que no cierre el modal al hacer clic.
teclado booleano verdadero Cierra el modal cuando se presiona la tecla escape
mostrar booleano verdadero Muestra el modal cuando se inicializa.
remoto sendero falso

Esta opción está en desuso desde la versión 3.3.0 y se eliminó en la versión 4. En su lugar, recomendamos usar plantillas del lado del cliente o un marco de enlace de datos, o llamar a jQuery.load usted mismo.

Si se proporciona una URL remota, el contenido se cargará una vez mediante el método de jQuery loady se inyectará en el .modal-contentdiv. Si está utilizando la API de datos, también puede usar el hrefatributo para especificar la fuente remota. Un ejemplo de esto se muestra a continuación:

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

Métodos

Activa tu contenido como modal. Acepta opciones opcionales object.

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

Cambia manualmente un modal. Vuelve a la persona que llama antes de que se haya mostrado u ocultado el modal (es decir, antes de que ocurra el evento shown.bs.modalo ).hidden.bs.modal

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

Abre manualmente un modal. Vuelve a la persona que llama antes de que se haya mostrado realmente el modal (es decir, antes de shown.bs.modalque ocurra el evento).

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

Oculta manualmente un modal. Vuelve a la persona que llama antes de que se haya ocultado realmente el modal (es decir, antes de hidden.bs.modalque ocurra el evento).

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

Reajusta el posicionamiento del modal para contrarrestar una barra de desplazamiento en caso de que aparezca una, lo que haría que el modal salte hacia la izquierda.

Solo es necesario cuando la altura del modal cambia mientras está abierto.

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

Eventos

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

Todos los eventos modales se activan en el propio modal (es decir, en el <div class="modal">).

Tipo de evento Descripción
mostrar.bs.modal Este evento se activa inmediatamente cuando showse llama al método de instancia. Si es causado por un clic, el elemento en el que se hizo clic está disponible como relatedTargetpropiedad del evento.
mostrado.bs.modal Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones de CSS). Si es causado por un clic, el elemento en el que se hizo clic está disponible como relatedTargetpropiedad del evento.
ocultar.bs.modal Este evento se activa inmediatamente cuando hidese llama al método de instancia.
oculto.bs.modal Este evento se activa cuando el modal ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
cargado.bs.modal Este evento se activa cuando el modal ha cargado contenido usando la remoteopción.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Menús desplegables dropdown.js

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

Dentro de una barra de navegación

dentro de pastillas

A través de atributos de datos o JavaScript, el complemento desplegable alterna el contenido oculto (menús desplegables) al alternar la .openclase en el elemento de la lista principal.

En los dispositivos móviles, al abrir un menú desplegable se agrega un .dropdown-backdropárea de toque para cerrar los menús desplegables al tocar fuera del menú, un requisito para la compatibilidad adecuada con iOS. Esto significa que cambiar de un menú desplegable abierto a un menú desplegable diferente requiere un toque adicional en el dispositivo móvil.

Nota: Se data-toggle="dropdown"confía en el atributo para cerrar los menús desplegables a nivel de aplicación, por lo que es una buena idea usarlo siempre.

A través de atributos de datos

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

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

A través de JavaScript

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

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"todavía se requiere

Independientemente de si llama a su menú desplegable a través de JavaScript o en su lugar usa la API de datos, data-toggle="dropdown"siempre se requiere que esté presente en el elemento desencadenante del menú desplegable.

Ninguna

Alterna el menú desplegable de una barra de navegación determinada o navegación con pestañas.

Todos los eventos desplegables se activan en el .dropdown-menuelemento principal de .

Todos los eventos desplegables tienen una relatedTargetpropiedad, cuyo valor es el elemento ancla de alternancia.

Tipo de evento Descripción
mostrar.bs.desplegable Este evento se activa inmediatamente cuando se llama al método de instancia show.
mostrado.bs.desplegable Este evento se activa cuando el menú desplegable se ha hecho visible para el usuario (esperará a que se completen las transiciones de CSS).
ocultar.bs.desplegable Este evento se activa inmediatamente cuando se llama al método de instancia oculta.
oculto.bs.desplegable Este evento se activa cuando el menú desplegable ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Ejemplo en la barra de navegación

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

@grasa

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antes de que se agotaran qui. Derechos de bicicleta de la granja a la mesa de Tumblr, lo que sea. Cárdigan anim keffiyeh carles. Cabina de fotos de velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui probablemente no hayas oído hablar de ellos et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuado accusamus, cred irony biodiesel keffiyeh artesano ullamco consequat.

@mdo

Veniam marfa bigote monopatín, adipisicing fugiat velit horca barba. Freegan barba aliqua cupidatat mcsweeney's vero. Cupidatat cuatro loko nisi, ea helvetica nulla carles. Camión de comida de suéter cosby tatuado, vinilo quis non freegan de mcsweeney. Lo-fi wes anderson +1 sastrería. Carles ejercicio no estético quis gentrify. Brooklyn adipisicing cerveza artesanal vice keytar deserunt.

una

Occaecat commodo aliqua delectus. Fap craft beer deserunt monopatín ea. Lomo bicicleta derechos adipisicing banh mi, velit ea sunt siguiente nivel locavore café de origen único en magna veniam. Vinilo de identificación de alta vida, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY bolso de mensajero mínimo. Cred ex in, sostenible delectus consectetur riñonera 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.

three

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, bolsa de mensajero culpa marfa lo que sea camión de comida delectus. Sapiente sintetizador id asunción. Locavore sed helvetica cliché ironía, thundercats probablemente no hayas oído hablar de ellos consequat hoodie sin gluten lo-fi fap aliquip. Labore elit placeat antes de que se agotaran, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica craft. Cardigan cerveza artesana seitán readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Uso

Requiere navegación Bootstrap

Scrollspy actualmente requiere el uso de un componente de navegación Bootstrap para resaltar adecuadamente los enlaces activos.

Se requieren objetivos de ID resolubles

Los enlaces de la barra de navegación deben tener objetivos de identificación resolubles. Por ejemplo, <a href="#home">home</a>debe corresponder a algo en el DOM como <div id="home"></div>.

Elementos no :visibleobjetivo ignorados

Los elementos de destino que no estén :visiblede acuerdo con jQuery se ignorarán y sus elementos de navegación correspondientes nunca se resaltarán.

Requiere posicionamiento relativo

Independientemente del método de implementación, scrollspy requiere el uso de position: relative;en el elemento que está espiando. En la mayoría de los casos, este es el <body>. Al hacer scrollspy en elementos que no sean el <body>, asegúrese de tener un heightconjunto y overflow-y: scroll;aplicarlo.

A través de atributos de datos

Para agregar fácilmente el comportamiento de scrollspy a la navegación de la barra superior, agregue data-spy="scroll"el elemento que desea espiar (por lo general, este sería el <body>). Luego agregue el data-targetatributo con el ID o la clase del elemento principal de cualquier .navcomponente de Bootstrap.

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

A través de JavaScript

Después de agregar position: relative;su CSS, llame a scrollspy a través de JavaScript:

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

Métodos

.scrollspy('refresh')

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"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Opciones

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

Nombre escribe defecto descripción
compensar número 10 Píxeles para compensar desde la parte superior al calcular la posición de desplazamiento.

Eventos

Tipo de evento Descripción
activar.bs.scrollspy Este evento se activa cada vez que el scrollspy activa un nuevo elemento.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Pestañas conmutables tab.js

Pestañas de ejemplo

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

Denim crudo, probablemente no hayas oído hablar de los shorts de jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Bigote cliché temporal, williamsburg carles vegan helvetica. Reprehenderit carnicero retro keffiyeh sintetizador atrapasueños. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ropa americana, carnicero 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.

Amplía la navegación con pestañas

Este complemento amplía el componente de navegación con pestañas para agregar áreas con pestañas.

Uso

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

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

Puede activar pestañas individuales de varias maneras:

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

Margen

Puede activar una pestaña o una píldora de navegación sin escribir JavaScript simplemente especificando data-toggle="tab"o data-toggle="pill"en un elemento. Agregar las clases navy a la pestaña aplicará el estilo de la pestaña Bootstrap , mientras que agregar las clases y aplicará el estilo de la píldora .nav-tabsulnavnav-pills

<div>

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

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Efecto de desvanecimiento

Para hacer que las pestañas se desvanezcan, agréguelas .fadea cada .tab-pane. El primer panel de pestañas también debe tener .inpara hacer visible el contenido inicial.

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

Métodos

$().tab

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. En los ejemplos anteriores, las pestañas son las <a>s con data-toggle="tab"atributos.

.tab('show')

Selecciona la pestaña dada y muestra su contenido asociado. Cualquier otra pestaña que se haya seleccionado previamente se deselecciona y su contenido asociado se oculta. Vuelve a la persona que llama antes de que se haya mostrado realmente el panel de pestañas (es decir, antes de shown.bs.tabque ocurra el evento).

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

Eventos

Al mostrar una nueva pestaña, los eventos se activan en el siguiente orden:

  1. hide.bs.tab(en la pestaña activa actual)
  2. show.bs.tab(en la pestaña que se mostrará)
  3. hidden.bs.tab(en la pestaña activa anterior, la misma que para el hide.bs.tabevento)
  4. shown.bs.tab(en la pestaña recién activa recién mostrada, la misma que para el show.bs.tabevento)

Si ninguna pestaña ya estaba activa, los eventos hide.bs.taby hidden.bs.tabno se activarán.

Tipo de evento Descripción
mostrar.bs.tab Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Use event.targety event.relatedTargetpara apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
mostrado.bs.tab Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Use event.targety event.relatedTargetpara apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
ocultar.bs.tab Este evento se activa cuando se va a mostrar una nueva pestaña (y, por lo tanto, se va a ocultar la pestaña activa anterior). Use event.targety event.relatedTargetpara apuntar a la pestaña activa actual y la nueva pestaña que pronto estará activa, respectivamente.
oculto.bs.tab Este evento se activa después de que se muestra una nueva pestaña (y, por lo tanto, se oculta la pestaña activa anterior). Use event.targety event.relatedTargetpara apuntar a la pestaña activa anterior y la nueva pestaña activa, respectivamente.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Información sobre herramientas tooltip.js

Inspirado en el excelente complemento jQuery.tipsy escrito por Jason Frame; La información sobre herramientas es una versión actualizada, que no se basa en imágenes, utiliza CSS3 para animaciones y atributos de datos para el almacenamiento local de títulos.

La información sobre herramientas con títulos de longitud cero nunca se muestra.

Ejemplos

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

Pantalones ajustados al siguiente nivel keffiyeh , probablemente no hayas oído hablar de ellos. Bolso bandolera vegano tipo fotomatón con barba en denim crudo stumptown. El seitán de la granja a la mesa, la ropa americana de 8 bits de quinoa sostenible fixie de mcsweeney tiene un cambray de vinilo terry richardson. Beard stumptown, cárdigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, cuatro loko mcsweeney's cleanse vegan chambray. Un artesano realmente irónico sea cual sea el keytar , scenester de la granja a la mesa .

Información sobre herramientas estática

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

cuatro direcciones

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Funcionalidad de suscripción

Por motivos de rendimiento, las API de información sobre herramientas y ventana emergente son opcionales, lo que significa que debe inicializarlas usted mismo .

Una forma de inicializar toda la información sobre herramientas en una página sería seleccionarla por su data-toggleatributo:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Uso

El complemento de información sobre herramientas genera contenido y marcado a pedido y, de forma predeterminada, coloca información sobre herramientas después de su elemento desencadenante.

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

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

Margen

El marcado requerido para una información sobre herramientas es solo un dataatributo y titleen el elemento HTML que desea tener una información sobre herramientas. El marcado generado de una información sobre herramientas es bastante simple, aunque requiere una posición (de forma predeterminada, establecida toppor el complemento).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Enlaces de varias líneas

A veces desea agregar información sobre herramientas a un hipervínculo que envuelve varias líneas. El comportamiento predeterminado del complemento de información sobre herramientas es centrarlo horizontal y verticalmente. Agregue white-space: nowrap;a sus anclas para evitar esto.

La información sobre herramientas en grupos de botones, grupos de entrada y tablas requiere una configuración especial

Al usar información sobre herramientas en elementos dentro de a .btn-groupo an .input-group, o en elementos relacionados con tablas ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), deberá especificar la opción container: 'body'(documentada a continuación) para evitar efectos secundarios no deseados (como que el elemento se ensanche y/ o perder sus esquinas redondeadas cuando se activa la información sobre herramientas).

No intente mostrar información sobre herramientas en elementos ocultos

Si se invoca $(...).tooltip('show')cuando el elemento de destino es display: none;, la información sobre herramientas se colocará incorrectamente.

Información sobre herramientas accesible para usuarios de teclado y tecnología de asistencia

Para los usuarios que navegan con un teclado y, en particular, los usuarios de tecnologías de asistencia, solo debe agregar información sobre herramientas a los elementos que se pueden enfocar con el teclado, como enlaces, controles de formulario o cualquier elemento arbitrario con un tabindex="0"atributo.

La información sobre herramientas en elementos deshabilitados requiere elementos de envoltura

Para agregar información sobre herramientas a un elemento disabledo .disabled, coloque el elemento dentro de <div>y aplique la información sobre herramientas en <div>su lugar.

Opciones

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

Nombre Escribe Defecto Descripción
animación booleano verdadero Aplicar una transición de fundido CSS a la información sobre herramientas
envase cadena | falso falso

Agrega la información sobre herramientas a un elemento específico. Ejemplo: container: 'body'. Esta opción es particularmente útil porque le permite colocar la información sobre herramientas en el flujo del documento cerca del elemento de activación, lo que evitará que la información sobre herramientas se separe del elemento de activación durante el cambio de tamaño de la ventana.

demora número | objeto 0

Retraso en mostrar y ocultar la información sobre herramientas (ms): no se aplica al tipo de disparo manual

Si se proporciona un número, la demora se aplica tanto para ocultar/mostrar

La estructura del objeto es:delay: { "show": 500, "hide": 100 }

html booleano falso Inserte HTML en la información sobre herramientas. Si es falso, se textusará el método de jQuery para insertar contenido en el DOM. Use texto si le preocupan los ataques XSS.
colocación cadena | función 'parte superior'

Cómo colocar la información sobre herramientas - arriba | abajo | izquierda | derecho | auto.
Cuando se especifica "automático", reorientará dinámicamente la información sobre herramientas. Por ejemplo, si la ubicación es "automáticamente a la izquierda", la información sobre herramientas se mostrará a la izquierda cuando sea posible; de ​​lo contrario, se mostrará a la derecha.

Cuando se usa una función para determinar la ubicación, se llama con el nodo DOM de información sobre herramientas como primer argumento y el nodo DOM del elemento desencadenante como segundo. El thiscontexto se establece en la instancia de información sobre herramientas.

selector cuerda falso Si se proporciona un selector, los objetos de información sobre herramientas se delegarán a los objetivos especificados. En la práctica, esto se usa para permitir que se agregue información sobre herramientas al contenido HTML dinámico. Vea esto y un ejemplo informativo .
modelo cuerda '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML base para usar al crear la información sobre herramientas.

La información sobre herramientas titlese inyectará en el archivo .tooltip-inner.

.tooltip-arrowse convertirá en la flecha de la información sobre herramientas.

El elemento contenedor más externo debe tener la .tooltipclase.

título cadena | función ''

Valor de título predeterminado si titleel atributo no está presente.

Si se proporciona una función, se llamará con su thisconjunto de referencia al elemento al que se adjunta la información sobre herramientas.

generar cuerda 'enfoque flotante' Cómo se activa la información sobre herramientas: haga clic en | flotar | enfoque | manual. Puede pasar varios disparadores; sepáralos con un espacio. manualno se puede combinar con ningún otro disparador.
mirador cadena | objeto | función { selector: 'cuerpo', relleno: 0 }

Mantiene la información sobre herramientas dentro de los límites de este elemento. Ejemplo: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Si se proporciona una función, se llama con el nodo DOM del elemento desencadenante como su único argumento. El thiscontexto se establece en la instancia de información sobre herramientas.

Atributos de datos para información sobre herramientas individuales

Las opciones para información sobre herramientas individuales se pueden especificar alternativamente mediante el uso de atributos de datos, como se explicó anteriormente.

Métodos

$().tooltip(options)

Adjunta un controlador de información sobre herramientas a una colección de elementos.

.tooltip('show')

Revela la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que se muestre la información sobre herramientas (es decir, antes de shown.bs.tooltipque ocurra el evento). Esto se considera una activación "manual" de la información sobre herramientas. La información sobre herramientas con títulos de longitud cero nunca se muestra.

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

.tooltip('hide')

Oculta la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que la información sobre herramientas se haya ocultado (es decir, antes de hidden.bs.tooltipque ocurra el evento). Esto se considera una activación "manual" de la información sobre herramientas.

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

.tooltip('toggle')

Alterna la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que se muestre u oculte la información sobre herramientas (es decir, antes de que ocurra el evento shown.bs.tooltipo ). hidden.bs.tooltipEsto se considera una activación "manual" de la información sobre herramientas.

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

.tooltip('destroy')

Oculta y destruye la información sobre herramientas de un elemento. La información sobre herramientas que utiliza la delegación (que se crea con la selectoropción ) no se puede destruir individualmente en los elementos desencadenantes descendientes.

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

Eventos

Tipo de evento Descripción
mostrar.bs.información sobre herramientas Este evento se activa inmediatamente cuando showse llama al método de instancia.
se muestra.bs.tooltip Este evento se activa cuando la información sobre herramientas se hace visible para el usuario (esperará a que se completen las transiciones de CSS).
ocultar.bs.información sobre herramientas Este evento se activa inmediatamente cuando hidese llama al método de instancia.
oculto.bs.tooltip Este evento se activa cuando la información sobre herramientas ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
insertado.bs.tooltip Este evento se activa después del show.bs.tooltipevento cuando la plantilla de información sobre herramientas se ha agregado al DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popover popover.js

Agregue pequeñas superposiciones de contenido, como las del iPad, a cualquier elemento para albergar información secundaria.

Los popovers cuyo título y contenido tienen una longitud cero nunca se muestran.

Dependencia del complemento

Los popovers requieren que el complemento de información sobre herramientas se incluya en su versión de Bootstrap.

Funcionalidad de suscripción

Por motivos de rendimiento, las API de información sobre herramientas y ventana emergente son opcionales, lo que significa que debe inicializarlas usted mismo .

Una forma de inicializar todos los popovers en una página sería seleccionarlos por su data-toggleatributo:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Los popovers en grupos de botones, grupos de entrada y tablas requieren una configuración especial

Cuando utilice popovers en elementos dentro de a .btn-groupo an .input-group, o en elementos relacionados con tablas ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), deberá especificar la opción container: 'body'(documentada a continuación) para evitar efectos secundarios no deseados (como que el elemento se ensanche y/ o perder sus esquinas redondeadas cuando se activa el popover).

No intente mostrar popovers en elementos ocultos

Si se invoca $(...).popover('show')cuando el elemento de destino es display: none;, la ventana emergente se colocará incorrectamente.

Los popovers en elementos deshabilitados requieren elementos de envoltura

Para agregar un popover a un elemento disabledo .disabled, coloque el elemento dentro de a <div>y aplique el popover en <div>su lugar.

Enlaces de varias líneas

A veces desea agregar una ventana emergente a un hipervínculo que envuelve varias líneas. El comportamiento predeterminado del complemento popover es centrarlo horizontal y verticalmente. Agregue white-space: nowrap;a sus anclas para evitar esto.

Ejemplos

ventana emergente estática

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

Top popover

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

ventana emergente a la derecha

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

parte inferior popover

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

Ventana emergente a la izquierda

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

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

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>

Descartar en el siguiente clic

Use el focusdisparador para descartar popovers en el próximo clic que haga el usuario.

Marcado específico requerido para descartar al siguiente clic

Para un comportamiento adecuado entre navegadores y plataformas, debe usar la <a>etiqueta, no la <button>etiqueta, y también debe incluir los atributos role="button"y .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Uso

Habilitar ventanas emergentes a través de JavaScript:

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

Opciones

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

Nombre Escribe Defecto Descripción
animación booleano verdadero Aplicar una transición de fundido CSS al popover
envase cadena | falso falso

Agrega el popover a un elemento específico. Ejemplo: container: 'body'. Esta opción es especialmente útil porque le permite colocar la ventana emergente en el flujo del documento cerca del elemento de activación, lo que evitará que la ventana emergente se aleje flotando del elemento de activación durante el cambio de tamaño de la ventana.

contenido cadena | función ''

Valor de contenido predeterminado si el data-contentatributo no está presente.

Si se proporciona una función, se llamará con su thisreferencia establecida en el elemento al que se adjunta el popover.

demora número | objeto 0

Retraso en mostrar y ocultar el popover (ms) - no se aplica al tipo de activación manual

Si se proporciona un número, la demora se aplica tanto para ocultar/mostrar

La estructura del objeto es:delay: { "show": 500, "hide": 100 }

html booleano falso Inserte HTML en la ventana emergente. Si es falso, se textusará el método de jQuery para insertar contenido en el DOM. Use texto si le preocupan los ataques XSS.
colocación cadena | función 'Correcto'

Cómo colocar el popover - arriba | abajo | izquierda | derecho | auto.
Cuando se especifica "auto", reorientará dinámicamente el popover. Por ejemplo, si la ubicación es "automáticamente a la izquierda", la ventana emergente se mostrará a la izquierda cuando sea posible; de ​​lo contrario, se mostrará a la derecha.

Cuando se usa una función para determinar la ubicación, se llama con el nodo DOM emergente como primer argumento y el nodo DOM del elemento desencadenante como segundo. El thiscontexto se establece en la instancia de popover.

selector cuerda falso Si se proporciona un selector, los objetos emergentes se delegarán a los destinos especificados. En la práctica, esto se usa para permitir que se agreguen popovers al contenido HTML dinámico. Vea esto y un ejemplo informativo .
modelo cuerda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML base para usar al crear el popover.

Los popover titlese inyectarán en el archivo .popover-title.

Los popover contentse inyectarán en el archivo .popover-content.

.arrowse convertirá en la flecha del popover.

El elemento contenedor más externo debe tener la .popoverclase.

título cadena | función ''

Valor de título predeterminado sititleel atributo no está presente.

Si se proporciona una función, se llamará con su thisreferencia establecida en el elemento al que se adjunta el popover.

generar cuerda 'hacer clic' Cómo se activa el popover: haga clic en | flotar | enfoque | manual. Puede pasar varios disparadores; sepáralos con un espacio. manualno se puede combinar con ningún otro disparador.
mirador cadena | objeto | función { selector: 'cuerpo', relleno: 0 }

Mantiene el popover dentro de los límites de este elemento. Ejemplo: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Si se proporciona una función, se llama con el nodo DOM del elemento desencadenante como su único argumento. El thiscontexto se establece en la instancia de popover.

Atributos de datos para ventanas emergentes individuales

Las opciones para ventanas emergentes individuales se pueden especificar alternativamente mediante el uso de atributos de datos, como se explicó anteriormente.

Métodos

$().popover(options)

Inicializa popovers para una colección de elementos.

.popover('show')

Revela el popover de un elemento. Vuelve a la persona que llama antes de que se haya mostrado realmente el popover (es decir, antes de shown.bs.popoverque ocurra el evento). Esto se considera una activación "manual" del popover. Los popovers cuyo título y contenido tienen una longitud cero nunca se muestran.

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

.popover('hide')

Oculta el popover de un elemento. Vuelve a la persona que llama antes de que se haya ocultado el popover (es decir, antes de hidden.bs.popoverque ocurra el evento). Esto se considera una activación "manual" del popover.

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

.popover('toggle')

Alterna el popover de un elemento. Vuelve a la persona que llama antes de que se muestre u oculte el popover (es decir, antes de que ocurra el evento shown.bs.popovero ). hidden.bs.popoverEsto se considera una activación "manual" del popover.

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

.popover('destroy')

Oculta y destruye el popover de un elemento. Los popovers que usan delegación (que se crean usando la selectoropción ) no se pueden destruir individualmente en elementos desencadenantes descendientes.

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

Eventos

Tipo de evento Descripción
mostrar.bs.popover Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado.bs.popover Este evento se activa cuando el popover se hace visible para el usuario (esperará a que se completen las transiciones de CSS).
ocultar.bs.popover Este evento se activa inmediatamente cuando hidese llama al método de instancia.
oculto.bs.popover Este evento se activa cuando el popover ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
insertado.bs.popover Este evento se activa después del show.bs.popoverevento cuando la plantilla de ventana emergente se ha agregado al DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mensajes de alerta alert.js

Alertas de ejemplo

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

Al usar un .closebotón, debe ser el primer elemento secundario de .alert-dismissibley ningún contenido de texto puede aparecer antes que él en el marcado.

Uso

Simplemente agréguelo data-dismiss="alert"a su botón de cierre para dar automáticamente una funcionalidad de cierre de alerta. Cerrar una alerta la elimina del DOM.

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

Para que sus alertas usen animación al cerrar, asegúrese de que tengan el .fadey.in aplicadas las clases

Métodos

$().alert()

Hace que una alerta escuche eventos de clic en elementos descendientes que tienen el data-dismiss="alert"atributo. (No es necesario cuando se usa la inicialización automática de la API de datos).

$().alert('close')

Cierra una alerta eliminándola del DOM. Si las clases .fadey .inestán presentes en el elemento, la alerta desaparecerá antes de que se elimine.

Eventos

El complemento de alerta de Bootstrap expone algunos eventos para conectarse a la funcionalidad de alerta.

Tipo de evento Descripción
cerrar.bs.alert Este evento se activa inmediatamente cuando closese llama al método de instancia.
cerrado.bs.alerta Este evento se activa cuando se ha cerrado la alerta (esperará a que se completen las transiciones de CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botones boton.js

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.

Compatibilidad entre navegadores

Firefox persiste en los estados de control de formularios (deshabilitado y verificado) a lo largo de las cargas de página . Una solución para esto es usar autocomplete="off". Consulte el error de Mozilla #654072 .

con estado

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

Esta característica está obsoleta desde la versión 3.3.5 y se eliminó en la versión 4.

¡Usa el estado que quieras!

Por el bien de esta demostración, estamos usando data-loading-texty $().button('loading'), pero ese no es el único estado que puede usar. Vea más sobre esto a continuación en la $().button(string)documentación .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Cambio único

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

Los botones pre-alternados necesitan.active yaria-pressed="true"

Para los botones preactivados, debe agregar la .activeclase y el aria-pressed="true"atributo a buttonusted mismo.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Casilla de verificación / Radio

Agregue data-toggle="buttons"a una .btn-groupcasilla de verificación contenedora o entradas de radio para habilitar la alternancia en sus respectivos estilos.

Las opciones preseleccionadas necesitan.active

Para las opciones preseleccionadas, debe agregar la .activeclase a la entrada labelusted mismo.

Estado de verificación visual solo actualizado al hacer clic

Si el estado marcado de un botón de casilla de verificación se actualiza sin disparar un clickevento en el botón (por ejemplo, mediante <input type="reset">o configurando la checkedpropiedad de la entrada), deberá alternar la .activeclase en la entrada labelusted mismo.

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

Métodos

$().button('toggle')

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

$().button('reset')

Restablece el estado del botón: cambia el texto al texto original. Este método es asíncrono y regresa antes de que se haya completado realmente el restablecimiento.

$().button(string)

Cambia el texto a cualquier estado de texto definido por datos.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Contraer colapso.js

Complemento flexible que utiliza un puñado de clases para un comportamiento de alternancia fácil.

Dependencia del complemento

Collapse requiere que el complemento de transiciones se incluya en su versión de Bootstrap.

Ejemplo

Haga clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:

  • .collapseoculta contenido
  • .collapsingse aplica durante las transiciones
  • .collapse.inmuestra contenido

Puede usar un enlace con el hrefatributo o un botón con el data-targetatributo. En ambos casos, data-toggle="collapse"se requiere el.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Ejemplo de acordeón

Extienda el comportamiento de contracción predeterminado para crear un acordeón con el componente del panel.

Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lobo luna tempor, sunt aliqua puso un pájaro en él calamares café de origen único nulla asunción shoreditch et. Nihil anim keffiyeh helvetica, cerveza artesanal labore wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Leggings occaecat cerveza artesanal de la granja a la mesa, denim crudo estética sintetizador nesciunt probablemente no hayas oído hablar de ellos accusamus labore sostenible VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <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" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <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" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <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>

También es posible intercambiar .panel-bodys con .list-groups.

  • arranque
  • Uno itmus ac facilin
  • segundo eros

Hacer que los controles de expandir/contraer sean accesibles

Asegúrese de agregar aria-expandedal elemento de control. Este atributo define explícitamente el estado actual del elemento contraíble para lectores de pantalla y tecnologías de asistencia similares. Si el elemento contraíble está cerrado de forma predeterminada, debería tener un valor de aria-expanded="false". Si configuró el elemento contraíble para que se abra de forma predeterminada usando la inclase, configúrelo aria-expanded="true"en el control en su lugar. El complemento alternará automáticamente este atributo en función de si el elemento plegable se ha abierto o cerrado.

Además, si su elemento de control apunta a un solo elemento contraíble, es decir, el data-targetatributo apunta a un idselector, puede agregar un aria-controlsatributo adicional al elemento de control, que contenga el iddel elemento contraíble. Los lectores de pantalla modernos y las tecnologías de asistencia similares hacen uso de este atributo para proporcionar a los usuarios accesos directos adicionales para navegar directamente al propio elemento contraíble.

Uso

El complemento de colapso utiliza algunas clases para manejar el trabajo pesado:

  • .collapseoculta el contenido
  • .collapse.inmuestra el contenido
  • .collapsingse agrega cuando comienza la transición y se elimina cuando finaliza

Estas clases se pueden encontrar en component-animations.less.

A través de atributos de datos

Simplemente agregue data-toggle="collapse"y data-targetal elemento para asignar automáticamente el control de un elemento contraíble. El data-targetatributo acepta un selector de CSS para aplicar el colapso. Asegúrese de agregar la clase collapseal elemento contraíble. Si desea que se abra de forma predeterminada, agregue la clase adicional in.

Para agregar una administración de grupos similar a un acordeón a un control contraíble, agregue el atributo de datos data-parent="#selector". Consulte la demostración para ver esto en acción.

A través de JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opciones

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

Nombre escribe defecto descripción
padre selector falso Si se proporciona un selector, todos los elementos contraíbles bajo el padre especificado se cerrarán cuando se muestre este elemento contraíble. (similar al comportamiento tradicional del acordeón; esto depende de la panelclase)
palanca booleano verdadero Alterna el elemento contraíble en la invocación

Métodos

.collapse(options)

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

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

.collapse('toggle')

Cambia un elemento colapsable a mostrado u oculto. Vuelve a la persona que llama antes de que el elemento contraíble se haya mostrado u ocultado (es decir, antes de que ocurra el evento shown.bs.collapseo ).hidden.bs.collapse

.collapse('show')

Muestra un elemento plegable. Vuelve a la persona que llama antes de que se haya mostrado realmente el elemento colapsable (es decir, antes de shown.bs.collapseque ocurra el evento).

.collapse('hide')

Oculta un elemento contraíble. Vuelve a la persona que llama antes de que el elemento contraíble se haya ocultado (es decir, antes de hidden.bs.collapseque ocurra el evento).

Eventos

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

Tipo de evento Descripción
show.bs.collapse Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado.bs.collapse Este evento se activa cuando un elemento colapsado se hace visible para el usuario (esperará a que se completen las transiciones CSS).
ocultar.bs.collapse Este evento se activa inmediatamente cuando hidese llama al método.
oculto.bs.collapse Este evento se activa cuando un elemento de colapso se ha ocultado al usuario (esperará a que se completen las transiciones de CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrusel carrusel.js

Un componente de presentación de diapositivas para recorrer los elementos, como un carrusel. Los carruseles anidados no son compatibles.

<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" role="listbox">
    <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" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Subtítulos opcionales

Agregue subtítulos a sus diapositivas fácilmente con el .carousel-captionelemento dentro de cualquier archivo .item. Coloque casi cualquier HTML opcional allí y se alineará y formateará automáticamente.

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

Múltiples carruseles

Los carruseles requieren el uso de un iden el contenedor más externo (el .carousel) para que los controles del carrusel funcionen correctamente. Al agregar varios carruseles, o al cambiar un carrusel id, asegúrese de actualizar los controles relevantes.

A través de atributos de datos

Utilice atributos de datos para controlar fácilmente la posición del carrusel. data-slideacepta las palabras clave prevo next, que altera la posición de la diapositiva en relación con su posición actual. Alternativamente, use data-slide-topara pasar un índice de diapositiva sin procesar al carrusel data-slide-to="2", que cambia la posición de la diapositiva a un índice particular que comienza con 0.

El data-ride="carousel"atributo se usa para marcar un carrusel como animado a partir de la carga de la página. No se puede usar en combinación con la inicialización explícita de JavaScript (redundante e innecesaria) del mismo carrusel.

A través de JavaScript

Carrusel de llamadas manualmente con:

$('.carousel').carousel()

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

Nombre escribe defecto descripción
intervalo número 5000 La cantidad de tiempo de retraso entre el ciclo automático de un elemento. Si es falso, el carrusel no realizará un ciclo automáticamente.
pausa cadena | nulo "flotar" Si se establece en "hover", detiene el ciclo del carrusel mouseentery reanuda el ciclo del carrusel mouseleave. Si se establece en null, pasar el cursor sobre el carrusel no lo pausará.
envolver booleano verdadero Si el carrusel debe circular continuamente o tener paradas bruscas.
teclado booleano verdadero Si el carrusel debe reaccionar a los eventos del teclado.

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

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

Recorre los elementos del carrusel de izquierda a derecha.

Evita que el carrusel pase de un elemento a otro.

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

Pasa al elemento anterior.

Pasa al elemento siguiente.

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

Ambos eventos tienen las siguientes propiedades adicionales:

  • direction: La dirección en la que se desliza el carrusel (ya sea "left"o "right").
  • relatedTarget: El elemento DOM que se desliza en su lugar como el elemento activo.

Todos los eventos del carrusel se activan en el propio carrusel (es decir, en el <div class="carousel">).

Tipo de evento Descripción
diapositiva.bs.carrusel Este evento se activa inmediatamente cuando slidese invoca el método de instancia.
deslizado.bs.carrusel Este evento se activa cuando el carrusel ha completado su transición de diapositivas.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afijo afijo.js

Ejemplo

El complemento de afijo se activa position: fixed;y desactiva, emulando el efecto encontrado con position: sticky;. La subnavegación a la derecha es una demostración en vivo del complemento de afijo.


Uso

Use el complemento de afijo a través de atributos de datos o manualmente con su propio JavaScript. En ambas situaciones, debe proporcionar CSS para el posicionamiento y el ancho de su contenido adjunto.

Nota: No use el complemento de afijo en un elemento contenido en un elemento posicionado relativamente, como una columna empujada o empujada, debido a un error de representación de Safari .

Posicionamiento vía CSS

El complemento de afijo alterna entre tres clases, cada una de las cuales representa un estado particular: .affix, .affix-topy .affix-bottom. Debe proporcionar los estilos, con la excepción de position: fixed;on .affix, para estas clases usted mismo (independientemente de este complemento) para manejar las posiciones reales.

Así es como funciona el complemento de afijo:

  1. Para comenzar, el complemento agrega.affix-top para indicar que el elemento está en su posición más alta. En este punto no se requiere posicionamiento CSS.
  2. Desplazarse más allá del elemento que desea colocar debería activar la fijación real. Aquí es donde .affixreemplaza .affix-topy establece position: fixed;(proporcionado por el CSS de Bootstrap).
  3. Si se define un desplazamiento inferior, el desplazamiento más allá debería reemplazarse .affixcon .affix-bottom. Dado que las compensaciones son opcionales, configurar uno requiere que configure el CSS apropiado. En este caso, agregue position: absolute;cuando sea necesario. El complemento utiliza el atributo de datos o la opción de JavaScript para determinar dónde colocar el elemento desde allí.

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

A través de atributos de datos

Para agregar fácilmente un comportamiento de afijo a cualquier elemento, simplemente agréguelo data-spy="affix"al elemento que desea espiar. Use compensaciones para definir cuándo alternar la fijación de un elemento.

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

A través de JavaScript

Llame al complemento de afijo a través de JavaScript:

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

Opciones

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

Nombre escribe defecto descripción
compensar número | función | objeto 10 Píxeles para compensar desde la pantalla al calcular la posición de desplazamiento. Si se proporciona un solo número, la compensación se aplicará en las direcciones superior e inferior. Para proporcionar un desplazamiento inferior y superior único, simplemente proporcione un objeto offset: { top: 10 }o offset: { top: 10, bottom: 5 }. Utilice una función cuando necesite calcular dinámicamente un desplazamiento.
objetivo seleccionador | nodo | elemento jQuery el windowobjeto Especifica el elemento de destino del afijo.

Métodos

.affix(options)

Activa tu contenido como contenido adjunto. Acepta opciones opcionales object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Vuelve a calcular el estado del afijo en función de las dimensiones, la posición y la posición de desplazamiento de los elementos relevantes. Las clases .affix, .affix-topy .affix-bottomse agregan o eliminan del contenido adjunto de acuerdo con el nuevo estado. Es necesario llamar a este método cada vez que se cambien las dimensiones del contenido adjunto o el elemento de destino, para garantizar el posicionamiento correcto del contenido adjunto.

$('#myAffix').affix('checkPosition')

Eventos

El complemento de afijo de Bootstrap expone algunos eventos para conectarse a la funcionalidad de afijo.

Tipo de evento Descripción
afijo.bs.afijo Este evento se activa inmediatamente antes de que se haya fijado el elemento.
afijo.bs.afijo Este evento se activa después de que se haya fijado el elemento.
afijo-superior.bs.afijo Este evento se activa inmediatamente antes de que el elemento se haya colocado en la parte superior.
afijo-top.bs.affix Este evento se activa después de que el elemento se haya colocado en la parte superior.
afijo-fondo.bs.afijo Este evento se activa inmediatamente antes de que el elemento se haya colocado en la parte inferior.
adjunto-fondo.bs.affix Este evento se activa después de que el elemento se haya colocado en la parte inferior.