Навігаційна панель в Bootstrap 4

Панель навігації Bootstrap 4 — це проста оболонка для розміщення брендингу, навігації та інших елементів у навігаційному заголовку.

Базова панель

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav>

Ось пояснення:

• помістіть все всередину елемента <nav> з класами .navbar та .navbar-expand{-sm|-md|-lg|-xl} разом із колірною схемою ;
• для переключення меню на невеликих пристроях використовуйте елемент <button> з класом .navbar-toggler; щоб відобразити «гамбургер», вкажіть .navbar-toggler-icon для елемента <span>;
• для списку посилань використовуйте елемент <ul> з класом .navbar-nav;
• для кожного окремого пункту списку використовуйте <li> з класом .nav-item ;
• для окремих посилань використовуйте <a> з класом .nav-link.

Навігаційна панель з меню, що випадає

Ви можете додати випадаючі меню на панель навігації. Просто вставте код для меню в елемент <li> з класом .dropdown.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">Меню</a> <div class="dropdown-menu" aria-labelledby="Перегляд"> <a class="dropdown-item" href="#">Посилання 1</a> <a class="dropdown-item" href="#">Посилання 2</a> <a class="dropdown-item" href="#">Посилання 3</a>
</div>
</li>
</ul>
</div>
</nav> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Поточна сторінка

Використовуйте клас .active, щоб помітити посилання як поточну сторінку або розділ (застосовуйте його до <li>). Також додайте <span> з .sr-only, щоб повідомити про це програми читання з екрана.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item active"> <a class="nav-link" href="#">Посилання 2 <span class="sr-only">(поточна)</span></a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav>

Панель навігації з полями форм

Ви можете включити поля форми в панель навігації, додавши .form-inline до елемента <form>. Тут ми також використовуємо .mr-auto для попереднього елемента, щоб форма була вирівняна праворуч.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li>
</ul> <!--Пошук--> <form class="form-inline" role="search"> <input type="text" class="form-control"> <button type="submit" class="btn btn-secondary">Знайти</button>
</form>
</div>
</nav>

Вирівнювання

Ви можете використовувати допоміжні класи (наприклад, .mr-auto або .justify-content-end) для вирівнювання елементів на панелі навігації.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse justify-content-end" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav>

Флексбокс-класи беруть свої імена з дійсних властивостей та значень флексбоксів. Це дозволяє легко вгадувати назву найбільш відповідного класу для цієї ситуації. Ви також можете додати адаптивне скорочення, щоб вирівнювати лише певні розміри області перегляду. Наприклад, .justify-content-lg-end застосовує justify-content: end для великих пристроїв і вище.

Коліри

Bootstrap надає різні варіанти додавання кольору до панелі навігації. Це працює так: спочатку задаєте, світла панель або темна (через .navbar-light або .navbar-dark), а потім вказуєте колір. Колір можна встановити за допомогою одного з класів кольору Bootstrap (наприклад, .bg-primary, .bg-dark) або вказавши свій власний колір за допомогою CSS (наприклад, через background-color).

У попередніх прикладах вже вказано колір навігаційної панелі. Ще кілька прикладів.

Головний колір, світла панель

Тут ми використовуємо .bg-primary разом з .navbar-light.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav>

Головний колір, темна панель

Тут ми використовуємо .bg-primary разом з .navbar-dark.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav>

Свій колір

Щоб вказати свій власний колір, опустіть будь-який клас .bg-* (наприклад , видаліть .bg-primary) і додайте свій власний колір за допомогою CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav> <!--Встановлюємо висоту body, щоб з'явилася смуга прокручування--> <style scoped> body { height:2000px; background-image:url('/example/image/bubble1.gif'); }
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Перемикач навігації"> <span class="navbar-toggler-icon"></span>
</button> <!--Бренд--> <a class="navbar-brand" href="#">Логотип</a> <!--Посилання--> <div class="collapse navbar-collapse" id="nav-content"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Посилання 1</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 2</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Посилання 3</a>
</li>
</ul>
</div>
</nav><!--Встановлюємо висоту body, щоб з'явилася смуга прокручування--> <style scoped> body { height:2000px; background-image:url('/example/image/bubble2.gif'); }
</style>

body { padding-top: 70px; }

body { padding-bottom: 70px; }