Visión xeral

Individual ou compilado

Os complementos pódense incluír individualmente (usando os *.jsficheiros individuais de Bootstrap) ou todos á vez (usando bootstrap.jso minificado bootstrap.min.js).

Usando o JavaScript compilado

Ambos bootstrap.jse bootstrap.min.jsconteñen todos os complementos nun único ficheiro. Inclúe só un.

Dependencias de complementos

Algúns complementos e compoñentes CSS dependen doutros complementos. Se inclúes complementos individualmente, asegúrate de comprobar estas dependencias nos documentos. Teña en conta tamén que todos os complementos dependen de jQuery (isto significa que jQuery debe incluírse antes dos ficheiros de complementos). Consulte o nosobower.json para ver que versións de jQuery son compatibles.

Atributos de datos

Podes usar todos os complementos de Bootstrap só a través da API de marcado sen escribir unha soa liña de JavaScript. Esta é a API de primeira clase de Bootstrap e debería ser a túa primeira consideración ao usar un complemento.

Dito isto, nalgunhas situacións pode ser desexable desactivar esta función. Polo tanto, tamén ofrecemos a posibilidade de desactivar a API de atributos de datos desvinculando todos os eventos do documento con espazo de nomes data-api. Isto parece isto:

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

Alternativamente, para apuntar a un complemento específico, simplemente inclúa o nome do complemento como espazo de nomes xunto co espazo de nomes da API de datos como este:

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

Só un complemento por elemento mediante atributos de datos

Non use atributos de datos de varios complementos no mesmo elemento. Por exemplo, un botón non pode ter unha información sobre ferramentas e alternar un modal. Para facelo, use un elemento de envoltura.

API programática

Tamén cremos que deberías poder usar todos os complementos de Bootstrap só a través da API de JavaScript. Todas as API públicas son métodos únicos que se poden encadear e devolven a colección sobre a que se actuou.

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

Todos os métodos deben aceptar un obxecto de opcións opcionais, unha cadea que se dirixe a un método en particular ou nada (que inicia un complemento co comportamento predeterminado):

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

Cada complemento tamén expón o seu construtor bruto nunha Constructorpropiedade: $.fn.popover.Constructor. Se queres obter unha instancia de complemento en particular, obtén directamente desde un elemento: $('[rel="popover"]').data('popover').

Configuración predeterminada

Podes cambiar a configuración predeterminada dun complemento modificando o Constructor.DEFAULTSobxecto do complemento:

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

Sen conflito

Ás veces é necesario usar complementos de Bootstrap con outros marcos de IU. Nestas circunstancias, ocasionalmente poden ocorrer colisións de espazos de nomes. Se isto ocorre, podes chamar .noConflictao complemento do que desexas reverter o valor.

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

Eventos

Bootstrap ofrece eventos personalizados para as accións únicas da maioría dos complementos. Xeralmente, estes veñen nunha forma de infinitivo e de participio pasado, onde o infinitivo (ex. show) se activa ao comezo dun evento, e a súa forma de participio pasado (ex. shown) desenvólvese ao completar unha acción.

A partir da 3.0.0, todos os eventos de Bootstrap teñen espazo de nomes.

Todos os eventos de infinitivo proporcionan preventDefaultfuncionalidade. Isto proporciona a capacidade de deter a execución dunha acción antes de que comece.

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

Números de versión

Pódese acceder á versión de cada un dos complementos jQuery de Bootstrap a través da VERSIONpropiedade do construtor do complemento. Por exemplo, para o complemento de información sobre ferramentas:

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

Non hai opcións especiais cando JavaScript está desactivado

Os complementos de Bootstrap non caen con especial gracia cando JavaScript está desactivado. Se che importa a experiencia do usuario neste caso, úsao <noscript>para explicar a situación (e como volver activar JavaScript) aos teus usuarios e/ou engade as túas propias opcións de reserva personalizadas.

Bibliotecas de terceiros

Bootstrap non admite oficialmente bibliotecas JavaScript de terceiros como Prototype ou jQuery UI. A pesar .noConflictdos eventos separados dos nomes, pode haber problemas de compatibilidade que teñas que solucionar por ti mesmo.

Transicións transition.js

Sobre as transicións

Para efectos de transición sinxelos, inclúa transition.jsunha vez xunto cos outros ficheiros JS. Se estás a usar o compilado (ou minificado) bootstrap.js, non hai que incluír isto, xa está aí.

Que hai dentro

Transition.js é un axudante básico para transitionEndeventos, así como un emulador de transición CSS. Úsano os outros complementos para comprobar a compatibilidade de transición CSS e capturar as transicións pendentes.

Desactivando as transicións

As transicións pódense desactivar globalmente usando o seguinte fragmento de JavaScript, que debe vir despois de cargarse transition.js(ou bootstrap.jsou bootstrap.min.js, segundo o caso):

$.support.transition = false

Modais modal.js

Os modais son sinxelos, pero flexibles, as solicitudes de diálogo coa funcionalidade mínima necesaria e os valores predeterminados intelixentes.

Non se admiten varios modais abertos

Asegúrate de non abrir un modal mentres outro aínda estea visible. Mostrar máis dun modal á vez require un código personalizado.

Colocación de marcas modal

Tenta sempre colocar o código HTML dun modal nunha posición de nivel superior no teu documento para evitar que outros compoñentes afecten o aspecto e/ou a funcionalidade do modal.

Advertencias de dispositivos móbiles

Hai algunhas advertencias sobre o uso de modais en dispositivos móbiles. Consulte os nosos documentos de soporte do navegador para obter máis información.

Debido a como HTML5 define a súa semántica, o autofocusatributo HTML non ten ningún efecto nos modais de Bootstrap. Para conseguir o mesmo efecto, use algún JavaScript personalizado:

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

Exemplos

Exemplo estático

Un modal renderizado con cabeceira, corpo e conxunto de accións no pé.

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

Alterna un modal a través de JavaScript facendo clic no botón de abaixo. Deslizarase cara abaixo e desaparecerá dende a parte superior da páxina.

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

Facer accesibles os modais

Asegúrese de engadir role="dialog"e aria-labelledby="...", facendo referencia ao título modal, a .modal, e role="document"ao .modal-dialogpropio.

Ademais, pode dar unha descrición do seu diálogo modal con aria-describedbyon .modal.

Incorporando vídeos de YouTube

Incorporar vídeos de YouTube en modais require JavaScript adicional que non está en Bootstrap para deter automaticamente a reprodución e moito máis. Consulta esta útil publicación de Stack Overflow para obter máis información.

Tamaños opcionais

Os modais teñen dous tamaños opcionais, dispoñibles mediante clases de modificadores para colocalos nun .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 os modais que simplemente aparecen en lugar de desaparecer para ver, elimina a .fadeclase do teu marcado modal.

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

Usando o sistema de reixa

Para aproveitar o sistema de cuadrícula Bootstrap dentro dun modal, só tes que aniñar .rows dentro do .modal-bodye despois usa as clases normais do sistema de grade.

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

Tes un montón de botóns que activan o mesmo modal, só con contidos lixeiramente diferentes? Use event.relatedTargete atributos HTMLdata-* (posiblemente a través de jQuery ) para variar o contido do modal dependendo do botón que se premeu. Consulte os documentos sobre eventos modais para obter máis información sobre relatedTarget,

... máis botóns...
<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

O complemento modal alterna o teu contido oculto baixo demanda, mediante atributos de datos ou JavaScript. Tamén se engade .modal-openao <body>comportamento de desprazamento predeterminado para anular e xera unha .modal-backdropárea de clic para descartar os modais mostrados ao facer clic fóra do modal.

A través de atributos de datos

Activa un modal sen escribir JavaScript. Establécese data-toggle="modal"nun elemento do controlador, como un botón, xunto cun data-target="#foo"ou href="#foo"para seleccionar un modal específico para alternar.

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

Vía JavaScript

Chame a un modal con id myModalcunha única liña de JavaScript:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-backdrop="".

Nome tipo por defecto descrición
pano de fondo booleano ou a cadea'static' verdade Inclúe un elemento de fondo modal. Alternativamente, especifique staticun fondo que non peche o modal ao facer clic.
teclado booleano verdade Pecha o modal cando se preme a tecla Esc
mostrar booleano verdade Mostra o modal cando se inicializa.
remoto camiño falso

Esta opción está obsoleta desde a versión 3.3.0 e eliminouse na versión 4. Recomendamos no seu lugar usar un modelo do lado do cliente ou un marco de vinculación de datos, ou chamar a jQuery.load vostede mesmo.

Se se proporciona un URL remoto, o contido cargarase unha vez a través do método de jQuery loade inxectarase no .modal-contentdiv. Se está a usar a API de datos, tamén pode utilizar o hrefatributo para especificar a fonte remota. A continuación móstrase un exemplo diso:

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

Métodos

Activa o teu contido como modal. Acepta opcións opcionais object.

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

Alterna manualmente un modal. Volve ao interlocutor antes de que o modal se amosase ou ocultase (é dicir, antes de que se produza o evento shown.bs.modalou ).hidden.bs.modal

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

Abre manualmente un modal. Volve ao interlocutor antes de que se amosara o modal (é dicir, antes de shown.bs.modalque ocorra o evento).

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

Oculta manualmente un modal. Volve ao interlocutor antes de que se ocultase o modal (é dicir, antes de hidden.bs.modalque se produza o evento).

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

Reaxusta o posicionamento do modal para contrarrestar unha barra de desprazamento no caso de que apareza unha, o que faría que o modal salte cara á esquerda.

Só é necesario cando a altura do modal cambia mentres está aberto.

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

Eventos

A clase modal de Bootstrap expón algúns eventos para conectarse á funcionalidade modal.

Todos os eventos modais desenvólvense no propio modal (é dicir, no <div class="modal">).

Tipo de evento Descrición
mostrar.bs.modal Este evento desenvólvese inmediatamente cando showse chama ao método de instancia. Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTargetpropiedade do evento.
mostrado.bs.modal Este evento desenvólvese cando o modal se fixo visible para o usuario (esperará a que se completen as transicións CSS). Se é causado por un clic, o elemento no que se fai clic está dispoñible como relatedTargetpropiedade do evento.
ocultar.bs.modal Este evento desenvólvese inmediatamente cando hidese chamou ao método de instancia.
oculto.bs.modal Este evento desenvólvese cando o modal rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS).
cargado.bs.modal Este evento desenvólvese cando o modal cargou contido mediante a remoteopción.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Menú despregable dropdown.js

Engade menús despregables a case calquera cousa con este sinxelo complemento, incluíndo a barra de navegación, as pestanas e as pílulas.

Dentro dunha barra de navegación

Dentro de pastillas

A través de atributos de datos ou JavaScript, o complemento despregable alterna o contido oculto (menús despregables) alternando a .openclase no elemento da lista principal.

Nos dispositivos móbiles, abrir un menú despregable engádese unha .dropdown-backdropárea de toque para pechar os menús despregables ao tocar fóra do menú, un requisito para a compatibilidade adecuada de iOS. Isto significa que cambiar dun menú despregable aberto a un menú despregable diferente require un toque adicional no móbil.

Nota: data-toggle="dropdown"confía no atributo para pechar menús despregables a nivel de aplicación, polo que é unha boa idea usalo sempre.

A través de atributos de datos

Engadir data-toggle="dropdown"a unha ligazón ou botón para alternar un menú despregable.

<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 manter os URL intactos cos botóns de ligazón, utiliza o 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>

Vía JavaScript

Chame aos menús despregables mediante JavaScript:

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

data-toggle="dropdown"aínda necesario

Independentemente de se chamas ao teu menú despregable mediante JavaScript ou usas a API de datos, data-toggle="dropdown"sempre é necesario que estea presente no elemento de activación do menú despregable.

Ningún

Alterna o menú despregable dunha determinada barra de navegación ou navegación por pestanas.

Todos os eventos do menú despregable desenvólvense no .dropdown-menuelemento principal de '.

Todos os eventos do menú despregable teñen unha relatedTargetpropiedade, cuxo valor é o elemento de áncora alternante.

Tipo de evento Descrición
mostrar.bs.menú despregable Este evento desenvólvese inmediatamente cando se chama ao método show instance.
mostrado.bs.menú despregable Este evento desenvólvese cando o menú despregable se fixo visible para o usuario (esperará a que se completen as transicións CSS).
ocultar.bs.menú despregable Este evento desenvólvese inmediatamente cando se chamou ao método de ocultar instancia.
hidden.bs.menús desplegable Este evento desenvólvese cando o menú despregable rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Exemplo na barra de navegación

O complemento ScrollSpy serve para actualizar automaticamente os obxectivos de navegación en función da posición do desprazamento. Desprázate pola área debaixo da barra de navegación e observa o cambio de clase activa. Tamén se destacarán os subelementos do menú despregable.

@graxas

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antes de que esgotasen qui. Dereitos das bicicletas Tumblr da granxa á mesa. Anim keffiyeh carles cardigan. Fotomatón de Velit seitan mcsweeney 3 wolf moon irure. Suéter Cosby pantalóns curtos de vaquero lomo, sudadera con capucha williamsburg mínimo que probablemente non escoitou falar deles e cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatuado acusamus, cred ironía biodiesel keffiyeh artesán ullamco consequat.

@mdo

Monopatín con bigote Veniam marfa, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camión de comida con camisola cosby tatuada, vinilo non freegan de mcsweeney. Lo-fi wes anderson +1 sartorial. Carles non exercicio estético quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

un

Occaecat commodo aliqua delectus. Fap cervexa artesanal deserunt monopatín ea. Os dereitos das bicicletas Lomo adipisicing banh mi, velit ea are next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS é adipisicing. Consectetur nisi DIY bolsa de mensaxería mínima. Cred ex in, delectus sustentable consectetur fanny pack iphone.

dous

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, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliché ironía, thundercats probablemente non escoitou falar deles consequat hoodie sen glute lo-fi fap aliquip. Traballe antes de que se esgotasen, terry richardson proident brunch non deixa de ter un suéter cosby e tamén un artesán helvético. Cardigan cervexa artesanal seitán readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Uso

Require Bootstrap Nav

Scrollspy actualmente require o uso dun compoñente de navegación Bootstrap para resaltar correctamente as ligazóns activas.

Requírense obxectivos de identificación resolubles

As ligazóns da barra de navegación deben ter obxectivos de identificación resolubles. Por exemplo, un <a href="#home">home</a>debe corresponder a algo no DOM como <div id="home"></div>.

Ignoráronse :visibleos elementos non obxectivo

Os elementos de destino que non sexan :visiblesegundo jQuery ignoraranse e os seus correspondentes elementos de navegación nunca se destacarán.

Require posicionamento relativo

Non importa o método de implementación, scrollspy require o uso do position: relative;elemento que estás espiando. Na maioría dos casos este é o <body>. Cando faga scrollspying en elementos distintos do <body>, asegúrese de ter un heightconxunto e overflow-y: scroll;aplicado.

A través de atributos de datos

Para engadir facilmente o comportamento scrollspy á túa navegación da barra superior, engádese data-spy="scroll"ao elemento que queres espiar (normalmente este sería o <body>). A continuación, engade o data-targetatributo co ID ou clase do elemento pai de calquera .navcompoñente 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>

Vía JavaScript

Despois de engadir position: relative;o teu CSS, chama ao scrollspy mediante JavaScript:

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

Métodos

.scrollspy('refresh')

Ao usar scrollspy xunto coa engade ou eliminación de elementos do DOM, terás que chamar ao método de actualización deste xeito:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-offset="".

Nome tipo por defecto descrición
compensar número 10 Píxeles para compensar desde arriba ao calcular a posición do desprazamento.

Eventos

Tipo de evento Descrición
activar.bs.scrollspy Este evento desenvólvese sempre que o scrollspy activa un novo elemento.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Pestanas alternables tab.js

Exemplos de pestanas

Engade funcións de pestanas rápidas e dinámicas para pasar a través dos paneis de contido local, mesmo a través dos menús despregables. Non se admiten as pestanas anidadas.

Denim cru que probablemente non escoitou falar deles shorts de jeans Austin. Nesciunt tofu stumptown aliqua, sintetizador retro cleanse. Bigote cliché 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.

Amplía a navegación por pestanas

Este complemento estende o compoñente de navegación con pestanas para engadir áreas con pestanas.

Uso

Activa as pestanas con tabulacións a través de JavaScript (cada pestana debe activarse individualmente):

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

Podes activar pestanas individuais de varias maneiras:

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

Marcado

Podes activar unha pestana ou navegación por pílulas sen escribir JavaScript simplemente especificando data-toggle="tab"ou data-toggle="pill"nun elemento. Engadindo as clases nave nav-tabsá pestana ulaplicarase o estilo da pestana Bootstrap , mentres que engadindo as clases nave nav-pillsaplicarase o estilo de pílula .

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

Para que as pestanas se desvanezan, engádase .fadea cada unha .tab-pane. O primeiro panel de pestanas tamén debe .infacer visible o contido 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 pestana e un contenedor de contido. A pestana debería ter un nodo de contedores data-targetou un hrefnodo de destino no DOM. Nos exemplos anteriores, as pestanas son as <a>s con data-toggle="tab"atributos.

.tab('show')

Selecciona a pestana indicada e mostra o seu contido asociado. Calquera outra pestana seleccionada anteriormente non se selecciona e o contido asociado queda oculto. Volve ao interlocutor antes de que se amosara o panel de pestanas (é dicir, antes de shown.bs.tabque se produza o evento).

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

Eventos

Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:

  1. hide.bs.tab(na pestana activa actual)
  2. show.bs.tab(na pestana por mostrar)
  3. hidden.bs.tab(na pestana activa anterior, a mesma que para o hide.bs.tabevento)
  4. shown.bs.tab(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tabevento)

Se xa non estaba activa ningunha pestana, os eventos hide.bs.tabe hidden.bs.tabnon se activarán.

Tipo de evento Descrición
mostrar.bs.tab Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use event.targete event.relatedTargetpara orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.
mostrado.bs.tab Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use event.targete event.relatedTargetpara orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.
ocultar.bs.tab Este evento desenvólvese cando se quere mostrar unha nova pestana (e, polo tanto, debe ocultarse a pestana activa anterior). Use event.targete event.relatedTargetpara orientar a pestana activa actual e a nova pestana que estará activa en breve, respectivamente.
hidden.bs.tab Este evento desenvólvese despois de que se amose unha nova pestana (e polo tanto se oculta a pestana activa anterior). Use event.targete event.relatedTargetpara apuntar á pestana activa anterior e á nova pestana 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 ferramentas tooltip.js

Inspirado no excelente complemento jQuery.tipsy escrito por Jason Frame; As informacións sobre ferramentas son unha versión actualizada, que non dependen de imaxes, usan CSS3 para animacións e atributos de datos para o almacenamento local de títulos.

Os consellos de ferramentas con títulos de lonxitude cero nunca se amosan.

Exemplos

Pasa o cursor polas seguintes ligazóns para ver consellos:

Pantalóns axustados seguinte nivel keffiyeh probablemente non escoitou falar deles. Fotomatón barba denim crudo tipografía bolsa de mensajería vegana stumptown. Seitan da granxa á mesa, o fixie de quinoa sustentable de mcsweeney de 8 bits American Apparel teñen un cambray de vinilo terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artesán realmente irónico calquera que sexa keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim café de orixe única viral.

Información sobre ferramentas estática

Hai catro opcións dispoñibles: arriba, dereita, inferior e aliñada á esquerda.

Catro direccións

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

Funcionalidade de activación

Por razóns de rendemento, a información sobre ferramentas e as apis de datos Popover están activadas, o que significa que debes inicializalas ti mesmo .

Unha forma de inicializar todas as suxestións dunha páxina sería seleccionalas polo seu data-toggleatributo:

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

Uso

O complemento de información sobre ferramentas xera contido e marcas baixo demanda e, por defecto, coloca as informacións sobre ferramentas despois do seu elemento de activación.

Activa a información sobre ferramentas mediante JavaScript:

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

Marcado

O marcado necesario para unha información sobre ferramentas é só un dataatributo e titleno elemento HTML desexa ter unha información sobre ferramentas. O marcado xerado dunha información sobre ferramentas é bastante sinxelo, aínda que require unha posición (por defecto, definida toppolo 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>

Ligazóns de varias liñas

Ás veces quere engadir unha información sobre ferramentas a unha hiperligazón que envolve varias liñas. O comportamento predeterminado do complemento de información sobre ferramentas é centralo horizontal e verticalmente. Engade white-space: nowrap;ás túas áncoras para evitar isto.

As informacións sobre ferramentas en grupos de botóns, grupos de entrada e táboas requiren unha configuración especial

Cando utilice información sobre ferramentas sobre elementos dentro dun .btn-groupou un .input-group, ou sobre elementos relacionados coa táboa ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), terá que especificar a opción container: 'body'(documentada a continuación) para evitar efectos secundarios non desexados (como o elemento que se amplía e/ ou perder as súas esquinas redondeadas cando se activa a información sobre ferramentas).

Non tente mostrar ferramentas sobre elementos ocultos

Invocar $(...).tooltip('show')cando está o elemento de destino display: none;fará que a información sobre ferramentas estea colocada incorrectamente.

Suxestións accesibles para usuarios de teclado e tecnoloxía de asistencia

Para os usuarios que navegan cun teclado e, en particular, os usuarios de tecnoloxías de asistencia, só debería engadir información sobre ferramentas a elementos centrados no teclado, como ligazóns, controis de formulario ou calquera elemento arbitrario cun tabindex="0"atributo.

As informacións sobre ferramentas sobre elementos desactivados requiren elementos de envoltura

Para engadir unha información sobre ferramentas a un elemento disabledou .disabled, coloque o elemento dentro de a <div>e aplíquelle a información sobre ferramentas <div>.

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-animation="".

Nome Tipo Por defecto Descrición
animación booleano verdade Aplique unha transición de fundido CSS á información sobre ferramentas
envase cadea | falso falso

Engade a información sobre ferramentas a un elemento específico. Exemplo: container: 'body'. Esta opción é particularmente útil porque permite situar a información sobre ferramentas no fluxo do documento preto do elemento desencadeador, o que evitará que a información sobre ferramentas flote lonxe do elemento desencadeador durante un cambio de tamaño da xanela.

atraso número | obxecto 0

Atraso para mostrar e ocultar a información sobre ferramentas (ms): non se aplica ao tipo de activación manual

Se se proporciona un número, aplícase un atraso tanto para ocultar como para mostrar

A estrutura do obxecto é:delay: { "show": 500, "hide": 100 }

html booleano falso Insira HTML na información sobre ferramentas. textSe é falso, empregarase o método de jQuery para inserir contido no DOM. Usa texto se estás preocupado polos ataques XSS.
colocación cadea | función 'arriba'

Como colocar a información sobre ferramentas - arriba | inferior | esquerda | dereito | auto.
Cando se especifica "auto", reorientará dinámicamente a información sobre ferramentas. Por exemplo, se a colocación é "esquerda automática", a información sobre ferramentas mostrarase á esquerda cando sexa posible; se non, aparecerá á dereita.

Cando se usa unha función para determinar a colocación, chámase co nodo DOM da información sobre ferramentas como primeiro argumento e o nodo DOM do elemento desencadeante como segundo. O thiscontexto establécese na instancia da información sobre ferramentas.

selector corda falso Se se proporciona un selector, os obxectos de información sobre ferramentas delegaranse nos obxectivos especificados. Na práctica, utilízase para permitir que o contido HTML dinámico teña información sobre ferramentas engadidas. Vexa isto e un exemplo informativo .
modelo corda '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML base para usar ao crear a información sobre ferramentas.

A información de ferramentas titleinxectarase no .tooltip-inner.

.tooltip-arrowconverterase na frecha da información sobre ferramentas.

O elemento de envoltura máis externo debería ter a .tooltipclase.

título cadea | función ''

Valor predeterminado do título se titleo atributo non está presente.

Se se dá unha función, chamarase coa súa thisreferencia definida ao elemento ao que está anexa a información sobre ferramentas.

disparador corda 'foco do rato' Como se activa a información sobre ferramentas: fai clic en | pasar o rato | foco | manual. Podes pasar varios disparadores; separalos cun espazo. manualnon se pode combinar con ningún outro disparador.
xanela cadea | obxecto | función { selector: 'corpo', recheo: 0}

Mantén a información sobre ferramentas dentro dos límites deste elemento. Exemplo: viewport: '#viewport'ou{ "selector": "#viewport", "padding": 0 }

Se se dá unha función, chámase co nodo DOM do elemento desencadeante como único argumento. O thiscontexto establécese na instancia da información sobre ferramentas.

Atributos de datos para información sobre ferramentas individuais

Alternativamente, pódense especificar opcións para consellos individuais mediante o uso de atributos de datos, como se explicou anteriormente.

Métodos

$().tooltip(options)

Anexa un controlador de información sobre ferramentas a unha colección de elementos.

.tooltip('show')

Revela a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se amosase a información sobre ferramentas (é dicir, antes de shown.bs.tooltipque se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas. Os consellos de ferramentas con títulos de lonxitude cero nunca se amosan.

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

.tooltip('hide')

Oculta a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se ocultase a información sobre ferramentas (é dicir, antes de hidden.bs.tooltipque se produza o evento). Isto considérase unha activación "manual" da información sobre ferramentas.

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

.tooltip('toggle')

Alterna a información sobre ferramentas dun elemento. Volve ao interlocutor antes de que se amosase ou ocultase a información sobre ferramentas (é dicir, antes de que se produza o evento shown.bs.tooltipou ). hidden.bs.tooltipIsto considérase unha activación "manual" da información sobre ferramentas.

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

.tooltip('destroy')

Oculta e destrúe a información sobre ferramentas dun elemento. As informacións sobre ferramentas que usan a delegación (que se crean mediante a selectoropción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.

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

Eventos

Tipo de evento Descrición
mostrar.bs.información Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado.bs.información Este evento desenvólvese cando a información sobre ferramentas se fixo visible para o usuario (esperará a que se completen as transicións CSS).
ocultar.bs.información Este evento desenvólvese inmediatamente cando hidese chamou ao método de instancia.
información oculta.bs Este evento desenvólvese cando a información sobre ferramentas rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS).
inserido.bs.información Este evento desenvólvese despois do show.bs.tooltipevento cando se engadiu o modelo de información sobre ferramentas ao DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Engade pequenas superposicións de contido, como as do iPad, a calquera elemento para albergar información secundaria.

Os popovers cuxo título e contido son de lonxitude cero nunca se mostran.

Dependencia do complemento

Os popovers requiren que o complemento de información sobre ferramentas estea incluído na súa versión de Bootstrap.

Funcionalidade de activación

Por razóns de rendemento, a información sobre ferramentas e as apis de datos Popover están activadas, o que significa que debes inicializalas ti mesmo .

Unha forma de inicializar todos os popovers nunha páxina sería seleccionalos polo seu data-toggleatributo:

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

Os popovers en grupos de botóns, grupos de entrada e táboas requiren unha configuración especial

Ao usar popovers en elementos dentro dun .btn-groupou un .input-group, ou en elementos relacionados coa táboa ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), terás que especificar a opción container: 'body'(documentada a continuación) para evitar efectos secundarios non desexados (como o elemento que se amplía e/ ou perder as súas esquinas redondeadas cando se activa o popover).

Non tente mostrar popovers en elementos ocultos

Invocar $(...).popover('show')cando está o elemento de destino display: none;fará que o popover estea posicionado incorrectamente.

Os popovers en elementos desactivados requiren elementos de envoltura

Para engadir un popover a un elemento disabledou .disabled, pon o elemento dentro de a <div>e aplícalo <div>no seu lugar.

Ligazóns de varias liñas

Ás veces quere engadir un popover a un hipervínculo que envolve varias liñas. O comportamento predeterminado do complemento popover é centralo horizontal e verticalmente. Engade white-space: nowrap;ás túas áncoras para evitar isto.

Exemplos

Popover estático

Hai catro opcións dispoñibles: arriba, dereita, inferior e aliñada á esquerda.

Parte superior popover

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

Popover á dereita

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

Fondo popover

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

Popover á esquerda

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

Demo en directo

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

Catro direccións

<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 no seguinte clic

Use o focusdisparador para descartar popovers no seguinte clic que faga o usuario.

Requírese un marcado específico para descartar ao facer clic ao seguinte

Para un comportamento adecuado entre navegadores e plataformas, debes usar a <a>etiqueta, non a <button>etiqueta, e tamén debes incluír os atributos role="button"e .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

Activar popovers mediante JavaScript:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-animation="".

Nome Tipo Por defecto Descrición
animación booleano verdade Aplique unha transición de fundido CSS ao popover
envase cadea | falso falso

Engade o popover a un elemento específico. Exemplo: container: 'body'. Esta opción é particularmente útil porque permite situar o popover no fluxo do documento preto do elemento activador, o que evitará que o popover flote lonxe do elemento activador durante un cambio de tamaño da xanela.

contido cadea | función ''

Valor de contido predeterminado se data-contento atributo non está presente.

Se se dá unha función, chamarase coa súa thisreferencia definida ao elemento ao que está unido o popover.

atraso número | obxecto 0

Atraso para mostrar e ocultar o popover (ms): non se aplica ao tipo de activación manual

Se se proporciona un número, aplícase un atraso tanto para ocultar como para mostrar

A estrutura do obxecto é:delay: { "show": 500, "hide": 100 }

html booleano falso Insira HTML no popover. textSe é falso, empregarase o método de jQuery para inserir contido no DOM. Usa texto se estás preocupado polos ataques XSS.
colocación cadea | función 'correcto'

Como colocar o popover - arriba | inferior | esquerda | dereito | auto.
Cando se especifica "auto", reorientará dinámicamente o popover. Por exemplo, se a colocación é "esquerda automática", o popover mostrarase á esquerda cando sexa posible; se non, aparecerá á dereita.

Cando se usa unha función para determinar a colocación, chámase co nodo DOM popover como primeiro argumento e o nodo DOM do elemento desencadeante como segundo. O thiscontexto establécese na instancia de popover.

selector corda falso Se se proporciona un selector, os obxectos popover delegaranse nos obxectivos especificados. Na práctica, isto úsase para permitir que o contido HTML dinámico teña aparellos emergentes engadidos. Vexa isto e un exemplo informativo .
modelo corda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML base para usar ao crear o popover.

Os popovers titleinxectaranse no .popover-title.

Os popovers contentinxectaranse no .popover-content.

.arrowconverterase na frecha do popover.

O elemento de envoltura máis externo debería ter a .popoverclase.

título cadea | función ''

Valor predeterminado do título se titleo atributo non está presente.

Se se dá unha función, chamarase coa súa thisreferencia definida ao elemento ao que está unido o popover.

disparador corda 'click' Como se activa o popover: fai clic en | pasar o rato | foco | manual. Podes pasar varios disparadores; separalos cun espazo. manualnon se pode combinar con ningún outro disparador.
xanela cadea | obxecto | función { selector: 'corpo', recheo: 0}

Mantén o popover dentro dos límites deste elemento. Exemplo: viewport: '#viewport'ou{ "selector": "#viewport", "padding": 0 }

Se se dá unha función, chámase co nodo DOM do elemento desencadeante como único argumento. O thiscontexto establécese na instancia de popover.

Atributos de datos para popovers individuais

As opcións para popovers individuais pódense especificar alternativamente mediante o uso de atributos de datos, como se explicou anteriormente.

Métodos

$().popover(options)

Inicia os popovers para unha colección de elementos.

.popover('show')

Revela o popover dun elemento. Volve ao interlocutor antes de que se amosase o popover (é dicir, antes de shown.bs.popoverque se produza o evento). Isto considérase un desencadeamento "manual" do popover. Os popovers cuxo título e contido son de lonxitude cero nunca se mostran.

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

.popover('hide')

Oculta o popover dun elemento. Volve ao interlocutor antes de que se ocultase o popover (é dicir, antes de hidden.bs.popoverque ocorra o evento). Isto considérase un desencadeamento "manual" do popover.

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

.popover('toggle')

Alterna o popover dun elemento. Volve ao interlocutor antes de que se amosase ou ocultase o popover (é dicir, antes de que se produza o evento shown.bs.popoverou ). hidden.bs.popoverIsto considérase un desencadeamento "manual" do popover.

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

.popover('destroy')

Oculta e destrúe o popover dun elemento. Os popovers que usan a delegación (que se crean mediante a selectoropción ) non se poden destruír individualmente nos elementos desencadeantes descendentes.

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

Eventos

Tipo de evento Descrición
mostrar.bs.popover Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado.bs.popover Este evento desenvólvese cando o popover se fixo visible para o usuario (esperará a que se completen as transicións CSS).
ocultar.bs.popover Este evento desenvólvese inmediatamente cando hidese chamou ao método de instancia.
hidden.bs.popover Este evento desenvólvese cando o popover rematou de ocultarse ao usuario (esperará a que se completen as transicións CSS).
inserido.bs.popover Este evento desenvólvese despois do show.bs.popoverevento cando o modelo popover foi engadido ao DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mensaxes de alerta alert.js

Alertas de exemplo

Engade a función de descartar a todas as mensaxes de alerta con este complemento.

Cando se utiliza un .closebotón, debe ser o primeiro fillo do .alert-dismissiblee ningún contido de texto pode aparecer antes no marcado.

Uso

Só tes que engadir data-dismiss="alert"ao teu botón de peche para dar automaticamente unha función de peche de alerta. Ao pechar unha alerta elimínaa do DOM.

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

Para que as túas alertas usen a animación ao pechar, asegúrate de que xa teñan as clases .fadee .inaplicadas.

Métodos

$().alert()

Fai que unha alerta escoite eventos de clic en elementos descendentes que teñen o data-dismiss="alert"atributo. (Non é necesario cando se usa a inicialización automática da API de datos).

$().alert('close')

Pecha unha alerta quitándoa do DOM. Se as clases .fadee .inestán presentes no elemento, a alerta desaparecerá antes de eliminarla.

Eventos

O complemento de alerta de Bootstrap expón algúns eventos para conectarse á funcionalidade de alerta.

Tipo de evento Descrición
pechar.bs.alerta Este evento desenvólvese inmediatamente cando closese chama ao método de instancia.
pechado.bs.alerta Este evento desenvólvese cando se pechou a alerta (esperará a que se completen as transicións CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botóns button.js

Fai máis cos botóns. Controla os estados dos botóns ou crea grupos de botóns para máis compoñentes como barras de ferramentas.

Compatibilidade entre navegadores

Firefox persiste en estados de control de formularios (desactivación e verificación) nas cargas de páxina . Unha solución para isto é usar autocomplete="off". Vexa o erro de Mozilla #654072 .

Estado

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

Esta función está obsoleta desde a versión 3.3.5 e eliminouse na versión 4.

Usa o estado que che guste!

Polo feito desta demostración, estamos a usar data-loading-texte $().button('loading'), pero ese non é o único estado que podes usar. Vexa máis sobre isto a continuación na $().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>

Conmutador único

Engadir data-toggle="button"para activar a alternancia nun só botón.

Os botóns pre-alternados necesitan .activeearia-pressed="true"

Para os botóns activados previamente, debes engadir a .activeclase e o aria-pressed="true"atributo a buttonti mesmo.

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

Caixa de verificación / Radio

Engade data-toggle="buttons"a unha .btn-groupcaixa de verificación ou entradas de radio para activar a alternancia nos seus respectivos estilos.

As opcións preseleccionadas precisan.active

Para as opcións preseleccionadas, debes engadir a .activeclase á entrada de labelti mesmo.

O estado de comprobación visual só se actualiza ao facer clic

Se o estado marcado dun botón da caixa de verificación se actualiza sen activar un clickevento no botón (por exemplo, mediante <input type="reset">ou mediante a configuración da checkedpropiedade da entrada), terás que activar/desactivar a .activeclase na entrada label.

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

Alterna o estado push. Dálle ao botón a aparencia de que foi activado.

$().button('reset')

Restablece o estado do botón: cambia o texto polo texto orixinal. Este método é asíncrono e volve antes de que se complete o restablecemento.

$().button(string)

Cambia o texto a calquera 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 collapse.js

Complemento flexible que utiliza un puñado de clases para facilitar o comportamento de alternar.

Dependencia do complemento

O colapso require que o complemento de transicións estea incluído na súa versión de Bootstrap.

Exemplo

Fai clic nos botóns seguintes para mostrar e ocultar outro elemento mediante os cambios de clase:

  • .collapseoculta o contido
  • .collapsingaplícase durante as transicións
  • .collapse.inmostra o contido

Podes usar unha ligazón co hrefatributo ou un botón co data-targetatributo. En ambos os casos, data-toggle="collapse"é necesario.

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>

Exemplo de acordeón

Amplíe o comportamento de contraer predeterminado para crear un acordeón co compoñente do panel.

Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable VHS.
Anímate a reprochar cliché, enim eiusmod high life acusa a Terry Richardson de calamar. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, son aliqua poñer un paxaro sobre el calamar café de orixe única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carniceiro vice lomo. Leggings occaecat cervexa artesanal da granxa á mesa, denim cru estética sintetizador nesciunt probablemente non escoitou falar deles accusamus labore sustentable 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>

Tamén é posible intercambiar .panel-bodys por .list-groups.

  • Bootply
  • One itmus ac facilin
  • Segundo eros

Fai accesibles os controis de expansión/contratación

Asegúrese de engadir aria-expandedao elemento de control. Este atributo define explícitamente o estado actual do elemento plegable para lectores de pantalla e tecnoloxías auxiliares similares. Se o elemento plegable está pechado por defecto, debería ter un valor de aria-expanded="false". Se configuraches o elemento plegable para que estea aberto de forma predeterminada usando a inclase, configura aria-expanded="true"o control. O complemento activará automaticamente este atributo segundo se abriu ou non o elemento contraíble.

Ademais, se o seu elemento de control está dirixido a un único elemento contraíble, é dicir, o data-targetatributo apunta a un idselector, pode engadir un aria-controlsatributo adicional ao elemento de control, que conteña o idelemento do elemento contraíble. Os lectores de pantalla modernos e tecnoloxías de asistencia similares fan uso deste atributo para ofrecer aos usuarios atallos adicionais para navegar directamente ao propio elemento plegable.

Uso

O complemento de colapso utiliza algunhas clases para xestionar o traballo pesado:

  • .collapseoculta o contido
  • .collapse.inmostra o contido
  • .collapsingengádese cando comeza a transición e elimínase cando remata

Estas clases pódense atopar en component-animations.less.

A través de atributos de datos

Só ten que engadir data-toggle="collapse"e data-targeta ao elemento para asignar automaticamente o control dun elemento plegable. O data-targetatributo acepta un selector CSS ao que aplicar o contraer. Asegúrate de engadir a clase collapseao elemento contraíble. Se queres que se abra por defecto, engade a clase adicional in.

Para engadir unha xestión de grupos de tipo acordeón a un control plegable, engade o atributo de datos data-parent="#selector". Consulta a demostración para ver isto en acción.

Vía JavaScript

Habilitar manualmente con:

$('.collapse').collapse()

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-parent="".

Nome tipo por defecto descrición
pai selector falso Se se proporciona un selector, pecharanse todos os elementos contraíbles baixo o pai especificado cando se mostre este elemento contraíble. (semellante ao comportamento do acordeón tradicional - depende da panelclase)
alternar booleano verdade Alterna o elemento contraíble na invocación

Métodos

.collapse(options)

Activa o teu contido como elemento plegable. Acepta opcións opcionais object.

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

.collapse('toggle')

Alterna un elemento plegable para mostrar ou ocultar. Regresa ao interlocutor antes de que se amosase ou escondese o elemento plegable (é dicir, antes de que se produza o evento shown.bs.collapseou ).hidden.bs.collapse

.collapse('show')

Mostra un elemento plegable. Volve ao interlocutor antes de que se amosara realmente o elemento plegable (é dicir, antes de shown.bs.collapseque se produza o evento).

.collapse('hide')

Oculta un elemento plegable. Volve ao interlocutor antes de que o elemento plegable se escondese (é dicir, antes de hidden.bs.collapseque se produza o evento).

Eventos

A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.

Tipo de evento Descrición
mostrar.bs.colapso Este evento desenvólvese inmediatamente cando showse chama ao método de instancia.
mostrado.bs.colapso Este evento desenvólvese cando un elemento de contraer se fixo visible para o usuario (esperará a que se completen as transicións CSS).
ocultar.bs.colapso Este evento desenvólvese inmediatamente cando hidese chamou ao método.
hidden.bs.colapso Este evento desenvólvese cando se ocultou ao usuario un elemento de contraer (esperará a que se completen as transicións CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Un compoñente de presentación de diapositivas para percorrer elementos, como un carrusel. Non se admiten os carrusels anidados.

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

Engade subtítulos ás túas diapositivas facilmente co .carousel-captionelemento de calquera .item. Coloca case calquera HTML opcional dentro e aliñarase e formatarase automaticamente.

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

Múltiples carruseles

Os carrusels requiren o uso dun idrecipiente no exterior (o .carousel) para que os controis do carrusel funcionen correctamente. Cando engadas varios carrusels ou cambies o carrusel dun carrusel id, asegúrate de actualizar os controis pertinentes.

A través de atributos de datos

Usa atributos de datos para controlar facilmente a posición do carrusel. data-slideacepta as palabras clave prevou next, que altera a posición da diapositiva en relación coa súa posición actual. Alternativamente, úsao data-slide-topara pasar un índice de diapositivas en bruto ao carrusel data-slide-to="2", que cambia a posición da diapositiva a un índice concreto que comeza por 0.

O data-ride="carousel"atributo úsase para marcar un carrusel como animación a partir da carga da páxina. Non se pode usar en combinación coa inicialización explícita de JavaScript (redundante e innecesaria) do mesmo carrusel.

Vía JavaScript

Chamar ao carrusel manualmente con:

$('.carousel').carousel()

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-interval="".

Nome tipo por defecto descrición
intervalo número 5000 A cantidade de tempo que transcorre entre o ciclo automático dun elemento. Se é falso, o carrusel non se moverá automaticamente.
pausa cadea | nulo "pasar" Se se establece en "hover", detén o ciclo do carrusel activado mouseentere retoma o ciclo do carrusel activado mouseleave. Se se define como null, pasar o rato sobre o carrusel non o deterá.
envolver booleano verdade Se o carrusel debe circular de forma continua ou ter paradas duras.
teclado booleano verdade Indica se o carrusel debe reaccionar aos eventos do teclado.

Inicia o carrusel cunhas opcións opcionais objecte comeza a percorrer os elementos.

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

Percorre os elementos do carrusel de esquerda a dereita.

Impide que o carrusel circule por elementos.

Cicla o carrusel a un cadro particular (baseado en 0, semellante a unha matriz).

Ciclos ao elemento anterior.

Ciclos ao seguinte elemento.

A clase de carrusel de Bootstrap expón dous eventos para conectarse á funcionalidade do carrusel.

Ambos eventos teñen as seguintes propiedades adicionais:

  • direction: A dirección na que se despraza o carrusel ( "left"ou ben "right").
  • relatedTarget: o elemento DOM que se está a colocar como elemento activo.

Todos os eventos do carrusel desenvólvense no propio carrusel (é dicir, no <div class="carousel">).

Tipo de evento Descrición
slide.bs.carrusel Este evento desenvólvese inmediatamente cando slidese invoca o método de instancia.
deslizar.bs.carrusel Este evento desenvólvese cando o carrusel completou a súa transición de diapositivas.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afixo affix.js

Exemplo

O complemento de afixos activa position: fixed;e desactiva, emulando o efecto atopado con position: sticky;. A subnavegación da dereita é unha demostración en directo do complemento de afixos.


Uso

Use o complemento de afixos mediante atributos de datos ou manualmente co seu propio JavaScript. En ambas situacións, debes proporcionar CSS para o posicionamento e o ancho do teu contido adxunto.

Nota: Non use o complemento de afixos nun elemento contido nun elemento relativamente posicionado, como unha columna tirada ou empuxada, debido a un erro de renderizado de Safari .

Posicionamento mediante CSS

O complemento de afixos alterna entre tres clases, cada unha representando un estado particular: .affix, .affix-top, e .affix-bottom. Debe proporcionar os estilos, con excepción de position: fixed;on .affix, para estas clases vostede mesmo (independentemente deste complemento) para xestionar as posicións reais.

Así é como funciona o complemento de afixos:

  1. Para comezar, o complemento engádese .affix-toppara indicar que o elemento está na súa posición superior. Neste momento, non se require ningún posicionamento CSS.
  2. Desprazándose ata o elemento que quere colocar debería activar a colocación real. Aquí é onde se .affixsubstitúe .affix-tope se establece position: fixed;(proporcionado polo CSS de Bootstrap).
  3. Se se define un desplazamento inferior, desprazarse máis alá del debería substituír .affixpor .affix-bottom. Dado que as compensacións son opcionais, a configuración dun require que configures o CSS adecuado. Neste caso, engádese position: absolute;cando sexa necesario. O complemento usa o atributo de datos ou a opción JavaScript para determinar onde colocar o elemento desde alí.

Sigue os pasos anteriores para configurar o teu CSS para calquera das opcións de uso que aparecen a continuación.

A través de atributos de datos

Para engadir facilmente un comportamento de afixo a calquera elemento, só tes que engadir data-spy="affix"ao elemento que queres espiar. Use compensacións para definir cando cambiar a fixación dun elemento.

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

Vía JavaScript

Chame ao complemento de afixos mediante JavaScript:

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

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-offset-top="200".

Nome tipo por defecto descrición
compensar número | función | obxecto 10 Píxeles para compensar da pantalla ao calcular a posición do desprazamento. Se se proporciona un só número, a compensación aplicarase tanto na dirección superior como na inferior. Para proporcionar unha compensación única, inferior e superior, basta con proporcionar un obxecto offset: { top: 10 }ou offset: { top: 10, bottom: 5 }. Use unha función cando necesite calcular dinámicamente unha compensación.
obxectivo selector | nodo | elemento jQuery o windowobxecto Especifica o elemento de destino do afixo.

Métodos

.affix(options)

Activa o teu contido como contido adxunto. Acepta opcións opcionais object.

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

.affix('checkPosition')

Recalcula o estado do afixo en función das dimensións, posición e posición de desprazamento dos elementos relevantes. As clases .affix, .affix-top, e .affix-bottomengádense ou elimínanse do contido axustado segundo o novo estado. Este método cómpre chamar sempre que se cambien as dimensións do contido adxunto ou do elemento de destino, para garantir o posicionamento correcto do contido adxunto.

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

Eventos

O complemento de afixos de Bootstrap expón algúns eventos para conectarse á funcionalidade de afixos.

Tipo de evento Descrición
afixo.bs.afixo Este evento desenvólvese inmediatamente antes de que se fixera o elemento.
afixado.bs.afixo Este evento desenvólvese despois de colocar o elemento.
afixo-top.bs.afixo Este evento desenvólvese inmediatamente antes de que o elemento se fixese na parte superior.
afixado-arriba.bs.afixo Este evento desenvólvese despois de colocar o elemento na parte superior.
afixo-baixo.bs.afixo Este evento desenvólvese inmediatamente antes de que o elemento se fixese na parte inferior.
axustado-inferior.bs.afixo Este evento desenvólvese despois de que o elemento se fixera na parte inferior.