English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutorial Básico

Bootstrap4 Navigation bar

　 　 You can use the Bootstrap navigation bar component to create responsive navigation headers for your website or application. These responsive navigation bars are initially folded on devices with small viewports (such as mobile phones), but they expand when the user clicks the toggle button. However, on medium and large devices such as laptops or desktops, it will be horizontal as usual.

The navigation bar is generally placed at the top of the page.

We can use the .navbar class to create a standard navigation bar, followed by: .navbar-expand-xl|lg|md|sm classes to create responsive navigation bars (horizontally spread on large screens, vertically stacked on small screens).

The options on the navigation bar can be used with the <ul> element and add classes. Then add .nav to the <li> element.-item class, use .nav on the <a> element.-link class:

<!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>
<nav class="navbar navbar-expand-sm bg-light">
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Simple navigation bar example</h2>
　　<p>The navigation bar is generally placed at the top of the page.</p>
　　<p>We can use the .navbar class to create a standard navigation bar, followed by: .navbar<-expand-xl|lg|md|sm classes to create responsive navigation bars (horizontally spread on large screens, vertically stacked on small screens).</p>
</div>
</body>
</html>
Teste Veja ‹/›

Barra de navegação vertical

Ao remover .navbar-expand-xl|lg|md|sm classes para criar a barra de navegação vertical:

<!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>
<nav class="navbar bg-light">
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Barra de navegação vertical</h2>
　　<p>A barra de navegação geralmente está na parte superior da página.</p>
</div>
</body>
</html>
Teste Veja ‹/›

Barra de navegação de diferentes cores

Você pode usar as seguintes classes para criar barras de navegação de diferentes cores: .bg-primária, .bg-de sucesso, .bg-de informação, .bg-de aviso, .bg-perigosa, .bg-secundária, .bg-escura e .bg-clara).

Aviso: Para背影 escuro, é necessário definir a cor do texto como clara; para背影 clara, é necessário definir a cor do texto como escura.

<!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>Barra de navegação de diferentes cores</h2>
　　<p>Para背影 escuro, é necessário definir a cor do texto como clara; para背影 clara, é necessário definir a cor do texto como escura.</p>
</div>
<nav class="navbar navbar-expand-sm bg-navbar clara-light">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-navbar primária-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-navbar de sucesso-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-navbar de informação-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-navbar de aviso-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-navbar perigosa-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-navbar secundária-escuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
</body>
</html>
Teste Veja ‹/›

Estados ativo e desativado: Você pode adicionar a classe .active ao elemento <a> para realçar a opção selecionada. A classe .disabled é usada para definir o link como não clicável.

Marca/Logo

.navbar-Classe "brand" para realçar a marca/Logo:

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<!--　Brand/logo　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marca/Logo</h2>
　　<p>.navbar-Classe "brand" para realçar a marca/Logo:</p>
</div>
</body>
</html>
Teste Veja ‹/›

Se usar imagem, você pode usar .navbar-Classe "brand" para configurar a navegação collapses adaptativa de imagem.

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<!--　Brand/logo　-->
　　<a class="navbar-brand" href="#">
　　　　<img src="https://static.oldtoolbag.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
　　</a>
　　
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marca　/　Logo</h2>
　　<p>Se usar imagem, você pode usar .navbar-Classe "brand" para configurar a navegação collapses adaptativa de imagem.</p>
</div>
</body>
</html>
Teste Veja ‹/›

Barra de navegação collapses

Normalmente, na tela pequena, tendemos a dobrar a barra de navegação, clicando para exibir as opções de navegação.

Para criar uma barra de navegação collapses, você pode adicionar ao botão , data-toggle="collapse" e data-target="#thetarget" classes. Em seguida, envolva o conteúdo de navegação (links) no div com a classe .-O id especificado pelo atributo target:

<!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>
<nav class="navbar navbar-expand-md bg-dark navbar-escuro">
　　<a class="navbar-brand" href="#">Navbar</a>
　　<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
　　　　<span class="navbar-toggler-icon"></span>
　　</button>
　　<div class="collapse navbar-collapse" id="collapsibleNavbar">
　　　　<ul class="navbar-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>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="container">
　　<h2>Dobrar a barra de navegação</h2>
　　<p>Normalmente, na tela pequena, tendemos a dobrar a barra de navegação, clicando para exibir as opções de navegação.</p>
　　<p>Notificação: Se você deletar  .navbar-expand-md" a navegação de links será sempre oculta e o botão de troca será sempre visível.</p>
</div>
</body>
</html>
Teste Veja ‹/›

A barra de navegação usa menus suspenso

Pode configurar menus suspenso na barra de navegação：

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<!--　Brand　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　2</a>
　　　　</li>
　　　　<!--　Dropdown　-->
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
　　　　　　　　Link do 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>
　　</ul>
</nav>
<br>
　　
<div class="container">
　　<h2>A barra de navegação usa menus suspenso</h2>
　　<p>Pode configurar menus suspenso na barra de navegação.</p>
</div>
</body>
</html>
Teste Veja ‹/›

Barra de navegação e botão

Os elementos de formulário da barra de navegação <form> usam classes para alinhar a caixa de entrada e o botão：

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<form class="form-inline">
　　　　<input class="form-control" type="text" placeholder="Pesquisar">
　　　　<button class="btn btn-success" type="button">Pesquisar</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Formulário da barra de navegação</h2>
　　<p>Os elementos de formulário da barra de navegação usam class="form-inline" para alinhar a caixa de entrada e o botão：</p>
</div>
</body>
</html>
Teste Veja ‹/›

Você também pode usar outras classes de caixa de entrada, como .input-grupo-addon" usado para adicionar pequenos rótulos ao campo de entrada.

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<form class="form-inline">
　　　　<div class="input-group">
　　　　　　Teste Veja ‹/›

Texto da barra de navegação

Usar .navbar-A classe text é usada para definir o texto não vinculado na barra de navegação, garantindo alinhamento horizontal, cor e margem interna idênticas.

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-escuro">
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Link　2</a>
　　　　</li>
　　</ul>
　　<!--　Texto da navbar-->
　　<span class="navbar-text">
　　　　Texto da navbar
　　</span>
</nav>
<br>
<div class="container">
　　<h2>Texto da barra de navegação</h2>
　　<p>Usar .navbar-A classe text é usada para definir o texto não vinculado na barra de navegação, garantindo alinhamento horizontal, cor e margem interna idênticas.</p>
</div>
</body>
</html>
Teste Veja ‹/›

Barra de navegação fixa

A barra de navegação pode ser fixada na cabeça ou no fundo.

Usamos .fixada-A classe top é usada para fixar a barra de navegação no topo:

<!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 estilo="altura:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-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>
　　</ul>
</nav>
<div class="container-líquida" estilo="margem-top:80px">
　　<h2>Barra de navegação fixa</h2>
　　<p>A barra de navegação pode ser fixada no cabeçalho ou no rodapé.</p>
　　<h1>Verifique o efeito de rolagem da página.</h1>
</div>
</body>
</html>
Teste Veja ‹/›

.fixada-A classe bottom é usada para fixar a barra de navegação no fundo:

<!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 estilo="altura:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Link</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Barra de navegação fixa no rodapé</h2>
　　<p>A barra de navegação pode ser fixada no cabeçalho ou no rodapé.</p>
　　<h1>Verifique o efeito de rolagem da página.</h1>
</div>
</body>
</html>
Teste Veja ‹/›
Bootstrap4 Navegação de Pão de FormaBootstrap4 Navegação