Javascript para Bootstrap

Dê vida aos componentes do Bootstrap—agora com 12 plugins jQuery personalizados.

Modais

Um plug-in modal javascript simplificado, mas flexível, com apenas a funcionalidade mínima necessária e padrões inteligentes.

Listas suspensas

Adicione menus suspensos a quase tudo no Bootstrap com este plugin simples. O Bootstrap possui suporte completo ao menu suspenso na barra de navegação, guias e pílulas.

Espião de rolagem

Use scrollspy para atualizar automaticamente os links em sua barra de navegação para mostrar o link ativo atual com base na posição de rolagem.

Abas alternáveis

Use este plug-in para tornar as guias e pílulas mais úteis, permitindo que eles alternem entre os painéis com guias de conteúdo local.

Dicas de ferramentas

Uma nova versão do plug-in Tipsy do jQuery, as dicas de ferramentas não dependem de imagens - elas usam CSS3 para animações e atributos de dados para armazenamento local de títulos.

Pipocas *

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

* Requer dicas de ferramentas para serem incluídas

Mensagens de alerta

O plugin de alerta é uma pequena classe para adicionar funcionalidade próxima aos alertas.

Botões

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.

Colapso

Obtenha estilos básicos e suporte flexível para componentes dobráveis, como acordeões e navegação.

Carrossel

Crie um carrossel de qualquer conteúdo que você deseja fornecer uma apresentação de slides interativa de conteúdo.

Datilografia

Um plug-in básico e facilmente estendido para criar rapidamente tipos elegantes com qualquer entrada de texto de formulário.

Transições *

Para efeitos de transição simples, inclua bootstrap-transition.js uma vez para deslizar em modais ou alertas de fade out.

* Necessário para animação em plugins

Atenção! Todos os plugins javascript requerem a versão mais recente do jQuery.

Sobre modais

Um plug-in modal javascript simplificado, mas flexível, com apenas a funcionalidade mínima necessária e padrões inteligentes.

⇬ Fazer download do arquivo

Exemplo estático

Abaixo está um modal renderizado estaticamente.

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.

Iniciar modal de demonstração

Usando bootstrap-modal

Chame o modal via javascript:

  1. $ ( '#meuModal' ). modal ( opções )

Opções

Nome modelo predefinição Descrição
pano de fundo boleano 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.

Marcação

Você pode ativar modais em sua página facilmente sem ter que escrever uma única linha de javascript. Basta definir data-toggle="modal"em um elemento controlador com um data-target="#foo"ou href="#foo"que corresponde a um id de elemento modal e, quando clicado, ele iniciará seu modal.

Além disso, para adicionar opções à sua instância modal, basta incluí-las como atributos de dados adicionais no elemento de controle ou na própria marcação modal.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Iniciar Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Cabeçalho modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Um belo corpo… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Fechar </a>
  11. <a href = "#" class = "btn btn-primary" > Salvar alterações </a>
  12. </div>
  13. </div>
Atenção! Se você quiser que seu modal seja animado de entrada e saída, basta adicionar uma .fadeclasse ao .modalelemento (consulte a demonstração para ver isso em ação) e inclua bootstrap-transition.js.

Métodos

.modal(opções)

Ativa seu conteúdo como um modal. Aceita uma opção opcional object.

  1. $ ( '#meuModal' ). modal ({
  2. teclado : falso
  3. })

.modal('toggle')

Alterna manualmente um modal.

  1. $ ( '#meuModal' ). modal ( 'alternar' )

.modal('mostrar')

Abre manualmente um modal.

  1. $ ( '#meuModal' ). modal ( 'mostrar' )

.modal('ocultar')

Oculta manualmente um modal.

  1. $ ( '#meuModal' ). modal ( 'esconder' )

Eventos

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

Evento Descrição
mostrar Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrando Este evento é acionado quando o modal se torna visível para o usuário (aguardará a conclusão das transições css).
ocultar Este evento é acionado imediatamente quando o hidemétodo de instância é chamado.
escondido Este evento é acionado quando o modal termina de ser ocultado do usuário (aguardará a conclusão das transições css).
  1. $ ( '#meuModal' ). on ( 'oculto' , função () {
  2. // faça alguma coisa…
  3. })

O plugin ScrollSpy é para atualizar automaticamente os destinos de navegação com base na posição de rolagem.

⇬ Fazer download do arquivo

Exemplo de barra de navegação com scrollspy

Role a área abaixo e assista à atualização de navegação. Os subitens suspensos também serão destacados. Tente!

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


Usando bootstrap-scrollspy.js

Chame o scrollspy via javascript:

  1. $ ( '#navbar' ). espião de rolagem ()

Marcação

Para adicionar facilmente o comportamento do scrollspy à sua navegação na barra superior, basta adicionar data-spy="scroll"o elemento que você deseja espionar (geralmente esse seria o corpo).

  1. <body data-spy = "scroll" > ... </body>
Atenção! 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>.

Métodos

.scrollspy('atualizar')

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:

  1. $ ( '[data-spy="scroll"]' ). cada ( função () {
  2. var $ espião = $ ( this ). scrollspy ( 'atualizar' )
  3. });

Opções

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

Evento Descrição
ativar Este evento é acionado sempre que um novo item é ativado pelo scrollspy.

Este plug-in adiciona a funcionalidade rápida e dinâmica de tabulação e pílula para fazer a transição pelo conteúdo local.

⇬ Fazer download do arquivo

Guias de exemplo

Clique nas guias abaixo para alternar entre os painéis ocultos, mesmo por meio de menus suspensos.

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.


Usando bootstrap-tab.js

Habilite abas tabable via javascript (cada aba precisa ser ativada individualmente):

  1. $ ( '#minhaTab a' ). clique ( função ( e ) {
  2. e . preventDefault ();
  3. $ ( isso ). tab ( 'mostrar' );
  4. })

Você pode ativar guias individuais de várias maneiras:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'mostrar' ); // Seleciona a aba pelo nome
  2. $ ( '#myTab a:primeiro' ). tab ( 'mostrar' ); //Seleciona a primeira aba
  3. $ ( '#minhaTab a:último' ). tab ( 'mostrar' ); // Seleciona a última aba
  4. $ ( '#minhaTab li:eq(2) a' ). tab ( 'mostrar' ); // Selecione a terceira guia (indexada a 0)

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 nave nav-tabsà guia ulaplicará o estilo da guia bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Página inicial </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Perfil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mensagens </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Configurações </a></li>
  6. </ul>

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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "ativo" ><a href = "#home" > Página inicial </a></li>
  3. <li><a href = "#profile" > Perfil </a></li>
  4. <li><a href = "#messages" > Mensagens </a></li>
  5. <li><a href = "#settings" > Configurações </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane ativo" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "perfil" > ... </div>
  11. <div class = "tab-pane" id = "mensagens" > ... </div>
  12. <div class = "tab-pane" id = "configurações" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( função () {
  17. $ ( '#minhaTab a:último' ). tab ( 'mostrar' );
  18. })
  19. </script>

Eventos

Evento Descrição
mostrar 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.
mostrando 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.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'mostrado' , função ( e ) {
  2. e . alvo // aba ativada
  3. e . relatedTarget // aba anterior
  4. })

Sobre dicas de ferramentas

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.

⇬ Fazer download do arquivo

Exemplo de uso de dicas de ferramentas

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.


Usando bootstrap-tooltip.js

Acione a dica de ferramenta via javascript:

  1. $ ( '#exemplo' ). dica de ferramenta ( opções )

Opções

Nome modelo predefinição Descrição
animação boleano verdadeiro aplique uma transição de fade css à dica de ferramenta
colocação string|função 'topo' como posicionar a dica de ferramenta - top | inferior | esquerda | certo
seletor corda falso Se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados.
título seqüência | função '' valor de título padrão se a tag `title` não estiver presente
acionar corda 'flutuar' como a dica de ferramenta é acionada - passe o mouse | foco | manual
atraso número | objeto 0

atraso mostrando e ocultando a 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 }

Atenção! Opções para dicas de ferramentas individuais podem ser especificadas alternativamente por meio do uso de atributos de dados.

Marcação

Por motivos de desempenho, as APIs de dados de dica de ferramenta e popover são aceitas. Se você quiser usá-las, basta especificar uma opção de seletor.

  1. <a href = "#" rel = "dica de ferramenta" title = "primeira dica de ferramenta" > passe o mouse sobre mim </a>

Métodos

$().tooltip(opções)

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

.tooltip('mostrar')

Revela a dica de ferramenta de um elemento.

  1. $ ( '#elemento' ). dica de ferramenta ( 'mostrar' )

.tooltip('ocultar')

Oculta a dica de ferramenta de um elemento.

  1. $ ( '#elemento' ). dica de ferramenta ( 'ocultar' )

.tooltip('toggle')

Alterna a dica de ferramenta de um elemento.

  1. $ ( '#elemento' ). dica de ferramenta ( 'toggle' )

Sobre popovers

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

* Requer a inclusão da dica de ferramenta

⇬ Fazer download do arquivo

Exemplo de popover ao passar o mouse

Passe o mouse sobre o botão para acionar o popover.


Usando bootstrap-popover.js

Habilite popovers via javascript:

  1. $ ( '#exemplo' ). popover ( opções )

Opções

Nome modelo predefinição Descrição
animação boleano verdadeiro aplique uma transição de fade css à dica de ferramenta
colocação string|função 'certo' como posicionar o popover - top | inferior | esquerda | certo
seletor corda falso se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados
acionar corda 'flutuar' como a dica de ferramenta é acionada - passe o mouse | foco | manual
título seqüência | função '' valor de título padrão se o atributo `title` não estiver presente
contente seqüência | função '' valor de conteúdo padrão se o atributo `data-content` não estiver presente
atraso número | objeto 0

atraso mostrando e ocultando o 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 }

Atenção! Opções para popovers individuais podem ser especificadas alternativamente através do uso de atributos de dados.

Marcação

Por motivos de desempenho, as APIs de dados de dica de ferramenta e popover são aceitas. Se você quiser usá-las, basta especificar uma opção de seletor.

Métodos

$().popover(opções)

Inicializa popovers para uma coleção de elementos.

.popover('mostrar')

Revela um popover de elementos.

  1. $ ( '#elemento' ). popover ( 'mostrar' )

.popover('ocultar')

Oculta um popover de elementos.

  1. $ ( '#elemento' ). popover ( 'esconder' )

.popover('toggle')

Alterna um popover de elementos.

  1. $ ( '#elemento' ). popover ( 'alternar' )

Sobre alertas

O plugin de alerta é uma pequena classe para adicionar funcionalidade próxima aos alertas.

Download

Alertas de exemplo

O plugin de alertas funciona em mensagens de alerta regulares e mensagens de bloqueio.

Santo guacamole! Melhor verificar você mesmo, você não está parecendo muito bem.

Oh sôfrego! Você tem um erro!

Altere isso e aquilo 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.

Tome esta ação Ou faça isso


Usando bootstrap-alert.js

Habilite a dispensa de um alerta via javascript:

  1. $ ( ".alerta" ). alerta ()

Marcação

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

  1. <a class = "fechar" data-dismiss = "alert" href = "#" > × </a>

Métodos

$().alert()

Envolve todos os alertas com funcionalidade de fechamento. Para que seus alertas sejam animados quando fechados, certifique-se de que eles já tenham a classe .fadee .inaplicada a eles.

.alert('fechar')

Fecha um alerta.

  1. $ ( ".alerta" ). alerta ( 'perto' )

Eventos

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

Evento Descrição
perto Este evento é acionado imediatamente quando o closemétodo de instância é chamado.
fechado Este evento é acionado quando o alerta é fechado (aguardará a conclusão das transições css).
  1. $ ( '#meu-alerta' ). bind ( 'fechado' , function () {
  2. // faça alguma coisa…
  3. })

Sobre

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.

⇬ Fazer download do arquivo

Exemplos de uso

Use o plugin de botões para estados e alternâncias.

Stateful
Alternar simples
Caixa de seleção
Rádio

Usando bootstrap-button.js

Habilitar botões via javascript:

  1. $ ( '.nav-tabs' ). botão ()

Marcação

Os atributos de dados são parte integrante do plug-in do botão. Confira o código de exemplo abaixo para os vários tipos de marcação.

  1. <!-- Adicione data-toggle="button" para ativar a alternância em um único botão -->
  2. <button class = "btn" data-toggle = "button" > Alternar Única </button>
  3.  
  4. <!-- Adicionar data-toggle="buttons-checkbox" para alternar o estilo da caixa de seleção em btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Esquerda </button>
  7. <button class = "btn" > Meio </button>
  8. <button class = "btn" > Direita </button>
  9. </div>
  10.  
  11. <!-- Adicionar data-toggle="buttons-radio" para alternar o estilo de rádio em btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Esquerda </button>
  14. <button class = "btn" > Meio </button>
  15. <button class = "btn" > Direita </button>
  16. </div>

Métodos

$().button('toggle')

Alterna o estado de push. Dá ao botão a aparência de que foi ativado.

Atenção! Você pode habilitar a alternância automática de um botão usando o data-toggleatributo.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('carregando')

Define o estado do botão para carregamento - desativa o botão e troca o texto para carregar o texto. O texto de carregamento deve ser definido no elemento botão usando o atributo data data-loading-text.

  1. <button class = "btn" data-loading-text = "carregando coisas..." > ... </button>
Atenção! O Firefox mantém o estado desabilitado entre os carregamentos de página . Uma solução para isso é usar autocomplete="off".

$().button('redefinir')

Redefine o estado do botão - troca o texto pelo texto original.

$().button(string)

Redefine o estado do botão - troca o texto para qualquer estado de texto definido por dados.

  1. <button class = "btn" data-complete-text = "concluído!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). botão ( 'completo' )
  4. </script>

Sobre

Obtenha estilos básicos e suporte flexível para componentes dobráveis, como acordeões e navegação.

⇬ Fazer download do arquivo

* Requer a inclusão do plugin Transitions.

Exemplo de acordeão

Usando o plug-in de recolhimento, construímos um widget simples no estilo acordeão:

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.

Usando bootstrap-collapse.js

Habilitar via javascript:

  1. $ ( ".recolher" ). colapso ()

Opções

Nome modelo predefinição Descrição
pai seletor falso Se seletor, 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)
alternar boleano verdadeiro Alterna o elemento recolhível na invocação

Marcação

Basta adicionar data-toggle="collapse"e um data-targetelemento to 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.

  1. <button class = "btn btn-danger" data-toggle = "recolher" data-target = "#demo" >
  2. simples dobrável
  3. </button>
  4.  
  5. <div id = "demo" class = "recolher em" > </div>
Atenção! 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.

Métodos

.collapse(opções)

Ativa seu conteúdo como um elemento recolhível. Aceita uma opção opcional object.

  1. $ ( '#meuRecolhível' ). recolher ({
  2. alternar : falso
  3. })

.collapse('toggle')

Alterna um elemento recolhível para mostrado ou oculto.

.collapse('mostrar')

Mostra um elemento recolhível.

.collapse('ocultar')

Oculta um elemento recolhível.

Eventos

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

Evento Descrição
mostrar Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrando Este evento é acionado quando um elemento de recolhimento se torna visível para o usuário (aguardará a conclusão das transições css).
ocultar Este evento é disparado imediatamente quando o hidemétodo é chamado.
escondido Este evento é acionado quando um elemento de recolhimento foi ocultado do usuário (aguardará a conclusão das transições css).
  1. $ ( '#meuRecolhível' ). on ( 'oculto' , função () {
  2. // faça alguma coisa…
  3. })

Sobre

Um plug-in básico e facilmente estendido para criar rapidamente tipos elegantes com qualquer entrada de texto de formulário.

⇬ Fazer download do arquivo

Exemplo

Comece a digitar no campo abaixo para mostrar os resultados da digitação antecipada.


Usando bootstrap-typeahead.js

Chame o typeahead via javascript:

  1. $ ( '.typeahead' ). digitação ()

Opções

Nome modelo predefinição Descrição
fonte variedade [ ] A fonte de dados a ser consultada.
Itens número 8 O número máximo de itens a serem exibidos na lista suspensa.
combinador função não diferencia maiúsculas de minúsculas O método usado para determinar se uma consulta corresponde a um item. Aceita um único argumento, itemcontra o qual testar a consulta. Acesse a consulta atual com this.query. Retorna um booleano truese a consulta for uma correspondência.
classificador função correspondência exata,
diferencia maiúsculas de minúsculas,
não diferencia maiúsculas de minúsculas
Método usado para classificar resultados de preenchimento automático. Aceita um único argumento itemse tem o escopo da instância typeahead. Referencie a consulta atual com this.query.
marcador função destaca todas as correspondências padrão Método usado para destacar resultados de preenchimento automático. Aceita um único argumento iteme tem o escopo da instância typeahead. Deve retornar html.

Marcação

Adicione atributos de dados para registrar um elemento com funcionalidade de digitação antecipada.

  1. <input type = "texto" data-provide = "typeahead" >

Métodos

.typeahead(opções)

Inicializa uma entrada com um typeahead.