Bootstrap4 Tutoriais Básicos

Bootstrap4 Barra de Navegação Bootstrap4 Collapsar

Bootstrap4 Navegação

Bootstrap oferece uma maneira fácil e rápida de criar componentes básicos de navegação, como etiquetas e pastilhas, que são muito flexíveis e bonitas. Todos os componentes de navegação do Bootstrap (abas e pastilhas) compartilham a mesma marcação básica e estilos através da classe .nav.

Se você quiser criar uma barra de navegação horizontal simples, você pode adicionar Classe '.nav', adicione .nav em cada opção <li>-Classe 'item', adicione .nav em cada link-Classe 'link':

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegação</h2>
　　<p>Navegação horizontal simples:</p>
　　<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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Modo de alinhamento da navegação

.justify-content-Classe 'center' para exibição centralizada da navegação, .justify-content-Configuração de classe 'end' para alinhamento à direita da navegação.

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegação</h2>
　　<p>Alinhamento à esquerda da navegação (padrão):</p>
　　<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="#">Desativado</a>
　　　　</li>
　　</ul>
　　
　　<p class="text-center">Navegação centralizada:</p>
　　<ul class="nav justify-content-center">
　　　　<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="#">Desativado</a>
　　　　</li>
　　</ul>
　　　　
　　<p class="text-right">Navegação alinhada à direita:</p>
　　<ul class="nav justify-content-end">
　　　　<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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Navegação vertical

.flex-A classe column é usada para criar navegação vertical:

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegação vertical</h2>
　　<p>.flex-A classe column é usada para criar navegação vertical:</p>
　　<ul class="nav flex-column">
　　　　<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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Abas

Use .nav-a classe tabs pode transformar a navegação em abas. Em seguida, para marcar a opção selecionada, use a classe .active.

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Abas</h2>
　　<p>Navegação de abas:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Ativo</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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Navegação de cápsulas

.nav-a classe pills pode configurar as opções de navegação na forma de cápsulas.

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Cápsulas</h2>
　　<p>Navegação de cápsulas:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Ativo</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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Navegação alinhada

.nav-a classe justified pode configurar a exibição alinhada das opções de navegação.

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navegação alinhada</h2>
　　<p>.nav-a classe justified pode configurar a exibição alinhada das opções de navegação.</p>
　　<ul class="nav nav-pills nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Ativo</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="#">Desativado</a>
　　　　</li>
　　</ul><br>
　　<p>Abas justificadas:</p>
　　<ul class="nav nav-tabs nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Ativo</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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Bandeja de navegação suspenso

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Bandeja de navegação com menu suspenso</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Ativo</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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

Menu suspenso de abas

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Menu suspenso de abas</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Ativo</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="#">Desativado</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Teste Veja ‹/›

abas dinâmicas

Se você desejar que as abas sejam alternáveis dinamicamente, você pode adicionar data-propriedade toggle="tab". Em seguida, adicione .tab no conteúdo correspondente de cada opção-classe pane.

Se você desejar efeitos de transição suaves, você pode adicionar .tab-adicionar após pane 　 .fade classe:

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Alternar abas</h2>
　　<br>
　　<!--　Nav tabs　-->
　　<ul class="nav nav-tabs" role="tablist">
　　　　<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 id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Abas dinâmicas em cápsula

Para criar abas dinâmicas em cápsula, basta modificar o código do exemplo acima para usar data-toggle O atributo definido como data-toggle="pill":

Exemplo

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Opções de abas em cápsulas</h2>
　　<br>
　　<!--　Nav pills　-->
　　<ul class="nav nav-pills" role="tablist">
　　　　<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 id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Teste Veja ‹/›

Bootstrap4 Barra de Navegação Bootstrap4 Collapsar