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

Основной курс Bootstrap4

Бар навигации Bootstrap4

　 　 Вы можете использовать компонент навигационной панели Bootstrap для создания адаптивных навигационных заголовков для вашего веб-сайта или приложения. Эти адаптивные навигационные панели сначала складываются на устройствах с малым размером экрана (например, на телефонах), но раскладываются при нажатии на переключатель. Однако, на устройствах среднего и большого размера, таких как ноутбуки или стационарные компьютеры, они будут как обычно горизонтальными.

Навигационная панель обычно находится в верхней части страницы.

Мы можем использовать класс .navbar для создания стандартной навигационной панели, за которой следует класс .navbar-expand-xl|lg|md|sm для создания адаптивной навигационной панели (Распространение по горизонтали на больших экранах,堆积 по вертикали на маленьких экранах).

Элементы навигационной панели можно использовать с элементом <ul> и добавить класс. Затем добавьте класс .nav-item на элемент <li>, и класс .nav-link на элемент <a>:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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="#">Ссылка　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>
Проверьте, пожалуйста,‹/›

Вертикальная навигационная панель

Для создания вертикальной навигационной панели удалите класс .navbar-expand-xl|lg|md|sm:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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="#">Ссылка　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Вертикальная навигационная панель</h2>
　　<p>Навигационная панель обычно находится в верхней части страницы.</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Навигационная панель различных цветов

Можно использовать следующие классы для создания навигационной панели различных цветов: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark и .bg-light).

Подсказка: Для темного фона необходимо устанавливать цвет текста в светлом цвете, для светлого фона - в темном цвете.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>Навигационные панели разных цветов</h2>
　　<p>Для темного фона необходимо устанавливать цвет текста в светлом цвете, для светлого фона - в темном цвете.</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Активен</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключен</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>
Проверьте, пожалуйста,‹/›

Активный и отключенный состояния: Можно добавить класс .active к элементу <a> для выделения выбранного элемента. Класс .disabled используется для настройки ссылки как неудаиваемой.

Бренд/Logo

Класс .navbar-brand используется для выделения бренда/Logo:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<!-- Brand/logo -->
　　<a class="navbar-brand" href="#">Логотип</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="#">Ссылка　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Бренд/Logo</h2>
　　<p>Класс .navbar-brand используется для выделения бренда/Logo:</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Если используется изображение, можно использовать класс .navbar-brand для настройки адаптивного изображения в навигационной панели.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<!-- 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="#">Ссылка　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Бренд　/　Логотип</h2>
　　<p>Если используется изображение, можно использовать класс .navbar-brand для настройки адаптивности изображения в навигационной панели.</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Сворачиваемая навигационная панель

Обычно, на маленьких экранах мы сворачиваем навигационную панель и нажимаем, чтобы показать опции навигации.

Чтобы создать сворачиваемую навигационную панель, можно добавить на кнопку: data-toggle="collapse" и data-target="#thetargetКласс. Затем包裹 навигационный контент (ссылки) в div с классом, а id div-элемента соответствует указанному id в data-target кнопки:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<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="#">Ссылка</a>
　　　　　　</li>
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　　　</li>
　　　　　　<li class="nav-item">
　　　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　　　</li>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="container">
　　<h2>Сворачиваемая навигационная панель</h2>
　　<p>Обычно, на маленьких экранах мы сворачиваем навигационную панель и нажимаем, чтобы показать опции навигации.</p>
　　<p>Подсказка: если удалить класс .navbar-expand-md, навигационные ссылки будут постоянно скрыты, а переключатель будет постоянно отображаться.</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Навигационная панель использует выпадающие меню

В навигационной панели можно настроить выпадающее меню:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<!--　Brand　-->
　　<a class="navbar-brand" href="#">Логотип</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">
　　　　　　　　Ссылка выпадающего списка
　　　　　　</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>Использование выпадающего меню в навигационной панели</h2>
　　<p>На навигационной панели можно установить выпадающее меню.</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Форма навигационной панели и кнопки

Элемент формы form навигационной панели использует класс для排版 полей ввода и кнопок:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<form　class="form-inline">
　　　　<input　class="form-control"　type="text"　placeholder="Search">
　　　　<button　class="btn　btn-success"　type="button">Search</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Форма навигационной панели</h2>
　　<p>Элемент формы form навигационной панели использует класс form-inline для排版 полей ввода и кнопок:</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Вы также можете использовать другие классы полей ввода, такие как .input-group-addon, которые используются для добавления малых этикеток перед полем ввода.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<form　class="form-inline">
　　　　<div　class="input-group">
　　　　　　<span　class="input-group-addon">@</span>
　　　　　　<input　type="text"　class="form-control"　placeholder="Username">
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Форма навигации</h2>
　　<p>Класс .input-group-addon используется для добавления малых этикеток перед полем ввода.</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Текст навигационной панели

Использование класса .navbar-text для установки текста, не являющегося ссылкой, на навигационной панели, гарантирует горизонтальное выравнивание и одинаковый цвет с отступами.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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-dark">
　　<!--　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>
　　<!-- Текст навигационной панели -->
　　<span class="navbar-text">
　　　　Текст навигационной панели
　　</span>
</nav>
<br>
<div class="container">
　　<h2>Текст навигационной панели</h2>
　　<p>Использование класса .navbar-text для установки текста в навигационной панели, гарантирует горизонтальное выравнивание, цвет и отступы одинаковые.</p>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Фиксированная навигационная панель

Навигационная панель может быть зафиксирована в голове или в нижней части.

Мы используем класс .fixed-top для реализации фиксированной навигационной панели:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a class="navbar-brand" href="#">Логотип</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#">Ссылка</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
　　<h2>Фиксированная навигационная панель</h2>
　　<p>Навигационная панель может быть закреплена в верхнем или нижнем углу.</p>
　　<h1>Прокрутите страницу, чтобы увидеть эффект.</h1>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

.fixed-bottom класс используется для установки навигационной панели в нижней части:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
　　<a class="navbar-brand" href="#">Логотип</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Ссылка</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Ссылка</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Нижняя закрепленная навигационная панель</h2>
　　<p>Навигационная панель может быть закреплена в верхнем или нижнем углу.</p>
　　<h1>Прокрутите страницу, чтобы увидеть эффект.</h1>
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›
Навигация по breadcrumbs Bootstrap4Навигация Bootstrap4