JavaScript
Dê vida aos componentes do Bootstrap com mais de uma dúzia de plugins jQuery personalizados. Inclua todos eles facilmente ou um por um.
Dê vida aos componentes do Bootstrap com mais de uma dúzia de plugins jQuery personalizados. Inclua todos eles facilmente ou um por um.
Os plugins podem ser incluídos individualmente (usando *.js
arquivos individuais do Bootstrap), ou todos de uma vez (usando bootstrap.js
ou o minified bootstrap.min.js
).
Ambos bootstrap.js
e bootstrap.min.js
contêm todos os plugins em um único arquivo. Inclua apenas um.
Alguns plugins e componentes CSS dependem de outros plugins. Se você incluir plugins individualmente, certifique-se de verificar essas dependências nos documentos. Observe também que todos os plugins dependem do jQuery (isso significa que o jQuery deve ser incluído antes dos arquivos do plugin). Consulte nossobower.json
para ver quais versões do jQuery são suportadas.
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 documento com namespace data-api
. Isso se parece com isso:
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:
Não use atributos de dados de vários plugins no mesmo elemento. Por exemplo, um botão não pode ter uma dica de ferramenta e alternar um modal. Para fazer isso, use um elemento de encapsulamento.
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.
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):
Cada plugin também expõe seu construtor bruto em uma Constructor
propriedade: $.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')
.
Você pode alterar as configurações padrão de um plug-in modificando o Constructor.DEFAULTS
objeto do plug-in:
À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 .noConflict
o plugin para o qual deseja reverter o valor.
O Bootstrap fornece eventos personalizados para ações exclusivas da maioria dos plugins. 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.
A partir da versão 3.0.0, todos os eventos do Bootstrap têm namespace.
Todos os eventos infinitivos fornecem preventDefault
funcionalidade. Isso fornece a capacidade de interromper a execução de uma ação antes que ela comece.
A versão de cada um dos plugins jQuery do Bootstrap pode ser acessada através da VERSION
propriedade do construtor do plugin. Por exemplo, para o plug-in de dica de ferramenta:
Os plugins do Bootstrap não retornam de forma particularmente graciosa quando o JavaScript está desabilitado. Se você se preocupa com a experiência do usuário nesse caso, use <noscript>
para explicar a situação (e como reativar o JavaScript) para seus usuários e/ou adicione seus próprios fallbacks personalizados.
O Bootstrap não suporta oficialmente bibliotecas JavaScript de terceiros, como Prototype ou jQuery UI. Apesar .noConflict
dos eventos com namespace, pode haver problemas de compatibilidade que você precisa corrigir por conta própria.
Para efeitos de transição simples, inclua transition.js
uma vez ao lado dos outros arquivos JS. Se você estiver usando o compilado (ou minificado) bootstrap.js
, não há necessidade de incluí-lo - ele já está lá.
Transition.js é um auxiliar básico para transitionEnd
eventos, bem como um emulador de transição CSS. Ele é usado por outros plugins para verificar o suporte de transição CSS e capturar transições suspensas.
As transições podem ser desativadas globalmente usando o seguinte snippet de JavaScript, que deve vir após transition.js
(ou bootstrap.js
ou bootstrap.min.js
, conforme o caso) ser carregado:
Os modais são prompts de diálogo simplificados, mas flexíveis, com a funcionalidade mínima necessária e padrões inteligentes.
Certifique-se de não abrir um modal enquanto outro ainda estiver visível. Mostrar mais de um modal por vez requer código personalizado.
Sempre tente colocar o código HTML de um modal em uma posição de nível superior em seu documento para evitar que outros componentes afetem a aparência e/ou funcionalidade do modal.
Existem algumas ressalvas em relação ao uso de modais em dispositivos móveis. Consulte nossos documentos de suporte do navegador para obter detalhes.
Devido à forma como o HTML5 define sua semântica, o autofocus
atributo HTML não tem efeito nos modais do Bootstrap. Para obter o mesmo efeito, use algum JavaScript personalizado:
Um modal renderizado com cabeçalho, corpo e conjunto de ações no rodapé.
Alterne um modal via JavaScript clicando no botão abaixo. Ele deslizará para baixo e desaparecerá do topo da página.
Certifique-se de adicionar role="dialog"
e aria-labelledby="..."
, referenciando o título modal, para .modal
e role="document"
para o .modal-dialog
próprio.
Além disso, você pode fornecer uma descrição de sua caixa de diálogo modal com aria-describedby
on .modal
.
A incorporação de vídeos do YouTube em modais requer JavaScript adicional que não está no Bootstrap para interromper automaticamente a reprodução e muito mais. Veja esta postagem útil do Stack Overflow para obter mais informações.
Os modais têm dois tamanhos opcionais, disponíveis por meio de classes modificadoras para serem colocadas em um arquivo .modal-dialog
.
Para modais que simplesmente aparecem em vez de aparecer gradualmente, remova a .fade
classe de sua marcação modal.
Para tirar vantagem do sistema de grade do Bootstrap dentro de um modal, apenas aninhe .row
s dentro do .modal-body
e então use as classes normais do sistema de grade.
Tem um monte de botões que acionam o mesmo modal, apenas com conteúdos ligeiramente diferentes? Use event.relatedTarget
e atributos HTMLdata-*
(possivelmente via jQuery ) para variar o conteúdo do modal dependendo de qual botão foi clicado. Consulte os documentos do Modal Events para obter detalhes sobre relatedTarget
,
O plug-in modal alterna seu conteúdo oculto sob demanda, por meio de atributos de dados ou JavaScript. Ele também adiciona .modal-open
ao <body>
comportamento de rolagem padrão para substituir e gera um .modal-backdrop
para fornecer uma área de clique para dispensar os modais mostrados ao clicar fora do modal.
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.
Chame um modal com id myModal
com uma única linha de JavaScript:
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 | booleano ou a string'static' |
verdadeiro | Inclui um elemento de pano de fundo modal. Como alternativa, especifique static um 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 | Esta opção está obsoleta desde a v3.3.0 e foi removida na v4. Recomendamos usar templates do lado do cliente ou uma estrutura de vinculação de dados, ou chamar jQuery.load você mesmo. Se uma URL remota for fornecida, o conteúdo será carregado uma vez pelo método do jQuery |
.modal(options)
Ativa seu conteúdo como um modal. Aceita opções opcionais object
.
.modal('toggle')
Alterna manualmente um modal. Retorna ao chamador antes que o modal tenha sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.modal
or hidden.bs.modal
ocorra).
.modal('show')
Abre manualmente um modal. Retorna ao chamador antes que o modal seja realmente mostrado (ou seja, antes que o shown.bs.modal
evento ocorra).
.modal('hide')
Oculta manualmente um modal. Retorna ao chamador antes que o modal tenha sido realmente oculto (ou seja, antes que o hidden.bs.modal
evento ocorra).
.modal('handleUpdate')
Reajusta o posicionamento do modal para contrariar uma barra de rolagem caso apareça alguma, o que faria o modal pular para a esquerda.
Necessário apenas quando a altura do modal muda enquanto está aberto.
A classe modal do Bootstrap expõe alguns eventos para conexão com a funcionalidade modal.
Todos os eventos modais são disparados no próprio modal (ou seja, no <div class="modal">
).
Tipo de evento | Descrição |
---|---|
show.bs.modal | Este evento é acionado imediatamente quando o show método de instância é chamado. Se causado por um clique, o elemento clicado fica disponível como relatedTarget propriedade do evento. |
mostrado.bs.modal | Este evento é acionado quando o modal se torna visível para o usuário (aguardará a conclusão das transições CSS). Se causado por um clique, o elemento clicado fica disponível como relatedTarget propriedade do evento. |
hide.bs.modal | Este evento é acionado imediatamente quando o hide método de instância é chamado. |
oculto.bs.modal | Este evento é acionado quando o modal termina de ser ocultado do usuário (aguardará a conclusão das transições CSS). |
carregado.bs.modal | Este evento é acionado quando o modal carrega conteúdo usando a remote opção. |
Adicione menus suspensos a quase tudo com este plug-in simples, incluindo a barra de navegação, guias e pílulas.
Por meio de atributos de dados ou JavaScript, o plug-in suspenso alterna o conteúdo oculto (menus suspensos) alternando a .open
classe no item da lista pai.
Em dispositivos móveis, abrir um menu suspenso adiciona uma .dropdown-backdrop
área de toque para fechar menus suspensos ao tocar fora do menu, um requisito para suporte adequado ao iOS. Isso significa que mudar de um menu suspenso aberto para um menu suspenso diferente requer um toque extra no celular.
Observação: o data-toggle="dropdown"
atributo é confiável para fechar menus suspensos em um nível de aplicativo, portanto, é uma boa ideia sempre usá-lo.
Adicione data-toggle="dropdown"
a um link ou botão para alternar uma lista suspensa.
Para manter os URLs intactos com botões de link, use o data-target
atributo em vez de href="#"
.
Chame as listas suspensas via JavaScript:
data-toggle="dropdown"
ainda é necessárioIndependentemente de você chamar sua lista suspensa via JavaScript ou usar a API de dados, data-toggle="dropdown"
é sempre necessário estar presente no elemento de gatilho da lista suspensa.
Nenhum
$().dropdown('toggle')
Alterna o menu suspenso de uma determinada barra de navegação ou navegação com guias.
Todos os eventos suspensos são disparados no .dropdown-menu
elemento pai do .
Todos os eventos suspensos têm uma relatedTarget
propriedade, cujo valor é o elemento âncora de alternância.
Tipo de evento | Descrição |
---|---|
show.bs.dropdown | Este evento é acionado imediatamente quando o método de instância show é chamado. |
mostrado.bs.lista suspensa | Este evento é acionado quando a lista suspensa se torna visível para o usuário (aguardará as transições CSS para serem concluídas). |
hide.bs.dropdown | Este evento é disparado imediatamente quando o método de instância hide é chamado. |
oculto.bs.lista suspensa | Este evento é acionado quando a lista suspensa termina de ser ocultada do usuário (aguardará a conclusão das transições CSS). |
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.
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.
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.
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.
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.
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.
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>
.
:visible
segmentados ignoradosElementos de destino que não estão :visible
de acordo com jQuery serão ignorados e seus itens de navegação correspondentes nunca serão destacados.
Não importa o método de implementação, o scrollspy requer o uso do position: relative;
elemento que você está espionando. Na maioria dos casos este é o <body>
. Ao fazer scrollspy em elementos diferentes do <body>
, certifique-se de ter um height
conjunto e overflow-y: scroll;
aplicado.
Para adicionar facilmente o comportamento do scrollspy à sua navegação na barra superior, adicione data-spy="scroll"
ao elemento que você deseja espionar (geralmente, isso seria o <body>
). Em seguida, adicione o data-target
atributo com o ID ou classe do elemento pai de qualquer .nav
componente do Bootstrap.
Depois position: relative;
de adicionar seu CSS, chame o scrollspy via JavaScript:
.scrollspy('refresh')
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:
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. |
Tipo de evento | Descrição |
---|---|
ativar.bs.scrollspy | Este evento é acionado sempre que um novo item é ativado pelo scrollspy. |
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. Guias aninhadas não são suportadas.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Este plug-in estende o componente de navegação com guias para adicionar áreas com guias.
Habilite as guias com guias via JavaScript (cada guia precisa ser ativada individualmente):
Você pode ativar guias individuais de várias maneiras:
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 nav
and nav-tabs
à guia ul
aplicará o estilo da guia Bootstrap , enquanto adicionar as classes nav
and nav-pills
aplicará o estilo de pílula .
Para fazer as guias aparecerem gradualmente, adicione .fade
a cada .tab-pane
. O primeiro painel de guias também deve .in
tornar visível o conteúdo inicial.
$().tab
Ativa um elemento de guia e um contêiner de conteúdo. A guia deve ter um data-target
ou um href
direcionamento para um nó de contêiner no DOM. Nos exemplos acima, as guias são os <a>
s com data-toggle="tab"
atributos.
.tab('show')
Seleciona a guia fornecida e mostra seu conteúdo associado. Qualquer outra guia selecionada anteriormente torna-se desmarcada e seu conteúdo associado fica oculto. Retorna ao chamador antes que o painel de guias tenha sido realmente mostrado (ou seja, antes que o shown.bs.tab
evento ocorra).
Ao mostrar uma nova guia, os eventos são acionados na seguinte ordem:
hide.bs.tab
(na guia ativa atual)show.bs.tab
(na guia a ser exibida)hidden.bs.tab
(na aba ativa anterior, a mesma do hide.bs.tab
evento)shown.bs.tab
(na guia recém-ativada recém-exibida, a mesma do show.bs.tab
evento)Se nenhuma guia já estiver ativa, os eventos hide.bs.tab
e hidden.bs.tab
não serão acionados.
Tipo de evento | Descrição |
---|---|
show.bs.guia | Este evento é acionado na exibição de guias, mas antes que a nova guia seja exibida. Use event.target e event.relatedTarget para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente. |
mostrado.bs.guia | Este evento é acionado na exibição de guias após a exibição de uma guia. Use event.target e event.relatedTarget para direcionar a guia ativa e a guia ativa anterior (se disponível), respectivamente. |
ocultar.bs.guia | Este evento é acionado quando uma nova guia deve ser mostrada (e, portanto, a guia ativa anterior deve ser ocultada). Use event.target e event.relatedTarget para segmentar a guia ativa atual e a nova guia em breve ativa, respectivamente. |
tab.bs.escondidos | Este evento é acionado depois que uma nova guia é mostrada (e, portanto, a guia ativa anterior fica oculta). Use event.target e event.relatedTarget para segmentar a guia ativa anterior e a nova guia ativa, respectivamente. |
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.
Dicas de ferramentas com títulos de comprimento zero nunca são exibidas.
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 opções estão disponíveis: alinhamento superior, direito, inferior e alinhamento à esquerda.
Por motivos de desempenho, as APIs de dados de dica de ferramenta e popover são opcionais, o que significa que você deve inicializá-las você mesmo .
Uma maneira de inicializar todas as dicas de ferramentas em uma página seria selecioná-las por seu data-toggle
atributo:
O plug-in de dica de ferramenta gera conteúdo e marcação sob demanda e, por padrão, coloca dicas de ferramenta após o elemento de acionamento.
Acione a dica de ferramenta via JavaScript:
A marcação necessária para uma dica de ferramenta é apenas um data
atributo e title
no elemento HTML você deseja ter uma dica de ferramenta. A marcação gerada de uma dica de ferramenta é bastante simples, embora exija uma posição (por padrão, definida top
pelo plug-in).
Às vezes, você deseja adicionar uma dica de ferramenta a um hiperlink que envolve várias linhas. O comportamento padrão do plug-in de dica de ferramenta é centralizá-lo horizontalmente e verticalmente. Adicione white-space: nowrap;
às suas âncoras para evitar isso.
Ao usar dicas de ferramentas em elementos dentro de um .btn-group
ou um .input-group
, ou em elementos relacionados à tabela ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), você terá que especificar a opção container: 'body'
(documentada abaixo) para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ ou perdendo seus cantos arredondados quando a dica de ferramenta é acionada).
Para usuários que navegam com um teclado e, em particular, usuários de tecnologias assistivas, você só deve adicionar dicas de ferramentas a elementos com foco no teclado, como links, controles de formulário ou qualquer elemento arbitrário com um tabindex="0"
atributo.
Para adicionar uma dica de ferramenta a um elemento disabled
ou .disabled
, coloque o elemento dentro de a <div>
e aplique a dica de ferramenta a <div>
ele.
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 | Aplicar uma transição de fade CSS à dica de ferramenta |
recipiente | seqüência | falso | falso | Acrescenta a dica de ferramenta a um elemento específico. Exemplo: |
atraso | número | objeto | 0 | Atraso na exibição e ocultação da 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 é: |
html | boleano | falso | Insira HTML na dica de ferramenta. Se false, o text mé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 | direito | auto. Quando uma função é usada para determinar o posicionamento, ela é chamada com o nó DOM da dica de ferramenta como seu primeiro argumento e o nó DOM do elemento acionador como seu segundo. O |
seletor | corda | falso | Se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados. Na prática, isso é usado para permitir que o conteúdo HTML dinâmico tenha dicas de ferramentas adicionadas. Veja este e um exemplo informativo . |
modelo | corda | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML base a ser usado ao criar a dica de ferramenta. As dicas de ferramentas
O elemento wrapper mais externo deve ter a |
título | seqüência | função | '' | Valor de título padrão se o Se uma função for fornecida, ela será chamada com sua |
acionar | corda | 'foco flutuante' | Como a dica de ferramenta é acionada - clique | pairar | foco | manual. Você pode passar vários gatilhos; separe-os com um espaço. manual não pode ser combinado com nenhum outro gatilho. |
janela de exibição | seqüência | objeto | função | { seletor: 'corpo', preenchimento: 0 } | Mantém a dica de ferramenta dentro dos limites desse elemento. Exemplo: Se uma função for fornecida, ela será chamada com o nó DOM do elemento acionador como seu único argumento. O |
Opções para dicas de ferramentas individuais podem ser especificadas alternativamente por meio do uso de atributos de dados, conforme explicado acima.
$().tooltip(options)
Anexa um manipulador de dica de ferramenta a uma coleção de elementos.
.tooltip('show')
Revela a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido mostrada (ou seja, antes que o shown.bs.tooltip
evento ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta. Dicas de ferramentas com títulos de comprimento zero nunca são exibidas.
.tooltip('hide')
Oculta a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido ocultada (ou seja, antes que o hidden.bs.tooltip
evento ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta.
.tooltip('toggle')
Alterna a dica de ferramenta de um elemento. Retorna ao chamador antes que a dica de ferramenta tenha sido mostrada ou ocultada (ou seja, antes que o evento shown.bs.tooltip
ou hidden.bs.tooltip
ocorra). Isso é considerado um acionamento "manual" da dica de ferramenta.
.tooltip('destroy')
Oculta e destrói a dica de ferramenta de um elemento. As dicas de ferramentas que usam delegação (que são criadas usando a selector
opção ) não podem ser destruídas individualmente em elementos acionadores descendentes.
Tipo de evento | Descrição |
---|---|
show.bs.dica | Este evento é acionado imediatamente quando o show método de instância é chamado. |
mostrado.bs.dica | Este evento é acionado quando a dica de ferramenta se torna visível para o usuário (aguardará a conclusão das transições CSS). |
hide.bs.dica | Este evento é acionado imediatamente quando o hide método de instância é chamado. |
hidden.bs.dica de ferramenta | Este evento é acionado quando a dica de ferramenta termina de ser ocultada do usuário (aguardará a conclusão das transições CSS). |
insert.bs.dica de ferramenta | Este evento é acionado após o show.bs.tooltip evento quando o modelo de dica de ferramenta foi adicionado ao DOM. |
Adicione pequenas sobreposições de conteúdo, como as do iPad, a qualquer elemento para abrigar informações secundárias.
Os popovers cujo título e conteúdo são de comprimento zero nunca são exibidos.
Os popovers exigem que o plug -in de dica de ferramenta seja incluído na sua versão do Bootstrap.
Por motivos de desempenho, as APIs de dados de dica de ferramenta e popover são opcionais, o que significa que você deve inicializá-las você mesmo .
Uma maneira de inicializar todos os popovers em uma página seria selecioná-los por seu data-toggle
atributo:
Ao usar popovers em elementos dentro de a .btn-group
ou an .input-group
, ou em elementos relacionados à tabela ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), você terá que especificar a opção container: 'body'
(documentada abaixo) para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ ou perdendo seus cantos arredondados quando o popover é acionado).
Para adicionar um popover a um elemento disabled
ou .disabled
, coloque o elemento dentro de a <div>
e aplique o popover a <div>
ele.
Às vezes, você deseja adicionar um popover a um hiperlink que envolve várias linhas. O comportamento padrão do plugin popover é centralizá-lo horizontalmente e verticalmente. Adicione white-space: nowrap;
às suas âncoras para evitar isso.
Quatro opções estão disponíveis: alinhamento superior, direito, inferior e alinhamento à esquerda.
Sed posuere consectetur est em lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est em lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est em lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est em lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Use o focus
gatilho para dispensar popovers no próximo clique que o usuário fizer.
Para um comportamento adequado entre navegadores e plataformas, você deve usar a <a>
tag, não a <button>
tag, e também deve incluir os atributos role="button"
e .tabindex
Habilite popovers via JavaScript:
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 | Aplicar uma transição de fade CSS ao popover |
recipiente | seqüência | falso | falso | Acrescenta o popover a um elemento específico. Exemplo: |
contente | seqüência | função | '' | Valor de conteúdo padrão se Se uma função for fornecida, ela será chamada com sua |
atraso | número | objeto | 0 | Atraso na exibição e ocultação do 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 é: |
html | boleano | falso | Insira o HTML no popover. Se false, o text mé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 | direito | auto. Quando uma função é usada para determinar o posicionamento, ela é chamada com o nó DOM popover como seu primeiro argumento e o nó DOM do elemento acionador como seu segundo. O |
seletor | corda | falso | Se um seletor for fornecido, os objetos popover serão delegados aos destinos especificados. Na prática, isso é usado para permitir que o conteúdo HTML dinâmico tenha popovers adicionados. Veja este e um exemplo informativo . |
modelo | corda | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML base para usar ao criar o popover. Os popovers Os popovers
O elemento wrapper mais externo deve ter a |
título | seqüência | função | '' | Valor de título padrão se o Se uma função for fornecida, ela será chamada com sua |
acionar | corda | 'clique' | Como o popover é acionado - clique | pairar | foco | manual. Você pode passar vários gatilhos; separe-os com um espaço. manual não pode ser combinado com nenhum outro gatilho. |
janela de exibição | seqüência | objeto | função | { seletor: 'corpo', preenchimento: 0 } | Mantém o popover dentro dos limites deste elemento. Exemplo: Se uma função for fornecida, ela será chamada com o nó DOM do elemento acionador como seu único argumento. O |
Opções para popovers individuais podem ser especificadas alternativamente através do uso de atributos de dados, conforme explicado acima.
$().popover(options)
Inicializa popovers para uma coleção de elementos.
.popover('show')
Revela o popover de um elemento. Retorna ao chamador antes que o popover tenha sido realmente mostrado (ou seja, antes que o shown.bs.popover
evento ocorra). Isso é considerado um acionamento "manual" do popover. Os popovers cujo título e conteúdo são de comprimento zero nunca são exibidos.
.popover('hide')
Oculta o popover de um elemento. Retorna ao chamador antes que o popover tenha sido ocultado (ou seja, antes que o hidden.bs.popover
evento ocorra). Isso é considerado um acionamento "manual" do popover.
.popover('toggle')
Alterna o popover de um elemento. Retorna ao chamador antes que o popover tenha sido exibido ou ocultado (ou seja, antes que o evento shown.bs.popover
ou hidden.bs.popover
ocorra). Isso é considerado um acionamento "manual" do popover.
.popover('destroy')
Esconde e destrói o popover de um elemento. Popovers que usam delegação (que são criados usando a selector
opção ) não podem ser destruídos individualmente em elementos de disparo descendentes.
Tipo de evento | Descrição |
---|---|
show.bs.popover | Este evento é acionado imediatamente quando o show método de instância é chamado. |
mostrado.bs.popover | Este evento é acionado quando o popover se torna visível para o usuário (aguardará a conclusão das transições CSS). |
hide.bs.popover | Este evento é acionado imediatamente quando o hide método de instância é chamado. |
oculto.bs.popover | Este evento é acionado quando o popover termina de ser ocultado do usuário (aguardará a conclusão das transições CSS). |
inserido.bs.popover | Este evento é acionado após o show.bs.popover evento quando o modelo popover foi adicionado ao DOM. |
Adicione a funcionalidade de dispensa a todas as mensagens de alerta com este plug-in.
Ao usar um .close
botão, ele deve ser o primeiro filho do .alert-dismissible
e nenhum conteúdo de texto pode vir antes dele na marcação.
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.
Basta adicionar data-dismiss="alert"
ao seu botão Fechar para fornecer automaticamente uma funcionalidade de fechamento de alerta. Fechar um alerta o remove do DOM.
Para que seus alertas usem animação ao fechar, certifique-se de que eles tenham o .fade
e.in
classes
$().alert()
Faz um alerta escutar eventos de clique em elementos descendentes que possuem o data-dismiss="alert"
atributo. (Não é necessário ao usar a inicialização automática da API de dados.)
$().alert('close')
Fecha um alerta removendo-o do DOM. Se as classes .fade
e .in
estiverem presentes no elemento, o alerta desaparecerá antes de ser removido.
O plugin de alerta do Bootstrap expõe alguns eventos para se conectar à funcionalidade de alerta.
Tipo de evento | Descrição |
---|---|
close.bs.alert | Este evento é acionado imediatamente quando o close método de instância é chamado. |
alerta.bs.fechado | Este evento é acionado quando o alerta é fechado (aguardará a conclusão das transições CSS). |
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.
O Firefox persiste nos estados de controle de formulário (desativação e verificação) nos carregamentos de página . Uma solução para isso é usar autocomplete="off"
. Veja o bug nº 654072 do Mozilla .
Adicionar data-loading-text="Loading..."
para usar um estado de carregamento em um botão.
Esse recurso está obsoleto desde a v3.3.5 e foi removido na v4.
Para esta demonstração, estamos usando data-loading-text
and $().button('loading')
, mas esse não é o único estado que você pode usar. Veja mais sobre isso abaixo na $().button(string)
documentação .
Adicionar data-toggle="button"
para ativar a alternância em um único botão.
.active
earia-pressed="true"
Para botões pré-alternados, você deve adicionar a .active
classe e o aria-pressed="true"
atributo a button
você mesmo.
Adicione data-toggle="buttons"
a uma .btn-group
caixa de seleção ou entradas de rádio para permitir a alternância em seus respectivos estilos.
.active
Para opções pré-selecionadas, você mesmo deve adicionar a .active
classe às entradas label
.
Se o estado marcado de um botão de caixa de seleção for atualizado sem disparar um click
evento no botão (por exemplo, via <input type="reset">
ou via definir a checked
propriedade da entrada), você precisará alternar a .active
classe na entrada label
.
$().button('toggle')
Alterna o estado de push. Dá ao botão a aparência de que foi ativado.
$().button('reset')
Redefine o estado do botão - troca o texto pelo texto original. Esse método é assíncrono e retorna antes que a redefinição seja realmente concluída.
$().button(string)
Troca o texto para qualquer estado de texto definido por dados.
Plugin flexível que utiliza um punhado de classes para facilitar o comportamento de alternância.
Collapse requer que o plugin de transições seja incluído na sua versão do Bootstrap.
Clique nos botões abaixo para mostrar e ocultar outro elemento por meio de alterações de classe:
.collapse
esconde conteúdo.collapsing
é aplicado durante as transições.collapse.in
mostra o conteúdoVocê pode usar um link com o href
atributo ou um botão com o data-target
atributo. Em ambos os casos, o data-toggle="collapse"
é necessário.
Estenda o comportamento de recolhimento padrão para criar um acordeão com o componente do painel.
Também é possível trocar .panel-body
s por .list-group
s.
Certifique-se de adicionar aria-expanded
ao elemento de controle. Esse atributo define explicitamente o estado atual do elemento recolhível para leitores de tela e tecnologias assistivas semelhantes. Se o elemento recolhível estiver fechado por padrão, ele deverá ter um valor de aria-expanded="false"
. Se você definiu o elemento recolhível para ser aberto por padrão usando a in
classe, defina aria-expanded="true"
no controle. O plug-in alternará automaticamente esse atributo com base no fato de o elemento recolhível ter sido aberto ou fechado.
Além disso, se o seu elemento de controle tiver como alvo um único elemento recolhível – ou seja, o data-target
atributo está apontando para um id
seletor – você pode adicionar um aria-controls
atributo adicional ao elemento de controle, contendo o id
do elemento recolhível. Leitores de tela modernos e tecnologias assistivas semelhantes fazem uso desse atributo para fornecer aos usuários atalhos adicionais para navegar diretamente para o próprio elemento recolhível.
O plugin de colapso utiliza algumas classes para lidar com o trabalho pesado:
.collapse
esconde o conteúdo.collapse.in
mostra o conteúdo.collapsing
é adicionado quando a transição começa e removido quando terminaEssas classes podem ser encontradas em component-animations.less
.
Basta adicionar data-toggle="collapse"
e data-target
a ao elemento para atribuir automaticamente o controle de um elemento dobrável. O data-target
atributo aceita um seletor CSS ao qual aplicar o recolhimento. Certifique-se de adicionar a classe collapse
ao 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.
Ative manualmente com:
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 um seletor for fornecido, 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 - isso depende da panel classe) |
alternar | boleano | verdadeiro | Alterna o elemento recolhível na invocação |
.collapse(options)
Ativa seu conteúdo como um elemento recolhível. Aceita opções opcionais object
.
.collapse('toggle')
Alterna um elemento recolhível para mostrado ou oculto. Retorna ao chamador antes que o elemento recolhível tenha realmente sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.collapse
or hidden.bs.collapse
ocorra).
.collapse('show')
Mostra um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido realmente mostrado (ou seja, antes que o shown.bs.collapse
evento ocorra).
.collapse('hide')
Oculta um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido ocultado (ou seja, antes que o hidden.bs.collapse
evento ocorra).
A classe de recolhimento do Bootstrap expõe alguns eventos para conexão com a funcionalidade de recolhimento.
Tipo de evento | Descrição |
---|---|
show.bs.collapse | Este evento é acionado imediatamente quando o show método de instância é chamado. |
mostrado.bs.recolher | Este evento é acionado quando um elemento de recolhimento se torna visível para o usuário (aguardará a conclusão das transições CSS). |
hide.bs.collapse | Este evento é disparado imediatamente quando o hide método é chamado. |
oculto.bs.recolher | Este evento é acionado quando um elemento de recolhimento foi ocultado do usuário (aguardará a conclusão das transições CSS). |
Um componente de apresentação de slides para percorrer elementos, como um carrossel. Carrosséis aninhados não são suportados.
O componente carrossel geralmente não é compatível com os padrões de acessibilidade. Se você precisa estar em conformidade, considere outras opções para apresentar seu conteúdo.
O Bootstrap usa exclusivamente CSS3 para suas animações, mas o Internet Explorer 8 e 9 não suporta as propriedades CSS necessárias. Assim, não há animações de transição de slides ao usar esses navegadores. Decidimos intencionalmente não incluir fallbacks baseados em jQuery para as transições.
A .active
classe precisa ser adicionada a um dos slides. Caso contrário, o carrossel não ficará visível.
As classes .glyphicon .glyphicon-chevron-left
e .glyphicon .glyphicon-chevron-right
não são necessariamente necessárias para os controles. Bootstrap fornece .icon-prev
e .icon-next
como alternativas simples de unicode.
Adicione legendas aos seus slides facilmente com o .carousel-caption
elemento em qualquer arquivo .item
. Coloque praticamente qualquer HTML opcional e ele será alinhado e formatado automaticamente.
Os carrosséis exigem o uso de um id
no recipiente mais externo (o .carousel
) para que os controles do carrossel funcionem corretamente. Ao adicionar vários carrosséis ou ao alterar o id
, certifique-se de atualizar os controles relevantes.
Use atributos de dados para controlar facilmente a posição do carrossel. data-slide
aceita as palavras-chave prev
ou next
, que altera a posição do slide em relação à sua posição atual. Como alternativa, use data-slide-to
para passar um índice de slide bruto para o carrossel data-slide-to="2"
, que muda a posição do slide para um índice específico começando com 0
.
O data-ride="carousel"
atributo é usado para marcar um carrossel como animado a partir do carregamento da página. Ele não pode ser usado em combinação com a inicialização JavaScript explícita (redundante e desnecessária) do mesmo carrossel.
Chame o carrossel manualmente com:
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-interval=""
.
Nome | modelo | predefinição | Descrição |
---|---|---|---|
intervalo | número | 5000 | A quantidade de tempo de atraso entre o ciclo automático de um item. Se for falso, o carrossel não fará o ciclo automaticamente. |
pausa | seqüência | nulo | "flutuar" | Se definido como "hover" , pausa o ciclo do carrossel ligado mouseenter e retoma o ciclo do carrossel ligado mouseleave . Se definido como null , passar o mouse sobre o carrossel não o pausará. |
enrolar | boleano | verdadeiro | Se o carrossel deve circular continuamente ou ter paradas bruscas. |
teclado | boleano | verdadeiro | Se o carrossel deve reagir a eventos de teclado. |
.carousel(options)
Inicializa o carrossel com opções opcionais object
e começa a percorrer os itens.
.carousel('cycle')
Percorre os itens do carrossel da esquerda para a direita.
.carousel('pause')
Interrompe o carrossel de percorrer os itens.
.carousel(number)
Alterna o carrossel para um quadro específico (baseado em 0, semelhante a uma matriz).
.carousel('prev')
Volta para o item anterior.
.carousel('next')
Alterna para o próximo item.
A classe carrossel do Bootstrap expõe dois eventos para conectar-se à funcionalidade do carrossel.
Ambos os eventos têm as seguintes propriedades adicionais:
direction
: A direção na qual o carrossel está deslizando (ou "left"
ou "right"
).relatedTarget
: o elemento DOM que está sendo posicionado como o item ativo.Todos os eventos de carrossel são disparados no próprio carrossel (ou seja, no <div class="carousel">
).
Tipo de evento | Descrição |
---|---|
slide.bs.carrossel | Esse evento é acionado imediatamente quando o slide método de instância é invocado. |
slide.bs.carrossel | Este evento é acionado quando o carrossel conclui sua transição de slides. |
O plugin afixo position: fixed;
liga e desliga, emulando o efeito encontrado com position: sticky;
. A subnavegação à direita é uma demonstração ao vivo do plug-in afixo.
Use o plug-in afixo por meio de atributos de dados ou manualmente com seu próprio JavaScript. Em ambas as situações, você deve fornecer CSS para o posicionamento e largura do seu conteúdo afixado.
Observação: não use o plug-in affix em um elemento contido em um elemento relativamente posicionado, como uma coluna puxada ou empurrada, devido a um bug de renderização do Safari .
O plugin affix alterna entre três classes, cada uma representando um estado específico: .affix
, .affix-top
, e .affix-bottom
. Você deve fornecer os estilos, com exceção de position: fixed;
on .affix
, para essas classes (independente deste plugin) para lidar com as posições reais.
Veja como o plugin afixo funciona:
.affix-top
para indicar que o elemento está em sua posição mais alta. Neste ponto, nenhum posicionamento CSS é necessário..affix
substitui .affix-top
e define position: fixed;
(fornecido pelo CSS do Bootstrap)..affix
por .affix-bottom
. Como os deslocamentos são opcionais, definir um requer que você defina o CSS apropriado. Neste caso, adicione position: absolute;
quando necessário. O plug-in usa o atributo de dados ou a opção JavaScript para determinar onde posicionar o elemento a partir daí.Siga as etapas acima para definir seu CSS para qualquer uma das opções de uso abaixo.
Para adicionar facilmente o comportamento do afixo a qualquer elemento, basta adicionar data-spy="affix"
ao elemento que você deseja espionar. Use deslocamentos para definir quando alternar a fixação de um elemento.
Chame o plug-in afixo via JavaScript:
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 um único número for fornecido, o deslocamento será aplicado nas direções superior e inferior. Para fornecer um deslocamento único, inferior e superior, apenas forneça um objeto offset: { top: 10 } ou offset: { top: 10, bottom: 5 } . Use uma função quando precisar calcular dinamicamente um deslocamento. |
alvo | seletor | nó | elemento jQuery | o window objeto |
Especifica o elemento de destino do afixo. |
.affix(options)
Ativa seu conteúdo como conteúdo afixado. Aceita opções opcionais object
.
.affix('checkPosition')
Recalcula o estado do afixo com base nas dimensões, posição e posição de rolagem dos elementos relevantes. As classes .affix
, .affix-top
e .affix-bottom
são adicionadas ou removidas do conteúdo afixado de acordo com o novo estado. Este método precisa ser chamado sempre que as dimensões do conteúdo afixado ou do elemento alvo forem alteradas, para garantir o correto posicionamento do conteúdo afixado.
O plug-in de afixo do Bootstrap expõe alguns eventos para conectar-se à funcionalidade de afixo.
Tipo de evento | Descrição |
---|---|
afixo.bs.afixo | Este evento é acionado imediatamente antes que o elemento seja afixado. |
afixado.bs.afixo | Este evento é acionado após o elemento ter sido afixado. |
afix-top.bs.afix | Este evento é acionado imediatamente antes que o elemento seja afixado no topo. |
afixado-topo.bs.afixo | Este evento é acionado após o elemento ter sido afixado no topo. |
afixo-fundo.bs.afixo | Este evento é acionado imediatamente antes que o elemento tenha sido afixado na parte inferior. |
afixado-fundo.bs.afixo | Este evento é acionado após o elemento ter sido afixado na parte inferior. |