Individual ou compilado

Plugins podem ser incluídos individualmente (embora alguns tenham depências), ou tudo de uma vez. Ambos bootstrap.js e bootstrap.min.js contém todos plugins em um único arquivo

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 obter um plugin específico, nós simplesmente incluímos o nome do plugin como um namespace no 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õe seu construtor básico como uma porpriedade `Constructor`: $.fn.popover.Constructor. Se você quer ter uma instância particular de um determinado plugin, obtenha diretamente de um elemento: $('[rel=popover]').data('popover').

Eventos

O Bootstrap provê eventos customizados para ações únicas dos plugins. Geralmente, estes vêm em uma forma de infinitivo e passado particípio - onde o infinitivo (ex. show) é lançado no começo de um evento, e sua forma no passado particípio (ex. shown) é lançado ao se completar uma ação.

Todos eventos no infinitivo possuem a funcionalidade do preventDefault. Isto lha dá abilidade de parar a execução de uma ação antes de iniciar

$('#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 id="myModal" class="modal hide fade" 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('toggle')

Uma api programática para alternar menus em uma barra de navegação ou uma 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 uma rápida e dinâmica navegação em abas para passar através de painéis de um 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 atributo href 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 neste excelente jQuery Tipsy Plugin desenvolvido por Jason Frame; Tooltips é um plugin com versão atualizada, que não conta com imagens, somente com animações css3, 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

Quatro direções

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

Requer que o Tooltip seja incluído.

Live demo

Quatro direções

//html  
<ul class="bs-docs-tooltip-examples">
  <li>
    <a href="#" class="btn" rel="balloon" data-placement="top" data-content="sample content." >Balloon no topo</a>
  </li>
  <li>
    <a href="#" class="btn" rel="balloon" data-placement="right" data-content="sample content." >Balloon na direita</a>
  </li>
  <li>
    <a href="#" class="btn" rel="balloon" data-placement="bottom" data-content="sample content." >Balloon embaixo</a>
  </li>
  <li>
    <a href="#" class="btn" rel="balloon" data-placement="left" data-content="sample content." >Balloon na esquerda</a>
  </li>
</ul> 

// javascript
$("a[rel=balloon]")
  .balloon()
  .click(function(e) {
    e.preventDefault()
})

Uso

habilitar o balloon via javascript

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

Opções

O Balloon funciona com as mesmas opções e métodos do Popover

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 alternador em um único botão

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

Checkbox

Adicione data-toggle="buttons-checkbox" para estilo de checkbox em 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" estilos de botões radio em 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

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Grupo de itens colapsáveis #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Grupo de itens colapsáveis #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Você pode também usar o plugin sem a marcação de um acordeon. Faça um botão alternado expandindo e colapsando outro elemento

<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

Opções podem ser passadas via atributos data ou por JavaScript. Para atributos data, insira a opção ao data-, assim como 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

Opções podem ser passadas via atributos data ou por JavaScript. Para atributos data, insira a opção ao data-, assim como 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

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