JavaScript

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

Individual ou compilado

Os plug-ins podem ser incluídos individualmente (embora alguns tenham dependências obrigatórias) ou todos de uma vez. Ambos bootstrap.js e bootstrap.min.js contêm todos os plugins em um único arquivo.

Atributos de dados

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

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

  1. $ ( 'corpo' ). off ( '.data-api' )

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

  1. $ ( 'corpo' ). off ( '.alert.data-api' )

API programática

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

  1. $ ( ".btn.danger" ). botão ( "alternar" ). addClass ( "gordo" )

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

  1. $ ( "#meuModal" ). modal () // inicializado com padrões
  2. $ ( "#meuModal" ). modal ({ teclado : falso }) // inicializado sem teclado
  3. $ ( "#meuModal" ). modal ( 'show' ) // inicializa e invoca show imediatamente

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

Sem conflito

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

  1. var bootstrapButton = $ . f . botão . noConflict () // retorna $.fn.button para o valor atribuído anteriormente
  2. $ . f . bootstrapBtn = bootstrapButton // dá a $().bootstrapBtn a funcionalidade de bootstrap

Eventos

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

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

  1. $ ( '#meuModal' ). on ( 'mostrar' , função ( e ) {
  2. if (! data ) return e . preventDefault () // impede que o modal seja mostrado
  3. })

Sobre transições

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

Casos de uso

Alguns exemplos do plugin de transição:

  • Deslizamento ou desvanecimento em modais
  • Abas de desvanecimento
  • Alertas de desvanecimento
  • Painéis de carrossel deslizantes

Exemplos

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

Exemplo estático

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

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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" > Fechar </a>
  11. <a href = "#" class = "btn btn-primary" > Salvar alterações </a>
  12. </div>
  13. </div>

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.

  1. <!-- Botão para acionar modal -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Iniciar modal de demonstração </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Cabeçalho modal </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Um belo corpo… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Fechar </button>
  15. <button class = "btn btn-primary" > Salvar alterações </button>
  16. </div>
  17. </div>

Uso

Por atributos de dados

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

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Iniciar modal </button>

Por JavaScript

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

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

Opções

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

Nome modelo predefinição Descrição
pano de fundo 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.
controlo remoto caminho falso

Se uma url remota for fornecida, o conteúdo será carregado pelo loadmétodo do jQuery e injetado no arquivo .modal-body. Se estiver usando a API de dados, você pode usar a hreftag como alternativa para especificar a origem remota. Um exemplo disso é mostrado abaixo:

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

Métodos

.modal(opções)

Ativa seu conteúdo como um modal. Aceita opções opcionais 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. })

Exemplo na barra de navegação

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

@gordo

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

@mdo

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

1

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

dois

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

three

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

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


Uso

Por atributos de dados

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) e data-target=".navbar"selecionar qual navegação usar. Você vai querer usar scrollspy com um .navcomponente.

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

Por JavaScript

Chame o scrollspy via JavaScript:

  1. $ ( '#navbar' ). espião de rolagem ()
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

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

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

Eventos

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

Guias de exemplo

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

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.


Uso

Habilite as guias com guias via JavaScript (cada guia 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. })

Exemplos

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.

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

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.

Quatro direções

Dicas de ferramentas em grupos de entrada

Ao usar dicas de ferramentas e popovers com os grupos de entrada do Bootstrap, você terá que definir a containeropção (documentada abaixo) para evitar efeitos colaterais indesejados.


Uso

Acione a dica de ferramenta via JavaScript:

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

Opções

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

Nome modelo predefinição Descrição
animação boleano verdadeiro aplique uma transição de fade css à dica de ferramenta
html boleano falso Insira html na dica de ferramenta. Se false, o textmétodo do jquery será usado para inserir conteúdo no dom. Use texto se estiver preocupado com ataques XSS.
colocação seqüência | função 'topo' como posicionar a dica de ferramenta - top | inferior | esquerda | 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 'foco flutuante' como a dica de ferramenta é acionada - clique | pairar | foco | manual. Observe que você passa vários tipos de gatilho, separados por espaço,.
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 }

recipiente seqüência | falso falso

Anexa a dica de ferramenta a um elemento específicocontainer: 'body'

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

Marcação

  1. <a href = "#" data-toggle = "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' )

.tooltip('destruir')

Oculta e destrói a dica de ferramenta de um elemento.

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

Exemplos

Adicione pequenas sobreposições de conteúdo, como as do iPad, a qualquer elemento para abrigar informações secundárias. Passe o mouse sobre o botão para acionar o popover. Requer a inclusão da dica de ferramenta .

Popover estático

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

Top popover

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

Popover à direita

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

Parte inferior popover

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

Popover à esquerda

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

Nenhuma marcação mostrada como popovers é gerada a partir de JavaScript e conteúdo dentro de um dataatributo.

Demonstração ao vivo

Quatro direções


Uso

Habilite popovers via JavaScript:

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

Opções

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

Nome modelo predefinição Descrição
animação boleano verdadeiro aplique uma transição de fade css à dica de ferramenta
html boleano falso Insira html no popover. Se false, o textmétodo do jquery será usado para inserir conteúdo no dom. Use texto se estiver preocupado com ataques XSS.
colocação seqüência | função 'certo' como posicionar o popover - top | inferior | esquerda | certo
seletor corda falso se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados
acionar corda 'clique' como o popover é acionado - clique | pairar | 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 }

recipiente seqüência | falso falso

Acrescenta o popover a um elemento específicocontainer: 'body'

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

.popover('destruir')

Esconde e destrói o popover de um elemento.

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

Alertas de exemplo

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

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


Uso

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. })

Exemplos de uso

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.

Stateful

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

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Carregando..." > Estado de carregamento </button>

Alternar simples

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

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Alternar Único </button>

Caixa de seleção

Adicionar data-toggle="buttons-checkbox"para alternar o estilo da caixa de seleção no grupo btn.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Esquerda </button>
  3. <button type = "button" class = "btn btn-primary" > Médio </button>
  4. <button type = "button" class = "btn btn-primary" > Direita </button>
  5. </div>

Rádio

Adicione data-toggle="buttons-radio"para alternar o estilo de rádio no grupo btn.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Esquerda </button>
  3. <button type = "button" class = "btn btn-primary" > Médio </button>
  4. <button type = "button" class = "btn btn-primary" > Direita </button>
  5. </div>

Uso

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

Opções

Nenhum

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

* 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.
  1. <div class = "acordeão" id = "acordeão2" >
  2. <div class = "grupo-acordeão" >
  3. <div class = "cabeçalho de acordeão" >
  4. <a class = "accordion-toggle" data-toggle = "recolher" data-parent = "#accordion2" href = "#collapseOne" >
  5. Item de grupo dobrável nº 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "corpo sanfonado em colapso" >
  9. <div class = "acordeon-inner" >
  10. Anim pariatur clichê...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "grupo-acordeão" >
  15. <div class = "cabeçalho de acordeão" >
  16. <a class = "accordion-toggle" data-toggle = "recolher" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Item de grupo dobrável nº 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "colapso-corpo sanfonado" >
  21. <div class = "acordeon-inner" >
  22. Anim pariatur clichê...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Você também pode usar o plug-in sem a marcação de acordeão. Faça um botão alternar a expansão e o recolhimento de outro elemento.

  1. <button type = "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>

Uso

Por atributos de dados

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.

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

Por JavaScript

Ative manualmente com:

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

Opções

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

Nome modelo predefinição Descrição
pai seletor falso Se 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

Métodos

.collapse(opções)

Ativa seu conteúdo como um elemento recolhível. Aceita opções opcionais 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. })

Exemplo

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

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

Você deve definir autocomplete="off"para evitar que os menus padrão do navegador apareçam no menu suspenso de digitação antecipada do Bootstrap.


Uso

Por atributos de dados

Adicione atributos de dados para registrar um elemento com a funcionalidade de digitação antecipada, conforme mostrado no exemplo acima.

Por JavaScript

Chame o typeahead manualmente com:

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

Opções

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

Nome modelo predefinição Descrição
fonte matriz, função [ ] A fonte de dados a ser consultada. Pode ser um array de strings ou uma função. A função recebe dois argumentos, o queryvalor no campo de entrada e o processretorno de chamada. A função pode ser usada de forma síncrona retornando a fonte de dados diretamente ou de forma assíncrona por meio processdo argumento único do retorno de chamada.
Itens número 8 O número máximo de itens a serem exibidos na lista suspensa.
minLength número 1 O comprimento mínimo de caracteres necessário antes de acionar sugestões de preenchimento automático
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.
atualizador função retorna o item selecionado O método usado para retornar o item selecionado. Aceita um único argumento, o iteme tem o escopo da instância typeahead.
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.

Métodos

.typeahead(opções)

Inicializa uma entrada com um typeahead.

Exemplo

A subnavegação à esquerda é uma demonstração ao vivo do plugin affix.


Uso

Por atributos de dados

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

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Atenção! Você deve gerenciar a posição de um elemento fixado e o comportamento de seu pai imediato. A posição é controlada por affix, affix-top, e affix-bottom. Lembre-se de verificar se há um pai potencialmente recolhido quando o afixo for ativado, pois está removendo o conteúdo do fluxo normal da página.

Por JavaScript

Chame o plug-in afixo via JavaScript:

  1. $ ( '#navbar' ). afixo ()

Opções

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

Nome modelo predefinição Descrição
Deslocamento número | função | objeto 10 Pixels a serem deslocados da tela ao calcular a posição de rolagem. Se for fornecido um único número, o deslocamento será aplicado nas direções superior e esquerda. Para ouvir uma única direção ou vários deslocamentos exclusivos, basta fornecer um objeto offset: { x: 10 }. Use uma função quando precisar fornecer um deslocamento dinamicamente (útil para alguns designs responsivos).