Bootstrap 4 Navs
Menus de navegação
Se você deseja criar um menu horizontal simples, adicione a
.navclasse a um <ul>elemento, seguido de .nav-item
para cada <li>e adicione a .nav-linkclasse aos seus links:
Exemplo
<ul class="nav">
<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" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Navegação Alinhada
Adicione a .justify-content-centerclasse para centralizar a navegação e a .justify-content-endclasse para alinhar a navegação à direita.
Exemplo
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Navegação vertical
Adicione a .flex-columnclasse para criar uma navegação vertical:
Exemplo
<ul class="nav
flex-column">
Abas
Transforme o menu de navegação em guias de navegação com a .nav-tabsclasse. Adicione a .activeturma ao link ativo/atual. Se você quiser que as guias sejam alternáveis, veja o último exemplo nesta página.
Exemplo
<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" href="#">Disabled</a>
</li>
</ul>
Comprimidos
Transforme o menu de navegação em pílulas de navegação com a .nav-pillsclasse. Se você quiser que as pílulas sejam alternáveis, veja o último exemplo nesta página.
Exemplo
<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" href="#">Disabled</a>
</li>
</ul>
Abas/pílulas justificadas
Justifique as abas/pílulas com a .nav-justifiedclasse (largura igual):
Exemplo
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Comprimidos com dropdown
Exemplo
<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="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Abas com menu suspenso
Exemplo
<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="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Abas alternáveis/dinâmicas
CASA
A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
Para tornar as guias alternáveis, adicione o data-toggle="tab"atributo a cada link. Em seguida, adicione uma .tab-paneclasse com um ID exclusivo para cada guia e envolva-as em um
<div>elemento com class .tab-content.
Se você quiser que as guias apareçam e desapareçam ao clicar nelas, adicione a
.fadeclasse a .tab-pane:
Exemplo
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Comprimidos alternáveis / dinâmicos
CASA
A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
O mesmo código se aplica aos comprimidos; altere apenas o atributo data-toggle para data-toggle="pill":
Exemplo
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Referência completa do Bootstrap 4 Nav
Para uma referência completa de todas as opções de guias, métodos e eventos, acesse nosso Bootstrap 4 JS Tab Reference .