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.
.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.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
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.
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
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
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Alinhado à direita com .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
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
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Como sempre, a navegação vertical <ul>
também é possível sem s.
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
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 .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Comprimidos
Pegue o mesmo HTML, mas use .nav-pills
:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
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.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Ao usar uma <nav>
navegação baseada, você pode omitir com segurança .nav-item
, pois .nav-link
é necessário apenas para <a>
elementos de estilo.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
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.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Semelhante ao .nav-fill
exemplo usando uma <nav>
navegação baseada.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
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.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
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 . Elas são apropriadas apenas para interfaces dinâmicas com guias, conforme descrito no padrão de guias do ARIA Authoring Practices Guide . 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
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Comprimidos com dropdowns
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
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.
Se você estiver construindo nosso JavaScript a partir da fonte, ele requerutil.js
.
As interfaces dinâmicas com guias, conforme descrito no padrão de guias ARIA Authoring Practices Guide , 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). Como prática recomendada, recomendamos o uso <button>
de elementos para as guias, pois são controles que acionam uma alteração dinâmica, em vez de links que navegam para uma nova página ou local.
Conteúdo de espaço reservado para o painel de guias. Este está relacionado à guia inicial. Leva você milhas de altura, tão alto, porque ela tem aquele sorriso internacional. Há um estranho na minha cama, há um latejar na minha cabeça. Oh não. Em outra vida eu faria você ficar. Porque eu, eu sou capaz de qualquer coisa. Preparando-se para minha batalha de coroação. Costumava roubar a bebida dos seus pais e subir no telhado. Tom, bronzeado e pronto, aumente porque está ficando pesado. Seu amor é como uma droga. Acho que esqueci que tinha escolha.
Conteúdo de espaço reservado para o painel de guias. Este está relacionado à guia de perfil. Você tem a melhor arquitetura. Carimbos de passaporte, ela é cosmopolita. Bem, fresco, feroz, nós o fechamos. Nunca planejei que um dia eu estaria perdendo você. Ela come seu coração. Seu beijo é cósmico, cada movimento é mágico. Quero dizer, aqueles, quero dizer, como se ela fosse a única. Saudações entes queridos, vamos fazer uma viagem. Basta possuir a noite como o 4 de julho! Mas você prefere ficar bêbado.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
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.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
O plugin de abas também funciona com pílulas.
Conteúdo de espaço reservado para o painel de guias. Este está relacionado à guia inicial. Leva você milhas de altura, tão alto, porque ela tem aquele sorriso internacional. Há um estranho na minha cama, há um latejar na minha cabeça. Oh não. Em outra vida eu faria você ficar. Porque eu, eu sou capaz de qualquer coisa. Preparando-se para minha batalha de coroação. Costumava roubar a bebida dos seus pais e subir no telhado. Tom, bronzeado e pronto, aumente porque está ficando pesado. Seu amor é como uma droga. Acho que esqueci que tinha escolha.
Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
E com pílulas verticais.
Conteúdo de espaço reservado para o painel de guias. Este está relacionado à guia inicial. Vi você no centro cantando Blues. Assista você circular o ralo. Por que você não me deixa parar? Pesada é a cabeça que usa a coroa. Sim, fazemos os anjos chorarem, chovendo sobre a terra lá de cima. Quero ver o show em 3D, um filme. Você já se sentiu, se sentiu tão fino como papel. É um sim ou não, talvez não.
Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
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
.
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Por JavaScript
Habilite as guias com guias via JavaScript (cada guia precisa ser ativada individualmente):
$('#myTab button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Você pode ativar guias individuais de várias maneiras:
$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab
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.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
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, se estiver usando um link, um href
atributo direcionado a um nó de contêiner no DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
$(function () {
$('#myTab li:last-child button').tab('show')
})
</script>
.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).
$('#someTab').tab('show')
.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. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})