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:

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

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

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

$ ( "#meuModal" ). modal () // inicializado com padrões                       
$ ( "#meuModal" ). modal ({ teclado : falso }) // inicializado sem teclado     
$ ( "#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.

var bootstrapButton = $ . f . botão . noConflict () // retorna $.fn.button para o valor atribuído anteriormente 
$ . 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.

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

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

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

<!-- Botão para acionar modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Iniciar modal de demonstração </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" > Cabeçalho modal </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Um belo corpo… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Fechar </button>   
    <button class = "btn btn-primary" > Salvar alterações </button> 
  </div>
</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.

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

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

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

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

Exemplos

Adicione menus suspensos a quase tudo com este plug-in simples, incluindo a barra de navegação, guias e pílulas.

Dentro de uma barra de navegação

Dentro de guias

Uso

Por atributos de dados

Adicione data-toggle="dropdown"a um link ou botão para alternar uma lista suspensa.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Acionador da lista suspensa </a>   
  <ul class = "menu suspenso" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Suspenso
    <b class = "caret" ></b> 
  </a>
  <ul class = "menu suspenso" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Por JavaScript

Chame as listas suspensas via JavaScript:

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

Opções

Nenhum

Métodos

$().dropdown('toggle')

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

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.

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.

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

Por JavaScript

Chame o scrollspy via JavaScript:

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

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

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

Eventos

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.

Uso

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

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:

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:

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

Marcação

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

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

.tooltip('destruir')

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

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

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:

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

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

.popover('destruir')

Esconde e destrói o popover de um elemento.

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

Alertas de exemplo

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

Uso

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

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.

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

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

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Esquerda </button>  
  <button type = "button" class = "btn btn-primary" > Médio </button>  
  <button type = "button" class = "btn btn-primary" > Direita </button>  
</div>

Rádio

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

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Esquerda </button>  
  <button type = "button" class = "btn btn-primary" > Médio </button>  
  <button type = "button" class = "btn btn-primary" > Direita </button>  
</div>

Uso

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

Opções

Nenhum

Métodos

$().button('toggle')

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

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

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

<div class = "acordeão" id = "acordeão2" >  
  <div class = "grupo-acordeão" > 
    <div class = "cabeçalho de acordeão" > 
      <a class = "accordion-toggle" data-toggle = "recolher" data-parent = "#accordion2" href = "#collapseOne" >    
        Item de grupo dobrável nº 1
      </a>
    </div>
    <div id = "collapseOne" class = "corpo sanfonado em colapso" >  
      <div class = "acordeon-inner" > 
        Anim pariatur clichê...
      </div>
    </div>
  </div>
  <div class = "grupo-acordeão" > 
    <div class = "cabeçalho de acordeão" > 
      <a class = "accordion-toggle" data-toggle = "recolher" data-parent = "#accordion2" href = "#collapseTwo" >    
        Item de grupo dobrável nº 2
      </a>
    </div>
    <div id = "collapseTwo" class = "colapso-corpo sanfonado" >  
      <div class = "acordeon-inner" > 
        Anim pariatur clichê...
      </div>
    </div>
  </div>
</div>
...

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.

<button type = "button" class = "btn btn-danger" data-toggle = "recolher" data-target = "#demo" >    
  simples dobrável
</button>
 
<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:

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

Métodos

.collapse(opções)

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

Exemplo de carrossel

A apresentação de slides abaixo mostra um plugin genérico e um componente para percorrer elementos como um carrossel.

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.

Second Thumbnail label

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.

Third Thumbnail label

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

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carrossel-indicadores" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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>

Uso

Por atributos de dados

Use atributos de dados para controlar facilmente a posição do carrossel. data-slideaceita as palavras-chave prevou next, que altera a posição do slide em relação à sua posição atual. Como alternativa, use data-slide-topara passar um índice bruto de slide para o carrossel data-slide-to="2", que pula a posição do slide para um índice específico começando com 0.

Por JavaScript

Chame o carrossel manualmente com:

$ ( '.carrossel' ). carrossel ()

Opções

As opções podem ser passadas através de atributos de dados ou JavaScriptz. Para atributos de dados, anexe o nome da opção a data-, como em data-interval="".

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.

Exemplo

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

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

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

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.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Por JavaScript

Chame o plug-in afixo via JavaScript:

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