Bootstrap 4 Navigation Bar - меню
Панели навигации
Панель навигации — это заголовок навигации, расположенный в верхней части страницы:
Базовая навигационная
С помощью 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
класс для центрирования панели навигации.
Следующий пример будет центрировать панель навигации на средних, больших и очень больших экранах. На маленьких экранах она будет отображаться по вертикали и по левому краю (из-за. навигации-развернуть-SM класса):
Пример
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
<a
class="navbar-brand" href="#">Logo</a>
...
</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>
Свертывание панели навигации
Очень часто, особенно на небольших экранах, вы хотите, чтобы скрыть навигационные ссылки и заменить их на кнопку, которая должна выявить их при нажатии на.
Чтобы создать складную панель навигации, используйте кнопку с class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"
. Затем оберните содержимое навигационной панели (ссылки и т.д.) внутри элемента div с 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>
Совет: Можно также удалить класс. навигации-Expand-MD, чтобы всегда скрывать ссылки панели навигации и отображать кнопку переключателя.
Навигационное меню с раскрывающимся списком
NavBars также может содержать выпадающие меню:
Пример
<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 Inputs.
Пример
<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>
Используйте .sticky-top
класс, чтобы сделать навигационную страницу фиксированной/оставаться в верхней части страницы, когда вы прокрутите ее мимо . Примечание:
Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative
).
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>