JavaScript

Traga os componentes do Bootstrap a vida, agora com 13 plugins jQuery personalizados

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="".

Nome Tipo Padrão Descrição
cortina de fundo boleano true Inclui um pano de fundo para o modal, alternativamente, especifique static para não fechar o modal no clique
Teclado boleano true Fecha o modal quando esc é pressionado
exibir boleano true mostra o modal quando inicializado
remote path false

Se uma url remota é provida, o conteúdo será carregado via jQuery pelo método load e inserido dentro do .modal-body. Se você está usando a api nos atributos data, você pode alternativamente usar o atributo href para especificar uma fonte remota. Um exemplo disto é mostrado abaixo

<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

Evento Descrição
exibir Este evento dispara imediatamente quando o método show é chamado
shown Este evento é acionado quando o modal fica visível para o usuário(espera até a transição css estar completa).
hide Este evento é disparado imediatamente quando o método de instância hide é chamado
hidden Este evento é disparado quando o modal deixou de ficar escondido para o usuário(espera completar a transição css)
$('#myModal').on('hidden', function () {
  // faça algo
})

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.

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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()
Atenção! Links de barras de navegação precisam ter ids concisos. Por exemplo, um <a href="#home">home</a> deve corresponder a algo no dom como <div id="home"></div>.

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="".

Nome Tipo Padrão Descrição
offset número 10 pixels de offset do topo quando calculando posição com scroll

Eventos

Evento Descrição
ativar Este evento dispara enquanto o novo item se torna ativo com o scrollspy

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

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


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

Evento Descrição
exibir Este evento é disparado quadno a tab está sendo exibida, mas antes de ser mostrada. Use event.target e event.relatedTarget para a tab ativa e anterior (se disponível) respectivamente.
shown Este evento exibe a tab mas depois dela ter sido toda renderizada. Use event.target e event.relatedTarget para ter a tab ativa e a previamente ativa (se disponível) respectivamente.
$('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

Aperte os sintos no próximos níveis você provavelmente não ouviu falar deles. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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="".

Nome Tipo Padrão Descrição
animações boleano true aplicar uma transição de fade css para o tooltip
html boleano false Insira html no tooltip. Se for escolhido false, o método jQuery text irá usar o conteúdo inserido dentro do dom. Use o texto se você está preocupado com ataques XSS
localização string|function 'top' como posicionar o tooltip - top | bottom | left | right
seletor string false se um seletor é disponibilizado, os objetos de tooltips serão delegados para os elementos especificados
título string | function '' O título padrão é `title` se a tag title não estiver presente
trigger string 'hover' Como o tooltip é disparado - click | hover | focus | manual
delay number | object 0

Um intervalo que mostra e esconde o tooltip (ms) - não aplica um tipo de disparo de evento

Se um número é fornecido, o delay é aplicado no esconder/mostrar

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

Atenção! Opções para tooltips individuais podem alternativamente ser especificadas usando atributos data

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

Popover top

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

Popover right

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

Popover bottom

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

Popover left

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

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="".

Nome Tipo Padrão Descrição
animações boleano true aplicar uma transição de fade css para o tooltip
html boleano false Insira html no popover. Se for escolhida a opção false, o método jQuery text será usado para inserir documento no dom. Use o texto se você está preocupado com ataque XSS.
localização string|function 'right' como posicionar o popover - top | bottom | left | right
seletor string false Se um seletor é disponibilizado, os objetos do tooltip serão delegados para elementos especificados
trigger string 'click' Como popover é disparado - click | hover | focus | manual
título string | function '' o valor padrão do título é `title` se o atributo não estiver presente
content string | function '' o conteudo padrao é `data-content` se o atributo não estiver presente
delay number | object 0

Intervalo para mostrar e esconder o popover (ms) - não aplica ao uso do evento no modo manual

Se um número é fornecido, o delay é aplicado no esconder/mostrar

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

Atenção! Opções para popovers individuais podem ser alternativamente especificada através dos atributos data

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

Sagrado guacamole! Melhor checar você mesmo, você não está parecendo bem

Oh! Você tem um erro!

Mude isto e tente novamente. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tomar esta ação Ou faça isto


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

Evento Descrição
close Este evento é disparado imediatamente quando o close é chamado
closed Este evento é chamado quando o alerta foi fechado (irá esperar até a transição css estar completa)
$('#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

Atenção! Você pode habilitar o alternado de um botão com um atributo data-toggle.
<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>
Atenção! Firefox persiste em deixar com o estado de loading em páginas subsequentes. Uma solução prévia para isto é usar o autocomplete="off".

$().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

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.
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.
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 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="".

Nome Tipo Padrão Descrição
parent seletor false Se um seletor é dado então todos os elementos colapsáveis abaixo do pai expecificado será fechado quando seu item colapsável é exibido. (similar ao funcionamento tradicional de um accordion)
toggle boleano true alterna todos os elementos colapsáveis na sua invocação

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

Evento Descrição
exibir Este evento dispara imediatamente quando o método show é chamado
shown Este evento é disparado quando um elemento colapsável está visível para o usuário(esperar até a transição CSS estar completa).
hide Este evento é disparado imediatamente quando o método hide é chamado
hidden Este evento é chamado quando um elelmento colapsável ficou escondido para o usuário(Espera até a transição css estar completa)
$('#myCollapsible').on('hidden', function () {
  // faça algo
})

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="".

Nome Tipo Padrão Descrição
source array, function [ ] A origem dos dados para verificar. Pode ser um array de strings ou uma função. A função é passada com dois argumentos, o valor da query no campo de inpute e o callback process. A função pode ser usado sincronizando por retornar a fonte de dados diretamente ou de forma assíncrona via o callback process em um único argumento.
items número 8 O número máximo de itens para mostrar no dropdown
minLength número 1 A quantidade mínima de caracteres que precisa ser disparado antes de disparar uma sugestão do autocomplete
matcher function case insensitive O método usado para determinar se uma pesquisa acha um item. Aceita um argumento simples, o item contra a sentença de teste. Acesse a atual sentença com this.query. Retorne um um boleano true se a sentença é encontrada
sorter function encontro exato,
case sensitive,
case insensitive
O método usado para ordenar os resultados do autocomplete. Aceita um argumento simples items e tem o escopo da instância do typeahead. Referenciando a sentenção atual com this.query
Atualizador function Retornar itens selecionados O método usado para retornar o item selecionado. Aceita um único argumento o item que tem um escopo da instância do typeahead
highlighter function destaque todos os padrões encontrados O método usado para destacar os resultados do automplete. Aceita um único argumento item que tem o escopo da instância do typeahead. Deve retornar html

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>
Atenção! Você deve gerenciar a posição de um elemento fixo e o comportamento do seu pai mais próximo. A posição é controlada por affix, affix-top, e affix-bottom. Lembre-se de checar por um pai colapsado quando o affix remove o conteúdo do fluxo normal da página.

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

Nome Tipo Padrão Descrição
offset number | function | object 10 Pixel para deslocar da tela quando calculando a posição de um scroll. Se um único número é fornecido, o offset será aplicado em ambos os lados esquerda e direita. Para obter uma direção única, ou múltiplos offsets, você pode usar um offset: { x: 10 }. Use uma função quando você precisar dinamicamente prover um offset (útil para design responsivo)