Navegadores
Documentação e exemplos de como usar os componentes de navegação incluídos no Bootstrap.
Navegação básica
A navegação disponível no Bootstrap compartilha marcações e estilos gerais, desde a .nav
classe base até os estados ativo e desabilitado. Troque as classes modificadoras para alternar entre cada estilo.
O .nav
componente base é construído com flexbox e fornece uma base sólida para construir todos os tipos de componentes de navegação. Ele inclui algumas substituições de estilo (para trabalhar com listas), algum preenchimento de link para áreas de ocorrência maiores e estilo básico desabilitado.
O .nav
componente base não inclui nenhum .active
estado. Os exemplos a seguir incluem a classe, principalmente para demonstrar que essa classe em particular não aciona nenhum estilo especial.
As classes são usadas por toda parte, então sua marcação pode ser super flexível. Use <ul>
s como acima, <ol>
se a ordem de seus itens for importante, ou role seu próprio com um <nav>
elemento. Como .nav
usa display: flex
, os links de navegação se comportam da mesma forma que os itens de navegação, mas sem a marcação extra.
Estilos disponíveis
Altere o estilo do .nav
componente s com modificadores e utilitários. Misture e combine conforme necessário, ou construa o seu próprio.
Alinhamento horizontal
Altere o alinhamento horizontal de sua navegação com utilitários flexbox . Por padrão, os navs são alinhados à esquerda, mas você pode alterá-los facilmente para o centro ou alinhamento à direita.
Centralizado com .justify-content-center
:
Alinhado à direita com .justify-content-end
:
Vertical
Empilhe sua navegação alterando a direção do item flexível com o .flex-column
utilitário. Precisa empilhá-los em algumas viewports, mas não em outras? Use as versões responsivas (por exemplo, .flex-sm-column
).
Como sempre, a navegação vertical <ul>
também é possível sem s.
Abas
Pega a navegação básica de cima e adiciona a .nav-tabs
classe para gerar uma interface com guias. Use-os para criar regiões tabable com nosso plug-in JavaScript de guia .
Comprimidos
Pegue o mesmo HTML, mas use .nav-pills
:
Preencha e justifique
Force o .nav
conteúdo do seu 's para estender a largura total disponível de uma das duas classes modificadoras. Para preencher proporcionalmente todo o espaço disponível com seus .nav-item
s, use .nav-fill
. Observe que todo o espaço horizontal está ocupado, mas nem todos os itens de navegação têm a mesma largura.
Ao usar uma <nav>
navegação baseada, certifique-se de incluir .nav-item
nas âncoras.
Para elementos de largura igual, use .nav-justified
. Todo o espaço horizontal será ocupado por links de navegação, mas ao contrário do .nav-fill
acima, todos os itens de navegação terão a mesma largura.
Semelhante ao .nav-fill
exemplo usando uma <nav>
navegação baseada em -, certifique-se de incluir .nav-item
nas âncoras.
Trabalhando com utilitários flexíveis
Se você precisar de variações de navegação responsivas, considere usar uma série de utilitários flexbox . Embora mais detalhados, esses utilitários oferecem maior personalização em pontos de interrupção responsivos. No exemplo abaixo, nosso nav será empilhado no ponto de interrupção mais baixo e, em seguida, se adaptará a um layout horizontal que preencha a largura disponível a partir do ponto de interrupção pequeno.
Em relação à acessibilidade
Se você estiver usando navs para fornecer uma barra de navegação, certifique-se de adicionar um role="navigation"
ao contêiner pai mais lógico do <ul>
, ou envolver um <nav>
elemento em toda a navegação. Não adicione a função à <ul>
própria, pois isso impediria que ela fosse anunciada como uma lista real por tecnologias assistivas.
Observe que as barras de navegação, mesmo se visualmente estilizadas como guias com a .nav-tabs
classe, não devem receber atributos ou . Eles são apropriados apenas para interfaces dinâmicas com guias, conforme descrito nas Práticas de autoria WAI ARIA . Consulte o comportamento do JavaScript para interfaces com guias dinâmicas nesta seção para obter um exemplo.role="tablist"
role="tab"
role="tabpanel"
Usando listas suspensas
Adicione menus suspensos com um pouco de HTML extra e o plug-in JavaScript suspenso .
Abas com menus suspensos
Comprimidos com dropdowns
Comportamento JavaScript
Use o plug-in JavaScript da guia - inclua-o individualmente ou por meio do bootstrap.js
arquivo compilado - para estender nossas guias e pílulas de navegação para criar painéis com guias de conteúdo local, mesmo por meio de menus suspensos.
Se você estiver construindo nosso JavaScript a partir da fonte, ele requerutil.js
.
As interfaces dinâmicas com guias, conforme descrito nas Práticas de autoria WAI ARIA , exigem role="tablist"
, role="tab"
, role="tabpanel"
e aria-
atributos adicionais para transmitir sua estrutura, funcionalidade e estado atual aos usuários de tecnologias assistivas (como leitores de tela).
Observe que as interfaces dinâmicas com guias não devem conter menus suspensos, pois isso causa problemas de usabilidade e acessibilidade. De uma perspectiva de usabilidade, o fato de que o elemento de gatilho da guia exibida no momento não é imediatamente visível (como está dentro do menu suspenso fechado) pode causar confusão. Do ponto de vista da acessibilidade, atualmente não há uma maneira sensata de mapear esse tipo de construção para um padrão WAI ARIA, o que significa que não pode ser facilmente compreendido por usuários de tecnologias assistivas.
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.
Para ajudar a atender às suas necessidades, isso funciona com <ul>
marcação baseada, conforme mostrado acima, ou com qualquer marcação arbitrária do tipo “role sua própria”. Observe que, se você estiver usando <nav>
, não deverá adicionar role="tablist"
diretamente a ele, pois isso substituiria a função nativa do elemento como um ponto de referência de navegação. Em vez disso, mude para um elemento alternativo (no exemplo abaixo, um simples <div>
) e envolva <nav>
-o.
O plugin de abas também funciona com pílulas.
Consequat occaecat ullamco amet não eiusmod nostrud dolore irure incididunt est duis anim sunt oficia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit comodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
E com pílulas verticais.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat comodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
Usando atributos de dados
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. Use esses atributos de dados em .nav-tabs
ou .nav-pills
.
Por JavaScript
Habilite as guias com guias via JavaScript (cada guia precisa ser ativada individualmente):
Você pode ativar guias individuais de várias maneiras:
Efeito de desvanecimento
Para fazer as guias aparecerem gradualmente, adicione .fade
a cada .tab-pane
. O primeiro painel de guias também deve .show
tornar visível o conteúdo inicial.
Métodos
Métodos e transições assíncronas
Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .
Consulte nossa documentação JavaScript para obter mais informações .
$().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.
.tab('mostrar')
Seleciona a guia fornecida e mostra seu painel associado. Qualquer outra guia selecionada anteriormente torna-se desmarcada e seu painel 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).
.tab('descartar')
Destrói a aba de um elemento.
Eventos
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 dohide.bs.tab
evento)shown.bs.tab
(na guia recém-ativada recém-exibida, a mesma doshow.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. |