Sobre modais

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

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.

Usando bootstrap-modal

Chame o modal via javascript:

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

Opções

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.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Iniciar Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Cabeçalho modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Um belo corpo… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Fechar </a>   
    <a href = "#" class = "btn btn-primary" > Salvar alterações </a>  
  </div>
</div>

Métodos

.modal(opções)

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

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

.modal('toggle')

Alterna manualmente um modal.

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

.modal('mostrar')

Abre manualmente um modal.

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

.modal('ocultar')

Oculta manualmente um modal.

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

Eventos

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

$ ( '#meuModal' ). on ( 'oculto' , função () {   
  // faça alguma coisa…
})

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

Exemplos

Clique nos links de navegação suspensos na barra de navegação e nas pílulas abaixo para testar os menus suspensos.

• Link normal
• Suspenso
  • Action
  • Another action
  • Something else here
  • Separated link
• Lista suspensa 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Lista suspensa 3
  • Action
  • Another action
  • Something else here
  • Separated link

Usando bootstrap-dropdown.js

Chame as listas suspensas via javascript:

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

Marcação

Para adicionar rapidamente a funcionalidade suspensa a qualquer elemento, basta adicionar data-toggle="dropdown"e qualquer menu suspenso de bootstrap válido será ativado automaticamente.

<ul class = "nav nav-pills" > 
  <li class = "ativo" ><a href = "#" > Link normal </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Suspenso
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu suspenso" > 
      <li><a href = "#" > Ação </a></li> 
      <li><a href = "#" > Outra ação </a></li> 
      <li><a href = "#" > Outra coisa aqui </a></li> 
      <li class = "divisor" ></li> 
      <li><a href = "#" > Link separado </a></li> 
    </ul>
  </li>
  ...
</ul>

Para manter os URLs intactos, use o data-targetatributo em vez de href="#".

<ul class = "nav nav-pills" > 
  <li class = "lista suspensa" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Suspenso
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu suspenso" > 
      ...
    </ul>
  </li>
</ul>

Métodos

$().dropdown()

Uma API programática para ativar menus para uma determinada barra de navegação ou navegação com guias.

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

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!

Usando bootstrap-scrollspy.js

Chame o scrollspy via javascript:

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

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

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:

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

Opções

Eventos

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.

Guias de exemplo

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

• Casa
• Perfil
• Suspenso
  • @fat
  • @mdo

Usando bootstrap-tab.js

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

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

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'mostrar' ); // Seleciona a aba pelo nome 
$ ( '#myTab a:primeiro' ). tab ( 'mostrar' ); //Seleciona a primeira aba 
$ ( '#minhaTab a:último' ). tab ( 'mostrar' ); // Seleciona a última aba 
$ ( '#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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Página inicial </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

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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "ativo" ><a href = "#home" > Página inicial </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 ativo" id = "home" > ... </div>  
  <div class = "tab-pane" id = "perfil" > ... </div>  
  <div class = "tab-pane" id = "mensagens" > ... </div>  
  <div class = "tab-pane" id = "configurações" > ... </div>  
</div>
 
<script>
  $ ( função () {  
    $ ( '#minhaTab a:último' ). tab ( 'mostrar' );
  })
</script>

Eventos

$ ( 'a[data-toggle="tab"]' ). on ( 'mostrado' , função ( e ) {   
  e . alvo // aba ativada
  e . relatedTarget // aba anterior
})

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.

Exemplo de uso de dicas de ferramentas

Passe o mouse sobre os links abaixo para ver dicas de ferramentas:

Usando bootstrap-tooltip.js

Acione a dica de ferramenta via javascript:

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

Opções

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.

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

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

.tooltip('ocultar')

Oculta a dica de ferramenta de um elemento.

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

.tooltip('toggle')

Alterna a dica de ferramenta de um elemento.

$ ( '#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

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:

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

Opções

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.

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

.popover('ocultar')

Oculta um popover de elementos.

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

.popover('toggle')

Alterna um popover de elementos.

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

Sobre alertas

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

Alertas de exemplo

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

Usando bootstrap-alert.js

Habilite a dispensa de um alerta via javascript:

$ ( ".alerta" ). alerta ()

Marcação

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

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

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

Eventos

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

$ ( '#meu-alerta' ). bind ( 'fechado' , function () {   
  // faça alguma coisa…
})

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.

Exemplos de uso

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

Usando bootstrap-button.js

Habilitar botões via javascript:

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

<!-- Adicione data-toggle="button" para ativar a alternância em um único botão -->
<button class = "btn" data-toggle = "button" > Alternar Única </button>  
 
<!-- Adicionar data-toggle="buttons-checkbox" para alternar o estilo da caixa de seleção em btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Esquerda </button> 
  <button class = "btn" > Meio </button> 
  <button class = "btn" > Direita </button> 
</div>
 
<!-- Adicionar data-toggle="buttons-radio" para alternar o estilo de rádio em btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Esquerda </button> 
  <button class = "btn" > Meio </button> 
  <button class = "btn" > Direita </button> 
</div>

Métodos

$().button('toggle')

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

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

<button class = "btn" data-loading-text = "carregando coisas..." > ... </button>   

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

<button class = "btn" data-complete-text = "concluído!" > ... </button>   
<script>
  $ ( '.btn' ). botão ( 'completo' )
</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:

Usando bootstrap-collapse.js

Habilitar via javascript:

$ ( ".recolher" ). colapso ()

Opções

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.

<button class = "btn btn-danger" data-toggle = "recolher" data-target = "#demo" >   
  simples dobrável
</button>
 
<div id = "demo" class = "recolher em" > … </div>  

Métodos

.collapse(opções)

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

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

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

$ ( '#meuRecolhível' ). on ( 'oculto' , função () {   
  // faça alguma coisa…
})

Sobre

Um plugin genérico para percorrer elementos. Um carrossel.

Exemplo de carrossel

Assista a apresentação de slides abaixo.

Primeira etiqueta da miniatura

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

Segunda etiqueta da miniatura

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

Etiqueta da terceira miniatura

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

‹ ›

Usando bootstrap-carousel.js

Chamada por javascript:

$ ( '.carrossel' ). carrossel ()

Opções

Marcação

Os atributos de dados são usados ​​para os controles anterior e seguinte. Confira a marcação de exemplo abaixo.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Itens do carrossel -->
  <div class = "carousel-inner" > 
    <div class = "item ativo" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carrossel de navegação -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Métodos

.carousel(opções)

Inicializa o carrossel com opções opcionais objecte começa a percorrer os itens.

$ ( '.carrossel' ). carrossel ({
  intervalo : 2000 
})

.carousel('ciclo')

Percorre os itens do carrossel da esquerda para a direita.

.carousel('pausa')

Interrompe o carrossel de percorrer os itens.

.carrossel(número)

Alterna o carrossel para um quadro específico (baseado em 0, semelhante a uma matriz).

.carousel('anterior')

Volta para o item anterior.

.carousel('próximo')

Alterna para o próximo item.

Eventos

A classe carrossel do Bootstrap expõe dois eventos para conectar-se à funcionalidade do carrossel.

Sobre

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

Exemplo

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

Usando bootstrap-typeahead.js

Chame o typeahead via javascript:

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

Opções

Marcação

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

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

Métodos

.typeahead(opções)

Inicializa uma entrada com um typeahead.