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

Bootstrap4 Tutoriales básicos

Bootstrap4 导航栏

　 　 您可以使用Bootstrap导航栏组件为您的网站或应用程序创建响应式导航标题。这些响应式导航栏最初在具有小视口的设备（如手机）上折叠，但在用户单击切换按钮时会展开。但是，在笔记本电脑或台式机等中型和大型设备上，它将像往常一样是水平的。

导航栏通常放在页面的顶部。

我们可以使用 .navbar 类来创建一个标准的导航栏，紧接着是: .navbar-expand-xl|lg|md|sm 类用于创建响应式的导航栏 (大屏幕水平展开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 <ul> 元素并添加类。 然后在 <li> 元素上添加 .nav-item 类，在 <a> 元素上使用 .nav-link 类:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-enlace" href="#">Enlace　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>简单的导航栏示例</h2>
　　<p>导航栏通常放在页面的顶部。</p>
　　<p>我们可以使用 .navbar 类来创建一个标准的导航栏，紧接着是: .navbar-expand-xl|lg|md|sm 类用于创建响应式的导航栏（大屏幕水平展开，小屏幕垂直堆叠）。</p>
</div>
</body>
</html>
Prueba aquí ‹/›

Barra de navegación vertical

Eliminando .navbar-expand-xl|lg|md|sm clases para crear una barra de navegación vertical:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-enlace" href="#">Enlace　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Barra de navegación vertical</h2>
　　<p>La barra de navegación generalmente se encuentra en la parte superior de la página.</p>
</div>
</body>
</html>
Prueba aquí ‹/›

Barra de navegación de diferentes colores

Se pueden usar las siguientes clases para crear barras de navegación de diferentes colores: .bg-primaria, .bg-éxito, .bg-información, .bg-advertencia, .bg-peligro, .bg-secundaria, .bg-oscura y .bg-ligera).

Consejo: Para los fondos oscuros, debe establecer el color del texto en tonos claros; para los fondos claros, debe establecer el color del texto en tonos oscuros.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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="contenedor">
　　<h2>Barra de navegación de diferentes colores</h2>
　　<p>Para los fondos oscuros, debe establecer el color del texto en tonos claros; para los fondos claros, debe establecer el color del texto en tonos oscuros.</p>
</div>
<nav class="navbar navbar-expand-sm bg-barra de navegación ligera-light">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barra de navegación primaria-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barra de navegación éxito-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barra de navegación información-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barra de navegación advertencia-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barra de navegación peligro-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barra de navegación secundaria-oscuro">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Activado</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Desactivado</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>
Prueba aquí ‹/›

Estados de activación y desactivación: Puede agregar la clase .active en el elemento <a> para resaltar la opción seleccionada. La clase .disabled se utiliza para establecer que el enlace no es clickeable.

Marca/Logo

.navbar-La clase brand se utiliza para resaltar la marca/Logo:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-oscuro">
　　<!--　La barra de navegación puede configurar un menú desplegable：/logo　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　
　　<!--　Enlaces　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marca/Logo</h2>
　　<p>.navbar-La clase brand se utiliza para resaltar la marca/Logo:</p>
</div>
</body>
</html>
Prueba aquí ‹/›

Si se utiliza una imagen, se puede usar .navbar-la clase brand para ajustar la barra de navegación a la imagen .

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-oscuro">
　　<!--　La barra de navegación puede configurar un menú desplegable：/logo　-->
　　<a class="navbar-brand" href="#">
　　　　<img src="https://static.oldtoolbag.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
　　</a>
　　
　　<!--　Enlaces　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marca　/　Logo</h2>
　　<p>Si se utiliza una imagen, se puede usar .navbar-la clase brand para ajustar la barra de navegación a la imagen .</p>
</div>
</body>
</html>
Prueba aquí ‹/›

Barra de navegación plegable

Por lo general, en las pantallas pequeñas, siempre usamos la barra de navegación plegable, haciendo clic para mostrar las opciones de navegación.

Para crear una barra de navegación plegable, puede agregar a los botones , data-toggle="collapse" y data-target="#"thetargetthetarget-" clase. Luego envuelve el contenido de navegación (enlaces) en el div que tiene la clase ， el id del elemento div coincide con el data

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-target" se especifica el id:-dark navbar-oscuro">
　　<a class="navbar-md bg/a>
　　brand" href="#">Navbar<-<button class="navbar-toggler" type="button" data-toggle="collapse" data
　　　　<span class="navbar-target="#collapsibleNavbar">-toggler/span>
　　</button>
　　icon"><-<div class="collapse navbar
　　　　<ul class="navbar-nav">
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　　　</li>
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　　　</li>
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　　　</li>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="contenedor">
　　<h2collapse" id="collapsibleNavbar">/h2>
　　>Colapsar la barra de navegación</p>
　　<p>Por lo general, en las pantallas pequeñas siempre colapsamos la barra de navegación, haciendo clic para mostrar las opciones de navegación.<-expand-<p>Consejo: si eliminas  .navbar/p>
</div>
</body>
</html>
Prueba aquí ‹/›

md " se oculta permanentemente el enlace de navegación y el botón de cambio se muestra siempre.<

La barra de navegación utiliza un menú desplegable

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-oscuro">
　　<!--　La barra de navegación puede configurar un menú desplegable：　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　<!--　Enlaces　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　2</a>
　　　　</li>
　　　　<!--　Marca　-->
　　　　<li class="nav-Desplegable
　　　　　　<a class="nav-item desplegable">-enlace desplegable-toggle" href="#" id="navbardrop" data
　　　　　　　　toggle="dropdown">
　　　　　　</a>
　　　　　　Enlace desplegable-<div class="dropdown
　　　　　　　　menu">-<a class="dropdown　1</a>
　　　　　　　　menu">-<a class="dropdown　2</a>
　　　　　　　　menu">-<a class="dropdown　3</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<br>
　　
<div class="contenedor">
　　<h2item" href="#">Enlace/h2>
　　>La barra de navegación utiliza un menú desplegable</p>
</div>
</body>
</html>
Prueba aquí ‹/›

<p>En la barra de navegación se puede configurar un menú desplegable.<

Formulario de la barra de navegación y el botón

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-oscuro">
　　<form class="form-inline">
　　　　Formulario de la barra de navegación <elemento form> utiliza la clase para alinear la caja de entrada y el botón：-<input class="form
　　　　control" type="text" placeholder="Buscar">-<button class="btn btn/button>
　　</formulario>
</nav>
<br>
<div class="contenedor">
　　<h2>Formulario de la barra de navegación</h2>
　　<p>El elemento de formulario de la barra de navegación utiliza class="form-inline" para alinear la caja de entrada y el botón：</p>
</div>
</body>
</html>
Prueba aquí ‹/›

También puedes usar otras clases de cajas de entrada, como .input-grupo-addon" se utiliza para agregar una etiqueta pequeña antes de la caja de entrada.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-oscuro">
　　<form class="form-inline">
　　　　<div class="input-group">
　　　　　　<span class="input-grupo-<input type="text" class="formulario/span>
　　　　　　control" placeholder="Nombre de usuario">-<input type="text" class="formulario
　　　　</div>　　　　
　　</formulario>
</nav>
<br>
<div class="contenedor">
　　<h2>Formulario de navegación</h2>
　　<p>　.input-grupo-addon se utiliza para agregar una etiqueta pequeña delante de un cuadro de entrada.</p>
</div>
</body>
</html>
Prueba aquí ‹/›

Texto de barra de navegación

Usar .navbar-La clase text se utiliza para establecer el texto no enlazado en la barra de navegación, asegurando alineación horizontal, color y margen interno iguales.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-oscuro">
　　<!--　Enlaces　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace　2</a>
　　　　</li>
　　</ul>
　　<!--　Texto de barra-->
　　<span class="navbar-text">
　　　　Texto de barra
　　</span>
</nav>
<br>
<div class="contenedor">
　　<h2>Texto de barra de navegación</h2>
　　<p>Usar .navbar-La clase text se utiliza para establecer el texto no enlazado en la barra de navegación, asegurando alineación horizontal, color y margen interno iguales.</p>
</div>
</body>
</html>
Prueba aquí ‹/›

Barra de navegación fija

La barra de navegación puede fijarse en la parte superior o inferior.

Usamos .fija-Para lograr la fijación de la barra de navegación utilizando la clase top:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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-enlace" href="#">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-enlace" href="#">Enlace</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluido" estilo="margen-top:80px">
　　<h2>Barra de navegación fija</h2>
　　<p>La barra de navegación se puede fijar en la cabeza o en la parte inferior.</p>
　　<h1>Ver el efecto al desplazar la página.</h1>
</div>
</body>
</html>
Prueba aquí ‹/›

.fija-La clase bottom se utiliza para fijar la barra de navegación en la parte inferior:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap ejemplo</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ancho=device-ancho, 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)">Enlace</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Enlace</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Barra de navegación fija en la parte inferior</h2>
　　<p>La barra de navegación se puede fijar en la cabeza o en la parte inferior.</p>
　　<h1>Ver el efecto al desplazar la página.</h1>
</div>
</body>
</html>
Prueba aquí ‹/›
Bootstrap4 Navegación de panBootstrap4 Navegación