Bootstrap 4. Горизонтальне меню «Navbar»

Створення горизонтального адаптивного меню для сайту здійснюється за допомогою компонента «Navbar».

Компонент має два режими відображення:

десктопний (звичайний) - виводяться всі елементи меню;
мобільний (згорнутий) - відображається бренд і кнопка «Гамбургер».

Режим відображення меню залежить від ширини viewport браузера. Точка перелому задається за допомогою css-класу navbar-expand- {sm ... xl}.

Навбари і їх вміст за замовчуванням займають 100% ширини

See the Pen navbar-bs4 by kravets (@raisa69) on CodePen.

Для установки колірного оформлення меню використовуються ще два додаткових класи: navbar- {...} і bg- {...}.

Для установки кольору фону до bg- {...} необхідно додати будь-яку з восьми колірних схем - primary, secondary, dark, light, warning, danger, info, success.

Клас navbar- {...} відповідає за колір тексту і підтримує два варіанти - navbar-dark і navbar-light.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
</nav>

Для «NavBar» не обов'язковий контейнер, але якщо необхідно обмежити ширину всього меню, то можна його обернути в .container.

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        ..........
    </nav>
</div>

Якщо ж потрібно обмежити ширину тільки вмісту, а саме меню відображати на всю ширину сторінки, то .container слід помістити всередині .navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        ..........
    </div>
</nav>

Для позиціонування меню фреймворк пропонує три додаткових класи:

fixed-top - фіксує меню в самому верху сторінки;
fixed-bottom - фіксує меню в самому низу сторінки;
sticky-top - приклеює меню в верху при прокручуванні сторінки.

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    ..........
</nav>

Елементи меню

Компонент «NavBar» складається з декількох підкомпонентів, які можна додавати або виключати в міру необхідності.

Наприклад, картинка з логотипом

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Посилання з логотипом -->
    <a class="navbar-brand" href="#">
        <img src="/img/logo.png" width="50" height="50" alt="...">
    </a>
    ..........
</nav>

Кнопка для відкриття меню

Має css-клас .navbar-toggler і призначена для показу і приховування вмісту меню .collapse.navbar-collapse на маленьких екранах:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    ..........
</nav>

Блок вмісту меню

Має css-класи .collapse.navbar-collapse і ховається в контрольній точці, яка задається класом navbar-expand- {sm ... xl}. Може бути показано і приховано по кліку на кнопці .navbar-toggler:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        ..........
    </div>
    ..........
</nav>

Текст всередині меню

Клас .navbar-text - дозволяє додавати текст в меню.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <span class="navbar-brand mb-0 h1">Brand</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-example">
        <ul class="navbar-nav">
            <li class="nav-item">...</li>
            <li class="nav-item">...</li>
            <li class="nav-item">...</li>
        </ul>
        <!-- Текст всередині меню -->
        <span class="navbar-text mx-auto">Navbar text with an inline element</span>
        <form class="form-inline">
            ..........
        </form>
    </div>
</nav>

Завдання 1

Створити меню за зразком, використовуючи компонент navbar фреймворку bootstrap 4

Підключити шрифти font-awesome для вставки символів:

Pages