Visão geral

Individual ou compilado

Os plugins podem ser incluídos individualmente (usando *.jsarquivos individuais do Bootstrap), ou todos de uma vez (usando bootstrap.jsou o minified bootstrap.min.js).

Usando o JavaScript compilado

Ambos bootstrap.jse bootstrap.min.jscontêm todos os plugins em um único arquivo. Inclua apenas um.

Dependências de plug-in

Alguns plugins e componentes CSS dependem de outros plugins. Se você incluir plugins individualmente, certifique-se de verificar essas dependências nos documentos. Observe também que todos os plugins dependem do jQuery (isso significa que o jQuery deve ser incluído antes dos arquivos do plugin). Consulte nossobower.json para ver quais versões do jQuery são suportadas.

Atributos de dados

Você pode usar todos os plugins do Bootstrap puramente por meio da API de marcação sem escrever uma única linha de JavaScript. Esta é a API de primeira classe do Bootstrap e deve ser sua primeira consideração ao usar um plugin.

Dito isso, em algumas situações, pode ser desejável desativar essa funcionalidade. Portanto, também fornecemos a capacidade de desabilitar a API de atributo de dados desvinculando todos os eventos no documento com namespace data-api. Isso se parece com isso:

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

Como alternativa, para segmentar um plug-in específico, basta incluir o nome do plug-in como um namespace junto com o namespace data-api assim:

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

Apenas um plugin por elemento via atributos de dados

Não use atributos de dados de vários plugins no mesmo elemento. Por exemplo, um botão não pode ter uma dica de ferramenta e alternar um modal. Para fazer isso, use um elemento de encapsulamento.

API programática

Também acreditamos que você deve ser capaz de usar todos os plugins Bootstrap puramente por meio da API JavaScript. Todas as APIs públicas são métodos únicos e encadeados e retornam a coleção em que atua.

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

Todos os métodos devem aceitar um objeto de opções opcional, uma string que tem como alvo um método específico ou nada (que inicia um plugin com comportamento padrão):

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

Cada plugin também expõe seu construtor bruto em uma Constructorpropriedade: $.fn.popover.Constructor. Se você quiser obter uma instância de plug-in específica, recupere-a diretamente de um elemento: $('[rel="popover"]').data('popover').

Configurações padrão

Você pode alterar as configurações padrão de um plug-in modificando o Constructor.DEFAULTSobjeto do plug-in:

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

Sem conflito

Às vezes é necessário usar plugins do Bootstrap com outros frameworks de UI. Nessas circunstâncias, colisões de namespace podem ocorrer ocasionalmente. Se isso acontecer, você pode chamar .noConflicto plugin para o qual deseja reverter o valor.

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

Eventos

O Bootstrap fornece eventos personalizados para ações exclusivas da maioria dos plugins. Geralmente, eles vêm na forma de infinitivo e particípio passado - onde o infinitivo (ex. show) é acionado no início de um evento e sua forma de particípio passado (ex. shown) é acionada na conclusão de uma ação.

A partir da versão 3.0.0, todos os eventos do Bootstrap têm namespace.

Todos os eventos infinitivos fornecem preventDefaultfuncionalidade. Isso fornece a capacidade de interromper a execução de uma ação antes que ela comece.

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

Números de versão

A versão de cada um dos plugins jQuery do Bootstrap pode ser acessada através da VERSIONpropriedade do construtor do plugin. Por exemplo, para o plug-in de dica de ferramenta:

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

Sem fallbacks especiais quando o JavaScript está desabilitado

Os plugins do Bootstrap não retornam de forma particularmente graciosa quando o JavaScript está desabilitado. Se você se preocupa com a experiência do usuário nesse caso, use <noscript>para explicar a situação (e como reativar o JavaScript) para seus usuários e/ou adicione seus próprios fallbacks personalizados.

Bibliotecas de terceiros

O Bootstrap não suporta oficialmente bibliotecas JavaScript de terceiros, como Prototype ou jQuery UI. Apesar .noConflictdos eventos com namespace, pode haver problemas de compatibilidade que você precisa corrigir por conta própria.

Transições transição.js

Sobre transições

Para efeitos de transição simples, inclua transition.jsuma vez ao lado dos outros arquivos JS. Se você estiver usando o compilado (ou minificado) bootstrap.js, não há necessidade de incluí-lo - ele já está lá.

O que está dentro

Transition.js é um auxiliar básico para transitionEndeventos, bem como um emulador de transição CSS. Ele é usado por outros plugins para verificar o suporte de transição CSS e capturar transições suspensas.

Desativando transições

As transições podem ser desativadas globalmente usando o seguinte snippet de JavaScript, que deve vir após transition.js(ou bootstrap.jsou bootstrap.min.js, conforme o caso) ser carregado:

$.support.transition = false

Modais modal.js

Os modais são prompts de diálogo simplificados, mas flexíveis, com a funcionalidade mínima necessária e padrões inteligentes.

Vários modais abertos não suportados

Certifique-se de não abrir um modal enquanto outro ainda estiver visível. Mostrar mais de um modal por vez requer código personalizado.

Colocação de marcação modal

Sempre tente colocar o código HTML de um modal em uma posição de nível superior em seu documento para evitar que outros componentes afetem a aparência e/ou funcionalidade do modal.

Advertências para dispositivos móveis

Existem algumas ressalvas em relação ao uso de modais em dispositivos móveis. Consulte nossos documentos de suporte do navegador para obter detalhes.

Devido à forma como o HTML5 define sua semântica, o autofocusatributo HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado:

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

Exemplos

Exemplo estático

Um modal renderizado com cabeçalho, corpo e conjunto de ações no rodapé.

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

Demonstração ao vivo

Alterne um modal via JavaScript clicando no botão abaixo. Ele deslizará para baixo e desaparecerá do topo da 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>

Torne os modais acessíveis

Certifique-se de adicionar role="dialog"e aria-labelledby="...", referenciando o título modal, para .modale role="document"para o .modal-dialogpróprio.

Além disso, você pode fornecer uma descrição de sua caixa de diálogo modal com aria-describedbyon .modal.

Incorporando vídeos do YouTube

A incorporação de vídeos do YouTube em modais requer JavaScript adicional que não está no Bootstrap para interromper automaticamente a reprodução e muito mais. Veja esta postagem útil do Stack Overflow para obter mais informações.

Tamanhos opcionais

Os modais têm dois tamanhos opcionais, disponíveis por meio de classes modificadoras para serem colocadas em um arquivo .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>

Remover animação

Para modais que simplesmente aparecem em vez de aparecer gradualmente, remova a .fadeclasse de sua marcação modal.

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

Usando o sistema de grade

Para tirar vantagem do sistema de grade do Bootstrap dentro de um modal, apenas aninhe .rows dentro do .modal-bodye então use as classes 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 -->

Tem um monte de botões que acionam o mesmo modal, apenas com conteúdos ligeiramente diferentes? Use event.relatedTargete atributos HTMLdata-* (possivelmente via jQuery ) para variar o conteúdo do modal dependendo de qual botão foi clicado. Consulte os documentos do Modal Events para obter detalhes sobre relatedTarget,

...mais botões...
<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 plug-in modal alterna seu conteúdo oculto sob demanda, por meio de atributos de dados ou JavaScript. Ele também adiciona .modal-openao <body>comportamento de rolagem padrão para substituir e gera um .modal-backdroppara fornecer uma área de clique para dispensar os modais mostrados ao clicar fora do modal.

Por atributos de dados

Ative um modal sem escrever JavaScript. Definido data-toggle="modal"em um elemento do controlador, como um botão, junto com um data-target="#foo"ou href="#foo"para direcionar um modal específico para alternar.

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

Por JavaScript

Chame um modal com id myModalcom uma única linha de JavaScript:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-backdrop="".

Nome modelo predefinição Descrição
pano de fundo booleano ou a string'static' verdadeiro Inclui um elemento de pano de fundo modal. Como alternativa, especifique staticum pano de fundo que não feche o modal ao clicar.
teclado boleano verdadeiro Fecha o modal quando a tecla Escape é pressionada
mostrar boleano verdadeiro Mostra o modal quando inicializado.
controlo remoto caminho falso

Esta opção está obsoleta desde a v3.3.0 e foi removida na v4. Recomendamos usar templates do lado do cliente ou uma estrutura de vinculação de dados, ou chamar jQuery.load você mesmo.

Se uma URL remota for fornecida, o conteúdo será carregado uma vez pelo método do jQuery loade injetado na .modal-contentdiv. Se você estiver usando a API de dados, poderá usar alternativamente o hrefatributo para especificar a origem remota. Um exemplo disso é mostrado abaixo:

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

Métodos

Ativa seu conteúdo como um modal. Aceita opções opcionais object.

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

Alterna manualmente um modal. Retorna ao chamador antes que o modal tenha sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.modalor hidden.bs.modalocorra).

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

Abre manualmente um modal. Retorna ao chamador antes que o modal seja realmente mostrado (ou seja, antes que o shown.bs.modalevento ocorra).

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

Oculta manualmente um modal. Retorna ao chamador antes que o modal tenha sido realmente oculto (ou seja, antes que o hidden.bs.modalevento ocorra).

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

Reajusta o posicionamento do modal para contrariar uma barra de rolagem caso apareça alguma, o que faria o modal pular para a esquerda.

Necessário apenas quando a altura do modal muda enquanto está aberto.

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

Eventos

A classe modal do Bootstrap expõe alguns eventos para conexão com a funcionalidade modal.

Todos os eventos modais são disparados no próprio modal (ou seja, no <div class="modal">).

Tipo de evento Descrição
show.bs.modal Este evento é acionado imediatamente quando o showmétodo de instância é chamado. Se causado por um clique, o elemento clicado fica disponível como relatedTargetpropriedade do evento.
mostrado.bs.modal Este evento é acionado quando o modal se torna visível para o usuário (aguardará a conclusão das transições CSS). Se causado por um clique, o elemento clicado fica disponível como relatedTargetpropriedade do evento.
hide.bs.modal Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
oculto.bs.modal Este evento é acionado quando o modal termina de ser ocultado do usuário (aguardará a conclusão das transições CSS).
carregado.bs.modal Este evento é acionado quando o modal carrega conteúdo usando a remoteopção.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Listas suspensas dropdown.js

Adicione menus suspensos a quase tudo com este plug-in simples, incluindo a barra de navegação, guias e pílulas.

Dentro de uma barra de navegação

Dentro de pílulas

Por meio de atributos de dados ou JavaScript, o plug-in suspenso alterna o conteúdo oculto (menus suspensos) alternando a .openclasse no item da lista pai.

Em dispositivos móveis, abrir um menu suspenso adiciona uma .dropdown-backdropárea de toque para fechar menus suspensos ao tocar fora do menu, um requisito para suporte adequado ao iOS. Isso significa que mudar de um menu suspenso aberto para um menu suspenso diferente requer um toque extra no celular.

Observação: o data-toggle="dropdown"atributo é confiável para fechar menus suspensos em um nível de aplicativo, portanto, é uma boa ideia sempre usá-lo.

Por atributos de dados

Adicione data-toggle="dropdown"a um link ou botão para alternar uma lista suspensa.

<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 URLs intactos com botões de link, use o data-targetatributo em vez 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>

Por JavaScript

Chame as listas suspensas via JavaScript:

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

data-toggle="dropdown"ainda é necessário

Independentemente de você chamar sua lista suspensa via JavaScript ou usar a API de dados, data-toggle="dropdown"é sempre necessário estar presente no elemento de gatilho da lista suspensa.

Nenhum

Alterna o menu suspenso de uma determinada barra de navegação ou navegação com guias.

Todos os eventos suspensos são disparados no .dropdown-menuelemento pai do .

Todos os eventos suspensos têm uma relatedTargetpropriedade, cujo valor é o elemento âncora de alternância.

Tipo de evento Descrição
show.bs.dropdown Este evento é acionado imediatamente quando o método de instância show é chamado.
mostrado.bs.lista suspensa Este evento é acionado quando a lista suspensa se torna visível para o usuário (aguardará as transições CSS para serem concluídas).
hide.bs.dropdown Este evento é disparado imediatamente quando o método de instância hide é chamado.
oculto.bs.lista suspensa Este evento é acionado quando a lista suspensa termina de ser ocultada do usuário (aguardará a conclusão das transições CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Exemplo na barra de navegação

O plugin ScrollSpy é para atualizar automaticamente os destinos de navegação com base na posição de rolagem. Role a área abaixo da barra de navegação e observe a mudança de classe ativa. Os subitens suspensos também serão destacados.

@gordo

Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antes de esgotar qui. Direitos de bicicleta da fazenda à mesa no Tumblr, qualquer que seja. Cardigan Anim Keffiyeh Carles. Cabine de fotos de Velit seitan mcsweeney 3 wolf moon irure. Cosby suéter lomo jean shorts, williamsburg hoodie minim qui você provavelmente não ouviu falar deles et cardigan trust fund culpa biodiesel wes anderson estético. Nihil tatuado accusamus, cred ironia biodiesel keffiyeh artesão ullamco consequat.

@mdo

Skate de bigode Veniam marfa, barba de forquilha adipisical fugiat velit. Freegan barba aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Caminhão de comida de suéter cosby tatuado, vinil quis non freegan de mcsweeney. Lo-fi wes anderson +1 alfaiataria. A exercitação não estética de Carles quis gentrificar. Brooklyn adipisicing cerveja artesanal vice keytar deserunt.

1

Occaecat commodo aliqua delectus. Fap cerveja artesanal deserto skate ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore café de origem única em magna veniam. High life id vinil, echo park consequat quis aliquip banh mi pitchfork. Vero VHS é adipisco. Bolsa de mensageiro minim Consectetur nisi DIY. Cred ex in, sustentável delectus consectetur fanny pack iphone.

dois

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 qualquer que seja o food truck delectus. Sapiente synth id assumido. Locavore sed helvetica ironia clichê, thundercats você provavelmente não ouviu falar deles consequat hoodie sem glúten fap aliquip lo-fi. Labore elit placeat antes de esgotar, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artisan. Cardigan cerveja artesanal seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim comodo ullamco thundercats.

Uso

Requer Bootstrap nav

O Scrollspy atualmente requer o uso de um componente de navegação Bootstrap para o realce adequado dos links ativos.

Destinos de ID resolúvel obrigatórios

Os links da barra de navegação devem ter destinos de ID que podem ser resolvidos. Por exemplo, a <a href="#home">home</a>deve corresponder a algo no DOM como <div id="home"></div>.

Elementos não :visiblesegmentados ignorados

Elementos de destino que não estão :visiblede acordo com jQuery serão ignorados e seus itens de navegação correspondentes nunca serão destacados.

Requer posicionamento relativo

Não importa o método de implementação, o scrollspy requer o uso do position: relative;elemento que você está espionando. Na maioria dos casos este é o <body>. Ao fazer scrollspy em elementos diferentes do <body>, certifique-se de ter um heightconjunto e overflow-y: scroll;aplicado.

Por atributos de dados

Para adicionar facilmente o comportamento do scrollspy à sua navegação na barra superior, adicione data-spy="scroll"ao elemento que você deseja espionar (geralmente, isso seria o <body>). Em seguida, adicione o data-targetatributo com o ID ou classe do elemento pai de qualquer .navcomponente do 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>

Por JavaScript

Depois position: relative;de adicionar seu CSS, chame o scrollspy via JavaScript:

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

Métodos

.scrollspy('refresh')

Ao usar o scrollspy em conjunto com a adição ou remoção de elementos do DOM, você precisará chamar o método de atualização da seguinte forma:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-offset="".

Nome modelo predefinição Descrição
Deslocamento número 10 Pixels para compensar a partir do topo ao calcular a posição de rolagem.

Eventos

Tipo de evento Descrição
ativar.bs.scrollspy Este evento é acionado sempre que um novo item é ativado pelo scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Guias alternáveis ​​tab.js

Guias de exemplo

Adicione a funcionalidade de guia rápida e dinâmica para fazer a transição entre painéis de conteúdo local, mesmo por meio de menus suspensos. Guias aninhadas não são suportadas.

Denim bruto você provavelmente não ouviu falar deles shorts jeans Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Bigode clichê tempor, williamsburg carles vegan helvetica. Repreendê-lo açougueiro retro keffiyeh sintetizador dreamcatcher. Suéter Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan americano vestuário, açougueiro 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.

Estende a navegação com guias

Este plug-in estende o componente de navegação com guias para adicionar áreas com guias.

Uso

Habilite as guias com guias via JavaScript (cada guia precisa ser ativada individualmente):

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

Você pode ativar guias individuais de várias 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)

Marcação

Você pode ativar uma navegação por guias ou pílulas sem escrever nenhum JavaScript simplesmente especificando data-toggle="tab"ou data-toggle="pill"em um elemento. Adicionar as classes navand nav-tabsà guia ulaplicará o estilo da guia Bootstrap , enquanto adicionar as classes navand nav-pillsaplicará 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>

Efeito de desvanecimento

Para fazer as guias aparecerem gradualmente, adicione .fadea cada .tab-pane. O primeiro painel de guias também deve .intornar visível o conteúdo 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

Ativa um elemento de guia e um contêiner de conteúdo. A guia deve ter um data-targetou um hrefdirecionamento para um nó de contêiner no DOM. Nos exemplos acima, as guias são os <a>s com data-toggle="tab"atributos.

.tab('show')

Seleciona a guia fornecida e mostra seu conteúdo associado. Qualquer outra guia selecionada anteriormente torna-se desmarcada e seu conteúdo associado fica oculto. Retorna ao chamador antes que o painel de guias tenha sido realmente mostrado (ou seja, antes que o shown.bs.tabevento ocorra).

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

Eventos

Ao mostrar uma nova guia, os eventos são acionados na seguinte ordem:

  1. hide.bs.tab(na guia ativa atual)
  2. show.bs.tab(na guia a ser exibida)
  3. hidden.bs.tab(na aba ativa anterior, a mesma do hide.bs.tabevento)
  4. shown.bs.tab(na guia recém-ativada recém-exibida, a mesma do show.bs.tabevento)

Se nenhuma guia já estiver ativa, os eventos hide.bs.tabe hidden.bs.tabnão serão acionados.

Tipo de evento Descrição
show.bs.guia Este evento é acionado na exibição de guias, mas antes que a nova guia seja exibida. Use event.targete event.relatedTargetpara direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
mostrado.bs.guia Este evento é acionado na exibição de guias após a exibição de uma guia. Use event.targete event.relatedTargetpara direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente.
ocultar.bs.guia Este evento é acionado quando uma nova guia deve ser mostrada (e, portanto, a guia ativa anterior deve ser ocultada). Use event.targete event.relatedTargetpara segmentar a guia ativa atual e a nova guia em breve ativa, respectivamente.
tab.bs.escondidos Este evento é acionado depois que uma nova guia é mostrada (e, portanto, a guia ativa anterior fica oculta). Use event.targete event.relatedTargetpara segmentar a guia ativa anterior e a nova guia ativa, respectivamente.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Dicas de ferramentas tooltip.js

Inspirado no excelente plugin jQuery.tipy escrito por Jason Frame; As dicas de ferramentas são uma versão atualizada, que não depende de imagens, usa CSS3 para animações e atributos de dados para armazenamento local de títulos.

Dicas de ferramentas com títulos de comprimento zero nunca são exibidas.

Exemplos

Passe o mouse sobre os links abaixo para ver dicas de ferramentas:

Calças apertadas keffiyeh de próximo nível você provavelmente não ouviu falar deles. Cabine de fotos barba jeans crua tipografia bolsa carteiro vegana stumptown. O seitan da fazenda à mesa, o vestuário americano de 8 bits de quinoa sustentável fixie da mcsweeney tem uma chambray de vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, quatro loko mcsweeney's cleanse vegan chambray. Um artesão realmente irônico , qualquer keytar , scenester farm-to-table banksy Austin twitter lidar com café de origem única.

Dica de ferramenta estática

Quatro opções estão disponíveis: alinhamento superior, direito, inferior e alinhamento à esquerda.

Quatro direções

<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 ativação

Por motivos de desempenho, as APIs de dados de dica de ferramenta e popover são opcionais, o que significa que você deve inicializá-las você mesmo .

Uma maneira de inicializar todas as dicas de ferramentas em uma página seria selecioná-las por seu data-toggleatributo:

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

Uso

O plug-in de dica de ferramenta gera conteúdo e marcação sob demanda e, por padrão, coloca dicas de ferramenta após o elemento de acionamento.

Acione a dica de ferramenta via JavaScript:

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

Marcação

A marcação necessária para uma dica de ferramenta é apenas um dataatributo e titleno elemento HTML você deseja ter uma dica de ferramenta. A marcação gerada de uma dica de ferramenta é bastante simples, embora exija uma posição (por padrão, definida toppelo plug-in).

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

Links de várias linhas

Às vezes, você deseja adicionar uma dica de ferramenta a um hiperlink que envolve várias linhas. O comportamento padrão do plug-in de dica de ferramenta é centralizá-lo horizontalmente e verticalmente. Adicione white-space: nowrap;às suas âncoras para evitar isso.

Dicas de ferramentas em grupos de botões, grupos de entrada e tabelas requerem configuração especial

Ao usar dicas de ferramentas em elementos dentro de um .btn-groupou um .input-group, ou em elementos relacionados à tabela ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), você terá que especificar a opção container: 'body'(documentada abaixo) para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ ou perdendo seus cantos arredondados quando a dica de ferramenta é acionada).

Não tente mostrar dicas de ferramentas em elementos ocultos

Invocar $(...).tooltip('show')quando o elemento de destino for display: none;fará com que a dica de ferramenta seja posicionada incorretamente.

Dicas de ferramentas acessíveis para usuários de teclado e tecnologia assistiva

Para usuários que navegam com um teclado e, em particular, usuários de tecnologias assistivas, você só deve adicionar dicas de ferramentas a elementos com foco no teclado, como links, controles de formulário ou qualquer elemento arbitrário com um tabindex="0"atributo.

As dicas de ferramentas sobre elementos desativados exigem elementos wrapper

Para adicionar uma dica de ferramenta a um elemento disabledou .disabled, coloque o elemento dentro de a <div>e aplique a dica de ferramenta a <div>ele.

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-animation="".

Nome Modelo Predefinição Descrição
animação boleano verdadeiro Aplicar uma transição de fade CSS à dica de ferramenta
recipiente seqüência | falso falso

Acrescenta a dica de ferramenta a um elemento específico. Exemplo: container: 'body'. Esta opção é particularmente útil porque permite que você posicione a dica de ferramenta no fluxo do documento próximo ao elemento acionador - o que impedirá que a dica de ferramenta flutue para longe do elemento acionador durante o redimensionamento da janela.

atraso número | objeto 0

Atraso na exibição e ocultação da dica de ferramenta (ms) - não se aplica ao tipo de gatilho manual

Se um número for fornecido, o atraso será aplicado tanto para ocultar/exibir

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

html boleano falso Insira HTML na dica de ferramenta. Se false, o textmétodo do jQuery será usado para inserir conteúdo no DOM. Use texto se estiver preocupado com ataques XSS.
colocação seqüência | função 'topo'

Como posicionar a dica de ferramenta - top | inferior | esquerda | direito | auto.
Quando "auto" for especificado, ele reorientará dinamicamente a dica de ferramenta. Por exemplo, se o posicionamento for "auto esquerda", a dica de ferramenta será exibida à esquerda quando possível, caso contrário, será exibida à direita.

Quando uma função é usada para determinar o posicionamento, ela é chamada com o nó DOM da dica de ferramenta como seu primeiro argumento e o nó DOM do elemento acionador como seu segundo. O thiscontexto é definido para a instância da dica de ferramenta.

seletor corda falso Se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados. Na prática, isso é usado para permitir que o conteúdo HTML dinâmico tenha dicas de ferramentas adicionadas. Veja este e um exemplo informativo .
modelo corda '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML base a ser usado ao criar a dica de ferramenta.

As dicas de ferramentas titleserão injetadas no arquivo .tooltip-inner.

.tooltip-arrowse tornará a seta da dica de ferramenta.

O elemento wrapper mais externo deve ter a .tooltipclasse.

título seqüência | função ''

Valor de título padrão se o titleatributo não estiver presente.

Se uma função for fornecida, ela será chamada com sua thisreferência definida para o elemento ao qual a dica de ferramenta está anexada.

acionar corda 'foco flutuante' Como a dica de ferramenta é acionada - clique | pairar | foco | manual. Você pode passar vários gatilhos; separe-os com um espaço. manualnão pode ser combinado com nenhum outro gatilho.
janela de exibição seqüência | objeto | função { seletor: 'corpo', preenchimento: 0 }

Mantém a dica de ferramenta dentro dos limites desse elemento. Exemplo: viewport: '#viewport'ou{ "selector": "#viewport", "padding": 0 }

Se uma função for fornecida, ela será chamada com o nó DOM do elemento acionador como seu único argumento. O thiscontexto é definido para a instância da dica de ferramenta.

Atributos de dados para dicas de ferramentas individuais

Opções para dicas de ferramentas individuais podem ser especificadas alternativamente por meio do uso de atributos de dados, conforme explicado acima.

Métodos

$().tooltip(options)

Anexa um manipulador de dica de ferramenta a uma coleção de elementos.

.tooltip('show')

Revela a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido mostrada (ou seja, antes que o shown.bs.tooltipevento ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta. Dicas de ferramentas com títulos de comprimento zero nunca são exibidas.

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

.tooltip('hide')

Oculta a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido ocultada (ou seja, antes que o hidden.bs.tooltipevento ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta.

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

.tooltip('toggle')

Alterna a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido mostrada ou ocultada (ou seja, antes que o evento shown.bs.tooltipou hidden.bs.tooltipocorra). Isso é considerado um acionamento "manual" da dica de ferramenta.

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

.tooltip('destroy')

Oculta e destrói a dica de ferramenta de um elemento. As dicas de ferramentas que usam delegação (que são criadas usando a selectoropção ) não podem ser destruídas individualmente em elementos acionadores descendentes.

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

Eventos

Tipo de evento Descrição
show.bs.dica Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrado.bs.dica Este evento é acionado quando a dica de ferramenta se torna visível para o usuário (aguardará a conclusão das transições CSS).
hide.bs.dica Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
hidden.bs.dica de ferramenta Este evento é acionado quando a dica de ferramenta termina de ser ocultada do usuário (aguardará a conclusão das transições CSS).
insert.bs.dica de ferramenta Este evento é acionado após o show.bs.tooltipevento quando o modelo de dica de ferramenta foi adicionado ao DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Adicione pequenas sobreposições de conteúdo, como as do iPad, a qualquer elemento para abrigar informações secundárias.

Os popovers cujo título e conteúdo são de comprimento zero nunca são exibidos.

Dependência de plug-in

Os popovers exigem que o plug -in de dica de ferramenta seja incluído na sua versão do Bootstrap.

Funcionalidade de ativação

Por motivos de desempenho, as APIs de dados de dica de ferramenta e popover são opcionais, o que significa que você deve inicializá-las você mesmo .

Uma maneira de inicializar todos os popovers em uma página seria selecioná-los por seu data-toggleatributo:

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

Popovers em grupos de botões, grupos de entrada e tabelas requerem configuração especial

Ao usar popovers em elementos dentro de a .btn-groupou an .input-group, ou em elementos relacionados à tabela ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), você terá que especificar a opção container: 'body'(documentada abaixo) para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ ou perdendo seus cantos arredondados quando o popover é acionado).

Não tente mostrar popovers em elementos ocultos

Invocar $(...).popover('show')quando o elemento de destino for display: none;fará com que o popover seja posicionado incorretamente.

Popovers em elementos desabilitados requerem elementos wrapper

Para adicionar um popover a um elemento disabledou .disabled, coloque o elemento dentro de a <div>e aplique o popover a <div>ele.

Links de várias linhas

Às vezes, você deseja adicionar um popover a um hiperlink que envolve várias linhas. O comportamento padrão do plugin popover é centralizá-lo horizontalmente e verticalmente. Adicione white-space: nowrap;às suas âncoras para evitar isso.

Exemplos

Popover estático

Quatro opções estão disponíveis: alinhamento superior, direito, inferior e alinhamento à esquerda.

Top popover

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

Popover à direita

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

Parte inferior popover

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

Popover à esquerda

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

Demonstração ao 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>

Quatro direções

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

Dispensar no próximo clique

Use o focusgatilho para dispensar popovers no próximo clique que o usuário fizer.

Marcação específica necessária para dispensar no próximo clique

Para um comportamento adequado entre navegadores e plataformas, você deve usar a <a>tag, não a <button>tag, e também deve incluir 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

Habilite popovers via JavaScript:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-animation="".

Nome Modelo Predefinição Descrição
animação boleano verdadeiro Aplicar uma transição de fade CSS ao popover
recipiente seqüência | falso falso

Acrescenta o popover a um elemento específico. Exemplo: container: 'body'. Esta opção é particularmente útil porque permite que você posicione o popover no fluxo do documento próximo ao elemento acionador - o que impedirá que o popover flutue para longe do elemento acionador durante o redimensionamento da janela.

contente seqüência | função ''

Valor de conteúdo padrão se data-contento atributo não estiver presente.

Se uma função for fornecida, ela será chamada com sua thisreferência definida para o elemento ao qual o popover está anexado.

atraso número | objeto 0

Atraso na exibição e ocultação do popover (ms) - não se aplica ao tipo de gatilho manual

Se um número for fornecido, o atraso será aplicado tanto para ocultar/exibir

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

html boleano falso Insira o HTML no popover. Se false, o textmétodo do jQuery será usado para inserir conteúdo no DOM. Use texto se estiver preocupado com ataques XSS.
colocação seqüência | função 'certo'

Como posicionar o popover - top | inferior | esquerda | direito | auto.
Quando "auto" for especificado, ele reorientará dinamicamente o popover. Por exemplo, se o posicionamento for "auto esquerda", o popover será exibido à esquerda quando possível, caso contrário, será exibido à direita.

Quando uma função é usada para determinar o posicionamento, ela é chamada com o nó DOM popover como seu primeiro argumento e o nó DOM do elemento acionador como seu segundo. O thiscontexto é definido para a instância popover.

seletor corda falso Se um seletor for fornecido, os objetos popover serão delegados aos destinos especificados. Na prática, isso é usado para permitir que o conteúdo HTML dinâmico tenha popovers adicionados. Veja este e um 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 criar o popover.

Os popovers titleserão injetados no arquivo .popover-title.

Os popovers contentserão injetados no arquivo .popover-content.

.arrowse tornará a seta do popover.

O elemento wrapper mais externo deve ter a .popoverclasse.

título seqüência | função ''

Valor de título padrão se o titleatributo não estiver presente.

Se uma função for fornecida, ela será chamada com sua thisreferência definida para o elemento ao qual o popover está anexado.

acionar corda 'clique' Como o popover é acionado - clique | pairar | foco | manual. Você pode passar vários gatilhos; separe-os com um espaço. manualnão pode ser combinado com nenhum outro gatilho.
janela de exibição seqüência | objeto | função { seletor: 'corpo', preenchimento: 0 }

Mantém o popover dentro dos limites deste elemento. Exemplo: viewport: '#viewport'ou{ "selector": "#viewport", "padding": 0 }

Se uma função for fornecida, ela será chamada com o nó DOM do elemento acionador como seu único argumento. O thiscontexto é definido para a instância popover.

Atributos de dados para popovers individuais

Opções para popovers individuais podem ser especificadas alternativamente através do uso de atributos de dados, conforme explicado acima.

Métodos

$().popover(options)

Inicializa popovers para uma coleção de elementos.

.popover('show')

Revela o popover de um elemento. Retorna ao chamador antes que o popover tenha sido realmente mostrado (ou seja, antes que o shown.bs.popoverevento ocorra). Isso é considerado um acionamento "manual" do popover. Os popovers cujo título e conteúdo são de comprimento zero nunca são exibidos.

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

.popover('hide')

Oculta o popover de um elemento. Retorna ao chamador antes que o popover tenha sido ocultado (ou seja, antes que o hidden.bs.popoverevento ocorra). Isso é considerado um acionamento "manual" do popover.

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

.popover('toggle')

Alterna o popover de um elemento. Retorna ao chamador antes que o popover tenha sido exibido ou ocultado (ou seja, antes que o evento shown.bs.popoverou hidden.bs.popoverocorra). Isso é considerado um acionamento "manual" do popover.

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

.popover('destroy')

Esconde e destrói o popover de um elemento. Popovers que usam delegação (que são criados usando a selectoropção ) não podem ser destruídos individualmente em elementos de disparo descendentes.

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

Eventos

Tipo de evento Descrição
show.bs.popover Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrado.bs.popover Este evento é acionado quando o popover se torna visível para o usuário (aguardará a conclusão das transições CSS).
hide.bs.popover Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
oculto.bs.popover Este evento é acionado quando o popover termina de ser ocultado do usuário (aguardará a conclusão das transições CSS).
inserido.bs.popover Este evento é acionado após o show.bs.popoverevento quando o modelo popover foi adicionado ao DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Mensagens de alerta alert.js

Alertas de exemplo

Adicione a funcionalidade de dispensa a todas as mensagens de alerta com este plug-in.

Ao usar um .closebotão, ele deve ser o primeiro filho do .alert-dismissiblee nenhum conteúdo de texto pode vir antes dele na marcação.

Uso

Basta adicionar data-dismiss="alert"ao seu botão Fechar para fornecer automaticamente uma funcionalidade de fechamento de alerta. Fechar um alerta o remove do DOM.

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

Para que seus alertas usem animação ao fechar, certifique-se de que eles tenham o .fadee.in classes

Métodos

$().alert()

Faz um alerta escutar eventos de clique em elementos descendentes que possuem o data-dismiss="alert"atributo. (Não é necessário ao usar a inicialização automática da API de dados.)

$().alert('close')

Fecha um alerta removendo-o do DOM. Se as classes .fadee .inestiverem presentes no elemento, o alerta desaparecerá antes de ser removido.

Eventos

O plugin de alerta do Bootstrap expõe alguns eventos para se conectar à funcionalidade de alerta.

Tipo de evento Descrição
close.bs.alert Este evento é acionado imediatamente quando o closemétodo de instância é chamado.
alerta.bs.fechado Este evento é acionado quando o alerta é fechado (aguardará a conclusão das transições CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botões button.js

Faça mais com botões. Controle os estados dos botões ou crie grupos de botões para mais componentes, como barras de ferramentas.

Compatibilidade entre navegadores

O Firefox persiste nos estados de controle de formulário (desativação e verificação) nos carregamentos de página . Uma solução para isso é usar autocomplete="off". Veja o bug nº 654072 do Mozilla .

Stateful

Adicionar data-loading-text="Loading..."para usar um estado de carregamento em um botão.

Esse recurso está obsoleto desde a v3.3.5 e foi removido na v4.

Use o estado que quiser!

Para esta demonstração, estamos usando data-loading-textand $().button('loading'), mas esse não é o único estado que você pode usar. Veja mais sobre isso abaixo na $().button(string)documentação .

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

Alternar simples

Adicionar data-toggle="button"para ativar a alternância em um único botão.

Os botões pré-alternados precisam .activeearia-pressed="true"

Para botões pré-alternados, você deve adicionar a .activeclasse e o aria-pressed="true"atributo a buttonvocê mesmo.

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

Caixa de seleção / Rádio

Adicione data-toggle="buttons"a uma .btn-groupcaixa de seleção ou entradas de rádio para permitir a alternância em seus respectivos estilos.

As opções pré-selecionadas precisam.active

Para opções pré-selecionadas, você mesmo deve adicionar a .activeclasse às entradas label.

Estado verificado visualmente atualizado apenas ao clicar

Se o estado marcado de um botão de caixa de seleção for atualizado sem disparar um clickevento no botão (por exemplo, via <input type="reset">ou via definir a checkedpropriedade da entrada), você precisará alternar a .activeclasse 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 de push. Dá ao botão a aparência de que foi ativado.

$().button('reset')

Redefine o estado do botão - troca o texto pelo texto original. Esse método é assíncrono e retorna antes que a redefinição seja realmente concluída.

$().button(string)

Troca o texto para qualquer estado de texto definido por dados.

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

Recolher colapso.js

Plugin flexível que utiliza um punhado de classes para facilitar o comportamento de alternância.

Dependência de plug-in

Collapse requer que o plugin de transições seja incluído na sua versão do Bootstrap.

Exemplo

Clique nos botões abaixo para mostrar e ocultar outro elemento por meio de alterações de classe:

  • .collapseesconde conteúdo
  • .collapsingé aplicado durante as transições
  • .collapse.inmostra o conteúdo

Você pode usar um link com o hrefatributo ou um botão com o data-targetatributo. Em ambos os casos, o data-toggle="collapse"é necessário.

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

Estenda o comportamento de recolhimento padrão para criar um acordeão com o componente do painel.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skate dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua colocou um pássaro nele lula café de origem única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal labore wes anderson cred nesciunt sapiente e proident. Ad vegan excepteur açougueiro vice lomo. Leggings occaecat cerveja artesanal da fazenda à mesa, sintetizador estético de denim cru nesciunt você provavelmente não ouviu falar deles accusamus labore VHS sustentável.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skate dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua colocou um pássaro nele lula café de origem única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal labore wes anderson cred nesciunt sapiente e proident. Ad vegan excepteur açougueiro vice lomo. Leggings occaecat cerveja artesanal da fazenda à mesa, sintetizador estético de denim cru nesciunt você provavelmente não ouviu falar deles accusamus labore VHS sustentável.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skate dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua colocou um pássaro nele lula café de origem única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal labore wes anderson cred nesciunt sapiente e proident. Ad vegan excepteur açougueiro vice lomo. Leggings occaecat cerveja artesanal da fazenda à mesa, sintetizador estético de denim cru nesciunt você provavelmente não ouviu falar deles accusamus labore VHS sustentável.
<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>

Também é possível trocar .panel-bodys por .list-groups.

  • Bootply
  • Um itmus ac facilin
  • Segundo eros

Torne os controles de expansão/recolhimento acessíveis

Certifique-se de adicionar aria-expandedao elemento de controle. Esse atributo define explicitamente o estado atual do elemento recolhível para leitores de tela e tecnologias assistivas semelhantes. Se o elemento recolhível estiver fechado por padrão, ele deverá ter um valor de aria-expanded="false". Se você definiu o elemento recolhível para ser aberto por padrão usando a inclasse, defina aria-expanded="true"no controle. O plug-in alternará automaticamente esse atributo com base no fato de o elemento recolhível ter sido aberto ou fechado.

Além disso, se o seu elemento de controle tiver como alvo um único elemento recolhível – ou seja, o data-targetatributo está apontando para um idseletor – você pode adicionar um aria-controlsatributo adicional ao elemento de controle, contendo o iddo elemento recolhível. Leitores de tela modernos e tecnologias assistivas semelhantes fazem uso desse atributo para fornecer aos usuários atalhos adicionais para navegar diretamente para o próprio elemento recolhível.

Uso

O plugin de colapso utiliza algumas classes para lidar com o trabalho pesado:

  • .collapseesconde o conteúdo
  • .collapse.inmostra o conteúdo
  • .collapsingé adicionado quando a transição começa e removido quando termina

Essas classes podem ser encontradas em component-animations.less.

Por atributos de dados

Basta adicionar data-toggle="collapse"e data-targeta ao elemento para atribuir automaticamente o controle de um elemento dobrável. O data-targetatributo aceita um seletor CSS ao qual aplicar o recolhimento. Certifique-se de adicionar a classe collapseao elemento recolhível. Se você quiser que ele seja aberto por padrão, adicione a classe adicional in.

Para adicionar gerenciamento de grupo do tipo acordeão a um controle recolhível, adicione o atributo data data-parent="#selector". Consulte a demonstração para ver isso em ação.

Por JavaScript

Ative manualmente com:

$('.collapse').collapse()

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-parent="".

Nome modelo predefinição Descrição
pai seletor falso Se um seletor for fornecido, todos os elementos recolhíveis sob o pai especificado serão fechados quando este item recolhível for mostrado. (semelhante ao comportamento tradicional do acordeão - isso depende da panelclasse)
alternar boleano verdadeiro Alterna o elemento recolhível na invocação

Métodos

.collapse(options)

Ativa seu conteúdo como um elemento recolhível. Aceita opções opcionais object.

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

.collapse('toggle')

Alterna um elemento recolhível para mostrado ou oculto. Retorna ao chamador antes que o elemento recolhível tenha realmente sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.collapseor hidden.bs.collapseocorra).

.collapse('show')

Mostra um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido realmente mostrado (ou seja, antes que o shown.bs.collapseevento ocorra).

.collapse('hide')

Oculta um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido ocultado (ou seja, antes que o hidden.bs.collapseevento ocorra).

Eventos

A classe de recolhimento do Bootstrap expõe alguns eventos para conexão com a funcionalidade de recolhimento.

Tipo de evento Descrição
show.bs.collapse Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrado.bs.recolher Este evento é acionado quando um elemento de recolhimento se torna visível para o usuário (aguardará a conclusão das transições CSS).
hide.bs.collapse Este evento é disparado imediatamente quando o hidemétodo é chamado.
oculto.bs.recolher Este evento é acionado quando um elemento de recolhimento foi ocultado do usuário (aguardará a conclusão das transições CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrossel carrossel.js

Um componente de apresentação de slides para percorrer elementos, como um carrossel. Carrosséis aninhados não são suportados.

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

Legendas opcionais

Adicione legendas aos seus slides facilmente com o .carousel-captionelemento em qualquer arquivo .item. Coloque praticamente qualquer HTML opcional e ele será alinhado e formatado automaticamente.

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

Vários carrosséis

Os carrosséis exigem o uso de um idno recipiente mais externo (o .carousel) para que os controles do carrossel funcionem corretamente. Ao adicionar vários carrosséis ou ao alterar o id, certifique-se de atualizar os controles relevantes.

Por atributos de dados

Use atributos de dados para controlar facilmente a posição do carrossel. data-slideaceita as palavras-chave prevou next, que altera a posição do slide em relação à sua posição atual. Como alternativa, use data-slide-topara passar um índice de slide bruto para o carrossel data-slide-to="2", que muda a posição do slide para um índice específico começando com 0.

O data-ride="carousel"atributo é usado para marcar um carrossel como animado a partir do carregamento da página. Ele não pode ser usado em combinação com a inicialização JavaScript explícita (redundante e desnecessária) do mesmo carrossel.

Por JavaScript

Chame o carrossel manualmente com:

$('.carousel').carousel()

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-interval="".

Nome modelo predefinição Descrição
intervalo número 5000 A quantidade de tempo de atraso entre o ciclo automático de um item. Se for falso, o carrossel não fará o ciclo automaticamente.
pausa seqüência | nulo "flutuar" Se definido como "hover", pausa o ciclo do carrossel ligado mouseentere retoma o ciclo do carrossel ligado mouseleave. Se definido como null, passar o mouse sobre o carrossel não o pausará.
enrolar boleano verdadeiro Se o carrossel deve circular continuamente ou ter paradas bruscas.
teclado boleano verdadeiro Se o carrossel deve reagir a eventos de teclado.

Inicializa o carrossel com opções opcionais objecte começa a percorrer os itens.

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

Percorre os itens do carrossel da esquerda para a direita.

Interrompe o carrossel de percorrer os itens.

Alterna o carrossel para um quadro específico (baseado em 0, semelhante a uma matriz).

Volta para o item anterior.

Alterna para o próximo item.

A classe carrossel do Bootstrap expõe dois eventos para conectar-se à funcionalidade do carrossel.

Ambos os eventos têm as seguintes propriedades adicionais:

  • direction: A direção na qual o carrossel está deslizando (ou "left"ou "right").
  • relatedTarget: o elemento DOM que está sendo posicionado como o item ativo.

Todos os eventos de carrossel são disparados no próprio carrossel (ou seja, no <div class="carousel">).

Tipo de evento Descrição
slide.bs.carrossel Esse evento é acionado imediatamente quando o slidemétodo de instância é invocado.
slide.bs.carrossel Este evento é acionado quando o carrossel conclui sua transição de slides.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afixo afixo.js

Exemplo

O plugin afixo position: fixed;liga e desliga, emulando o efeito encontrado com position: sticky;. A subnavegação à direita é uma demonstração ao vivo do plug-in afixo.


Uso

Use o plug-in afixo por meio de atributos de dados ou manualmente com seu próprio JavaScript. Em ambas as situações, você deve fornecer CSS para o posicionamento e largura do seu conteúdo afixado.

Observação: não use o plug-in affix em um elemento contido em um elemento relativamente posicionado, como uma coluna puxada ou empurrada, devido a um bug de renderização do Safari .

Posicionamento via CSS

O plugin affix alterna entre três classes, cada uma representando um estado específico: .affix, .affix-top, e .affix-bottom. Você deve fornecer os estilos, com exceção de position: fixed;on .affix, para essas classes (independente deste plugin) para lidar com as posições reais.

Veja como o plugin afixo funciona:

  1. Para começar, o plugin adiciona .affix-toppara indicar que o elemento está em sua posição mais alta. Neste ponto, nenhum posicionamento CSS é necessário.
  2. Rolar além do elemento que você deseja afixar deve acionar a afixação real. É aqui que .affixsubstitui .affix-tope define position: fixed;(fornecido pelo CSS do Bootstrap).
  3. Se um deslocamento inferior for definido, a rolagem deve ser substituída .affixpor .affix-bottom. Como os deslocamentos são opcionais, definir um requer que você defina o CSS apropriado. Neste caso, adicione position: absolute;quando necessário. O plug-in usa o atributo de dados ou a opção JavaScript para determinar onde posicionar o elemento a partir daí.

Siga as etapas acima para definir seu CSS para qualquer uma das opções de uso abaixo.

Por atributos de dados

Para adicionar facilmente o comportamento do afixo a qualquer elemento, basta adicionar data-spy="affix"ao elemento que você deseja espionar. Use deslocamentos para definir quando alternar a fixação de um elemento.

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

Por JavaScript

Chame o plug-in afixo via JavaScript:

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

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-offset-top="200".

Nome modelo predefinição Descrição
Deslocamento número | função | objeto 10 Pixels a serem deslocados da tela ao calcular a posição de rolagem. Se um único número for fornecido, o deslocamento será aplicado nas direções superior e inferior. Para fornecer um deslocamento único, inferior e superior, apenas forneça um objeto offset: { top: 10 }ou offset: { top: 10, bottom: 5 }. Use uma função quando precisar calcular dinamicamente um deslocamento.
alvo seletor | nó | elemento jQuery o windowobjeto Especifica o elemento de destino do afixo.

Métodos

.affix(options)

Ativa seu conteúdo como conteúdo afixado. Aceita opções opcionais object.

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

.affix('checkPosition')

Recalcula o estado do afixo com base nas dimensões, posição e posição de rolagem dos elementos relevantes. As classes .affix, .affix-tope .affix-bottomsão adicionadas ou removidas do conteúdo afixado de acordo com o novo estado. Este método precisa ser chamado sempre que as dimensões do conteúdo afixado ou do elemento alvo forem alteradas, para garantir o correto posicionamento do conteúdo afixado.

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

Eventos

O plug-in de afixo do Bootstrap expõe alguns eventos para conectar-se à funcionalidade de afixo.

Tipo de evento Descrição
afixo.bs.afixo Este evento é acionado imediatamente antes que o elemento seja afixado.
afixado.bs.afixo Este evento é acionado após o elemento ter sido afixado.
afix-top.bs.afix Este evento é acionado imediatamente antes que o elemento seja afixado no topo.
afixado-topo.bs.afixo Este evento é acionado após o elemento ter sido afixado no topo.
afixo-fundo.bs.afixo Este evento é acionado imediatamente antes que o elemento tenha sido afixado na parte inferior.
afixado-fundo.bs.afixo Este evento é acionado após o elemento ter sido afixado na parte inferior.