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

Навигационные панели Bootstrap4 Сворачивание Bootstrap4

Навигация Bootstrap4

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

Если вы хотите создать простую горизонтальную навигационную панель, вы можете добавить .класс nav добавляется к каждому <li> элементу, .класс nav-item добавляется к каждому ссылку:

Пример

<!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>
　　<ul　class="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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключено</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Способы выравнивания навигации

.justify-content-center класс устанавливает центральное выравнивание навигации, .justify-content-end класс устанавливает правое выравнивание навигации.

Пример

<!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>
　　<ul　class="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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключено</a>
　　　　</li>
　　</ul>
　　
　　<p　class="text-center">Навигация с центральным выравниванием:</p>
　　<ul　class="nav　justify-content-center">
　　　　<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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключено</a>
　　　　</li>
　　</ul>
　　　　
　　<p　class="text-right">Навигация с правым выравниванием:</p>
　　<ul　class="nav　justify-content-end">
　　　　<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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключено</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

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

.flex-column класс используется для создания вертикальной навигации：

Пример

<!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>Класс .flex-column используется для создания вертикальной навигации：</p>
　　<ul　class="nav　flex-column">
　　　　<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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Отключено</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Вкладки

Использование класса .nav-tabs можно преобразовать навигацию в вкладки. Затем для выбранной вкладки использовать класс .active для маркировки.

Пример

<!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>
　　<ul　class="nav　nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Капсульная навигация

.nav-pills класс может установить форму элементов навигации в виде капсул.

Пример

<!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>
　　<ul　class="nav　nav-pills">
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Уравненная навигация

.nav-justified класс может настроить отображение элементов навигации в равной ширине.

Пример

<!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>Класс .nav-justified может настроить отображение элементов навигации в равной ширине.</p>
　　<ul　class="nav　nav-pills　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link　active"　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><br>
　　<p>Уравненные вкладки:</p>
　　<ul　class="nav　nav-tabs　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link　active"　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>
</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>
<div class="container">
　　<h2>Развертывающийся список капсул с навигацией</h2>
　　<ul　class="nav　nav-pills">
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link　active"　href="#">Активный</a>
　　　　</li>
　　　　<li　class="nav-item　dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Развернуть</a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　　　　　<a class="dropdown-item" href="#">Ссылка 3</a></div>
　　　　</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>
</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>
<div class="container">
　　<h2>Развертывающийся список вкладок</h2>
　　<ul　class="nav　nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a　class="nav-link　active"　href="#">Активный</a>
　　　　</li>
　　　　<li　class="nav-item　dropdown">
　　　　　　<a　class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Развернуть</a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#">Ссылка 1</a>
　　　　　　　　<a class="dropdown-item" href="#">Ссылка 2</a>
　　　　　　　　<a class="dropdown-item" href="#">Ссылка 3</a></div>
　　　　</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>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Динамические вкладки

Если вы хотите сделать вкладки динамически переключаемыми, добавьте атрибут data-toggle="tab" к каждому из ссылок. Затем добавьте класс .tab-pane к каждому соответствующему содержимому вкладки.

Если вы хотите использовать эффект плавного исчезновения, добавьте .tab-pane после .tab-pane 　 .fade класс:

Пример

<!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>
　　<br>
　　<!-- Nav tabs -->
　　<ul class="nav nav-tabs" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab" href="#home">Дом</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu1">Меню 1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu2">Меню 2</a>
　　　　</li>
　　</ul>
　　<!-- Tab panes -->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2>HOME</h2>
　　　　　　<p>Лорем 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>Меню 1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Меню 2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Капсульные динамические вкладки

Капсульные динамические вкладки требуют только изменить данные в следующем примере кода data-toggle Свойство установлено как data-toggle="pill":

Пример

<!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>
　　<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>
　　　　　　<h2>HOME</h2>
　　　　　　<p>Лорем 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>Меню 1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Меню 2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите <‹/›>

Навигационные панели Bootstrap4 Сворачивание Bootstrap4