Individual ou compilado

Se você fez download da última versão do Bootstrap, ambos bootstrap.js and bootstrap.min.js contém todos plugins listados nesta página.

Atributos Data

Você pode usar todos plugins do Bootstrap puramente através da API na marcação sem escrever uma única linha de JavaScript. Isto é a primeira classe de API do Bootstrap e deve ser considerada quando usar um plugin

Dito isto, em algumas situações pode ser desejável desligar esta funcionalidade. Para isto, nós também provemos a habilidade de destabilitar os atributos data que desanexa todos eventos no corpo com o namespace de `'data-api'`. E ficaria assim:

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

Alternativamente, para um plugin específico, simplesmente inclua o nome do plugin como um namespace no namespace do data-api assim:

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

API programática

Nós também acreditamos que deveríamos ser capazes de usar todos plugins do Bootstrap através da API Javascript. Todas API's públicas são únicas, com métodos encadeáveis, e retorna a coleção que foi aplicada

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

Todos métodos devem aceitar um objeto de opções adicionais, em uma string que direcina a um método particular, ou nada (que inicia com o 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ões seu construtor em uma propriedade `Constructor`: $.fn.popover.Constructor. Se você deseja obter uma instância particular de um plugin, obtenha diretamente de um elemento: $('[rel=popover]').data('popover').

Eventos

O Bootstrap provê eventos customizados para ações únicas dos plugins. Geralmente, eles vem na forma infinitiva e do passado particípio - onde o infinitvo (ex. show) é lançado no início do evento, e o passado particípio (ex. shown) é lançado quando a ação é completada

Todos eventos infinitivos provê a funcionalidade de preventDefault. Isto provê a habilidade de parar a execução de uma ação antes mesmo dela começar

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

Sobre transições

Para efeitos simples de transição, inclua bootstrap-transition.js uma vez antes de outros arquivos JS. Se você está usando uma versão minificada do bootstrap.js, não há necessidade de incluir— já está lá

Casos de uso

Alguns exemplos do plugin de transição

• Deslizando ou aplicando efeito fade em modais
• Fade out em abas
• Fade out em alertas
• Deslizando por painéis de carousel

Exemplos

Modais são simplificados, mas flexíveis diálogos que requer o mínimo de funcionalidade e padrões inteligentes

Exemplo estático

Um modal renderiza um cabeçalho, corpo, e uma coleção de ações no footer

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Cabeçalho do modal</h3>
  </div>
  <div class="modal-body">
    <p>Um corpo fino...</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Fechar</a>
    <a href="#" class="btn btn-primary">Salvar mudanças</a>
  </div>
</div>

demo ao vivo

Alterne um modal via JavaScript clicando no botão abaixo. Isto irá descer deslizando e aparecendo na frente do topo da página

<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Executar modal de demo</a>

<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>Um corpo fino...</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
    <button class="btn btn-primary">Salvar mudanças</button>
  </div>
</div>

Uso

Via atributos data

Ative um modal sem JavaScript. Escolha data-toggle="modal" em um elemento de controle, como um botão, com um data-target="#foo" ou href="#foo" para especificar um modal alternado

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

Via Javascript

Chame um modal com id myModal com uma única linha de javascript

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

Opções

Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, insira o nome da opção para data-, ou como data-backdrop="".

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

Métodos

.modal(opções)

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

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

.modal('toggle')

Manualmente alterne em um modal

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

.modal('show')

Manualmente abra um modal

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

.modal('hide')

Manualmente esconda um modal

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

Eventos

A classe do Bootstrap modal expôe alguns eventos para uma funcionalidade de modal

$('#myModal').on('hidden', function () {
  // faça algo
})

Exemplos

Adicione menus dropdown em qualquer coisa com este plugin, incluindo barra de navegação, aba e pílulas

Dentro de uma barra de navegação

Dentro de abas

Uso

Via atributos data

Adicione data-toggle="dropdown" para um link ou botão para torná-lo um dropdown

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

Para manter as urls intactas, use o atributo data-target ao invés de href="#".

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

Via Javascript

Chame o dropdown via JavaScript

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

Opções

Nenhum

Métodos

$().dropdown()

Api programática para ativar menus para uma barra de navegação ou navegação em abas

Exemplo na barra de navegação

O plugin de ScrollSpy é para automaticamente atualizar alvos de navegação baseado na posição do scroll. Realize um scroll na barra de navegação abaixo para ativar a mudança da classe. Os subitens do dropdown serão destacados também.

Uso

Via atributos data

Para facilmente adicionar scrollspy na sua navegação, simplesmente adicione data-spy="scroll" ao elemento que você quer espiar (mais tipicamente seria o corpo) e data-target=".navbar" para selecionar que navegação usar. Você poder usar o scrollspy dentro de um componente .nav

<body data-spy="scroll" data-target=".navbar">...</body>

Via Javascript

Chame o scrollspy via JavaScript:

$('#navbar').scrollspy()

Métodos

.scrollspy('refresh')

Quando usar scrollspy em conjunção adicionando ou removendo elementos no DOM, assim você vai precisar chamar o método refresh assim:

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

Opções

Opções podem ser passadas via atributos data ou por JavaScript. Para atributos data, insira a opção ao data-, assim como data-offset="".

Eventos

Exemplo de abas

Adicione rapidamente, uma funcionalidade de aba dinâmica para realizar uma transição através de painés de conteúdo local, até mesmo via menus dropdown

Uso

Habilite abas tabeáveis via JavaScript (cada aba precisa ser ativada individualmente):

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

Você pode ativar abas individuais de diferentes formas

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

Marcação

Você pode ativar uma aba ou uma navegação pílula sem escrever nenhum JavaScript simplesmente especificando um data-toggle="tab" ou data-toggle="pill" em um elemento. Adicionando as classes nav e um nav-tabs para a aba ul irá aplicar o estilo de aba do Bootstrap

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Início</a></li>
  <li><a href="#profile" data-toggle="tab">Perfil</a></li>
  <li><a href="#messages" data-toggle="tab">Mensagens</a></li>
  <li><a href="#settings" data-toggle="tab">Configurações</a></li>
</ul>

Métodos

$().tab

Ativar a o elemento aba e container de conteúdo. As abas deveriam ter um data-target ou um href nó de conteúdo no DOM

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Início</a></li>
  <li><a href="#profile">Perfil</a></li>
  <li><a href="#messages">Mensagens</a></li>
  <li><a href="#settings">Configurações</a></li>
</ul>

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

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

Eventos

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Exemplos

Inspirado pelo excelente plugin jQuery.tipsy escrito por Jason Frame; Tooltips é uma versão atualizada, que não conta com imagens, usa CSS3 para animações, e atributos data para armazenamento local.

Coloque o mouse por cima nos links abaixo para ver os tooltips

Quatro direções

Uso

Lance um tooltip via JavaScript

$('#example').tooltip(opções)

Opções

Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, insira a opção de nome data-, como em data-animation="".

Marcação

Por razões de perfomance, as apis de dados do tooltip e pop over sao opcionais. Para usá-los simplesmente especifique uma opção de seletor

<a href="#" rel="tooltip" title="primeiro tooltip">passe o mouse em mim</a>

Métodos

$().tooltip(opções)

Anexa um manipulador de tooltip para uma coleção de elementos

.tooltip('show')

Revela um elemento tooltip

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

.tooltip('hide')

Esconde um elemento tooltip

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

.tooltip('toggle')

Alterne um elemento tooltip

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

.tooltip('destroy')

Esconde e destrói tooltips de elementos

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

Exemplos

Adicione um pequeno overlay de conteúdo, como aqueles do iPad, para qualquer elemento para guardar informação secundária. Passe o mouse no botão para disparar o popover. Requer que o Tooltip seja incluído.

Popover estático

Quatro opções estão disponíveis: top, right, bottom, e alinhado a esquerda com left

Nenhuma marcação dos popovers são geradas do JavaScript e os conteúdos dentro de um atributo data

Live demo

Uso

Habilite popover via JavaScript

$('#example').popover(opções)

Opções

Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, insira a opção de nome data-, como em data-animation="".

Marcação

Por razões de perfomance, as apis de dados do tooltip e pop over sao opcionais. Para usá-los simplesmente especifique uma opção de seletor

Métodos

$().popover(opções)

Inicializar popovers para uma coleção de elementos

.popover('show')

Revela um elemento popover

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

.popover('hide')

Esconde um elemento popover

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

.popover('toggle')

Alterna um elemento popover

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

.popover('destroy')

Esconde e destrói um elemento popover

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

Exemplo de alertas

Adicione funcionalidade para todas mensagens de alerta dentro do plugin

Uso

Habilite o fechamento de um alerta via JavaScript

$(".alert").alert()

Marcação

Simplesmente adicione data-dismiss="alert" para o seu botão de fechar e isto dá ao alerta a opção de fechar.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Métodos

$().alert()

Coloque todos os alertas com a funcionalidade de fechar. Para ter seus alertas animados quando fechar, verifique se a classe .fade and .in já foram aplicado a eles.

.alert('close')

Fecha um alerta

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

Eventos

Os Alertas do Bootstrap expões alguns eventos para você modificar a sua funcionalidade

$('#my-alert').bind('closed', function () {
  // faça algo
})

Exemplos de uso

Para mais com botões. Controle estados dos botões para criar grupos de botões para componentes como barra de ferramentas

Estagnado

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

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

Alternador simples

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

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

Checkbox

Adicione data-toggle="buttons-checkbox" para o checkbox e alterne entre um btn-group

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio

Adicione data-toggle="buttons-radio" para estilo rdio alternando um btn-group

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Uso

Habilitar botões via JavaScript

$('.nav-tabs').button()

Marcação

Atributos data são integrais para plugins de botões. Verifique o exemplo de código abaixo para ver vários tipos de markups

Opções

Nenhum

Métodos

$().button('toggle')

Alternador com estados de apertado. Dá o botão a aparência de que ele foi ativado

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

$().button('loading')

Atribua seus estados de botão para loading - Desabilite os botões e mude o texto para um texto de carregando. Texto de carregando deve ser defiinido pelo atributo data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>

$().button('reset')

Reiniciar estados de botão - muda o texto no texto original

$().button(string)

Reiniciar estados de botão - muda o texto em qualquer dado definido

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

Sobre

Tenha estilos base e suporte flexível para componentes colapsáveis como acordeões e navegação

* Requer que o plugin de transição seja incluído

Exemplo de accordion

Usando o plugin colapsável, nós construímos um widget no estilo accordion

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  um item colapsável simples
</button>

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

Uso

Via atributos data

Simplesmente adicione data-toggle="collapse" e um data-target para o elemento automaticamente assumir o controle de um elemento colapsável. O atributo data-target aceita um seletor css para ser aplicado. Tenha certeza de adicionar a classe collapse para um elemento colapsável. Se você gosta de ele vir por padrão aberto, adicione a classe in

para dicionar um gerenciamento de accordion em grupo para um controle de elementos colapsáveis, adicione os atributos data data-parent="#selector". Verifica a demonstração para vê-lo em ação.

Via Javascript

Habilitar manualmente com:

$(".collapse").collapse()

Opções

Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, adicione a opção de nome data-, como em data-parent="".

Métodos

.collapse(opções)

Ativar seu conteúdo com um elemento colapsável. Aceita um objeto de opções object

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

.collapse('toggle')

Alterna todos elementos colapsáveis para mostrar ou esconder

.collapse('show')

Mostra um elemento colapsável

.collapse('hide')

Esconde um elemento colapsável

Eventos

O Boostrap collapse expõe alguns eventos para estender sua funcionalidade

$('#myCollapsible').on('hidden', function () {
  // faça algo
})

Exemplo do carousel

O slideshow abaixo mostra um plugin genérico e componente de deslizar elementos em ciclo como um carrossel

Primeiro rótulo de miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Segundo rótulo de miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Terceiro rótulo de miniatura

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id="myCarousel" class="carousel slide">
  <!-- Itens de carousel -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Navegador do carousel -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Uso

Via atributos data

...

Via Javascript

Chame o carousel manualmente com:

$('.carousel').carousel()

Opções

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".

Métodos

.carousel(opções)

Inicializa o carousel com umas opções e começa a fazer um ciclo entre eles

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

.carousel('cycle')

Ciclos através do itens do carousel da esquerda para direita

.carousel('pause')

Pare o carousel de realizar ciclos através de itens

.carousel(number)

Os ciclos do carousel de um frame particular(baseado em 0, similar a um array)

.carousel('prev')

Ciclo para o item anterior

.carousel('next')

Ciclo para o próximo item

Eventos

A classe do Boostrap carousel expõe dois eentos para estender sua funcionalidade

Exemplo

Um básico, fácil e extensível plugin para rapidamente criar um cabeçalho elegante para qualquer texto e formulário

<input type="text" data-provide="typeahead">

Uso

Via atributos data

Adicione atributos data para registrar um elemento com uma funcionalidade do typeahead como mostrado no exemplo abaixo

Via Javascript

Chame o typeahead manualmente com:

$('.typeahead').typeahead()

Opções

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Métodos

.typeahead(opções)

Inicializa um input com um typeahead

Exemplo

A subnavegação na esquerda é um demo ao vivo do plugin affix

Uso

Via atributos data

Para facilmente adicoinar um comportamento de affix para qualquer elemento, simplesmente adicione data-spy="affix" para o elemento que você quer espiar. Então use offsets para definir quando alternar os elementos entre ligado e desligado

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

Via Javascript

Chama o plugin affix via JavaScript

$('#navbar').affix()

Métodos

.affix('refresh')

Quando usar o affix em conjunção com adicionar ou remover elementos no dom, você irá querer chamar o método refresh

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Opções

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".