Панель навигации Bootstrap 4
Панели навигации
Панель навигации — это заголовок навигации, который размещается в верхней части страницы:
Базовая панель навигации
В Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.
С помощью класса создается стандартная панель навигации .navbar
, за которой следует адаптивный сворачивающийся класс: .navbar-expand-xl|lg|md|sm
(панель навигации размещается вертикально на очень больших, больших, средних или маленьких экранах).
Чтобы добавить ссылки внутри панели навигации, используйте <ul>элемент с расширением class="navbar-nav". Затем добавьте <li>элементы с .nav-itemклассом, за которым следует <a>элемент с .nav-linkклассом:
Пример
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- 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>
Вертикальная панель навигации
Удалите .navbar-expand-xl|lg|md|smкласс, чтобы создать вертикальную панель навигации:
Пример
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- 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>
Навигация по центру
Добавьте .justify-content-centerкласс, чтобы центрировать панель навигации.
В следующем примере панель навигации центрируется на средних, больших и очень больших экранах. На маленьких экранах он будет отображаться вертикально и с выравниванием по левому краю (из-за класса .navbar-expand-sm):
Пример
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Цветная панель навигации
Используйте любой из классов, чтобы .bg-colorизменить цвет фона панели навигации ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondaryи ).bg-dark.bg-light
Совет: добавьте белый цвет текста ко всем ссылкам на панели навигации с помощью .navbar-darkкласса или используйте .navbar-lightкласс, чтобы добавить
черный цвет текста.
Пример
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</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="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Активное/отключенное состояние : добавьте .activeкласс к
<a>элементу, чтобы выделить текущую ссылку, или .disabledкласс, чтобы указать, что ссылка не активна.
Бренд/логотип
Класс .navbar-brandиспользуется для выделения бренда/логотипа/названия проекта вашей страницы:
Пример
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
При использовании .navbar-brandкласса для изображений Bootstrap 4 автоматически стилизует изображение, чтобы оно соответствовало навигационной панели по вертикали.
Пример
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Сворачивание панели навигации
Очень часто, особенно на маленьких экранах, вы хотите скрыть навигационные ссылки и заменить их кнопкой, которая должна открывать их при нажатии.
Чтобы создать сворачиваемую панель навигации, используйте кнопку с . Затем оберните содержимое панели навигации (ссылки и т. д.) внутри элемента div с помощью , за которым следует идентификатор, соответствующий идентификатору кнопки: « thetarget ».class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Пример
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<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>
Совет: вы также можете удалить класс .navbar-expand-md, чтобы ВСЕГДА скрывать ссылки на панели навигации и отображать кнопку переключения.
Панель навигации с раскрывающимся списком
Панели навигации также могут содержать выпадающие меню:
Пример
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- 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">
Dropdown
link
</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>
Формы и кнопки панели навигации
Добавьте <form>элемент с class="form-inline", чтобы сгруппировать входы и кнопки рядом:
Пример
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Вы также можете использовать другие классы ввода, такие как .input-group-prependили .input-group-appendдля прикрепления значка или текста справки рядом с полем ввода. Вы узнаете больше об этих классах в главе «Входные данные Bootstrap».
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Текст на панели навигации
Используйте .navbar-textкласс для вертикального выравнивания любых элементов внутри панели навигации, которые не являются ссылками (обеспечивает правильное заполнение и цвет текста).
Пример
<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>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Фиксированная панель навигации
Панель навигации также может быть закреплена вверху или внизу страницы.
Фиксированная панель навигации остается видимой в фиксированном положении (сверху или снизу) независимо от прокрутки страницы.
Класс .fixed-topфиксирует панель навигации вверху :
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Используйте .fixed-bottomкласс, чтобы панель навигации оставалась внизу страницы:
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>