Навігація в Bootstrap 4

Клас .nav (і пов'язані з ним класи) дозволяє перетворити список у вкладки та навігаційні «пігулки». Щоб створити вкладку або пігулку, додайте .nav, а також клас .nav-pills або .nav-tabs до елемента <ul>, який містить список пунктів навігації.

Проте <ul> не є обов'язковим — ви також можете легко використовувати навігацію для інших елементів.

Базова навігація

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

Компонент навігації використовує клас .nav для зовнішнього елемента, такого як елемент <ul> або <nav>.

Для елемента < ;ul>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Перегляд</a>
</li>
</ul>

Для елемента <nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="nav"> <a class="nav-link active" href="#">HTML</a> <a class="nav-link" href="#">CSS</a> <a class="nav-link" href="#">JavaScript</a> <a class="nav-link" href="#">Перегляд</a>
</nav>

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

Додайте службовий клас .flex-column до елемента .nav для вертикального розміщення пунктів навігації.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="nav flex-column"> <a class="nav-link active" href="#">HTML</a> <a class="nav-link" href="#">CSS</a> <a class="nav-link" href="#">JavaScript</a> <a class="nav-link" href="#">Перегляд</a>
</nav>

Вкладки

Додайте class="nav nav-tabs" до елемента <ul>, який містить список пунктів навігації. Також увімкніть class="active" для створення вибраної вкладки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Перегляд</a>
</li>
</ul>

Пігулки

Замініть nav-tabs на nav-pills , щоб замість вкладок відображалися пігулки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Перегляд</a>
</li>
</ul>

Вертикальні пігулки

Як і з іншою навігацією, ви можете розташувати пігулки вертикально, додавши службовий клас .flex-column до списку класів.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">Перегляд</a>
</li>
</ul>

Відключені посилання

Ви можете додати клас .disabled для відключення вкладки або пігулки.

>

Зверніть увагу, що навігація лише виглядає вимкненою. Насправді жодна функціональність елемента <a> не відключається, тому вам потрібно буде використовувати інші засоби для фактичного відключення цього елемента (наприклад, JavaScript).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item"> <a class="nav-link disabled" href="#">Перегляд</a>
</li>
</ul>

Вкладки з меню, що випадають

Ви можете додати меню на вкладку або пігулку. У цьому випадку клас .dropdown застосовується до елемента <li> (але не до елемента <div>).

Вкладки

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Перегляд</a> <div class="dropdown-menu" aria-labelledby="Перегляд"> <a class="dropdown-item" href="#">Мобільник</a> <a class="dropdown-item" href="#">Планшет</a> <a class="dropdown-item" href="#">Ноутбук</a> <a class="dropdown-item" href="#">Настільний</a>
</div>
</li>
</ul> <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>

Пігулки

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">HTML</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a>
</li> <li class="nav-item"> <a class="nav-link" href="#">JavaScript</a>
</li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Перегляд</a> <div class="dropdown-menu" aria-labelledby="Перегляд"> <a class="dropdown-item" href="#">Мобільник</a> <a class="dropdown-item" href="#">Планшет</a> <a class="dropdown-item" href="#">Ноутбук</a> <a class="dropdown-item" href="#">Настільний</a>
</div>
</li>
</ul> <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>

Вкладки з панелями

Ви також можете використовувати Bootstrap для створення вкладок із панелями вмісту. Для цього переконайтеся, що у кожного <a> у навігації є data-toggle="tab" або data-toggle="pill" (залежно від того, використовуєте ви вкладки або пігулки). Потім під списком вкладок додайте <div> з класом .tab-content для вмісту. Після цього для кожного фрагмента вмісту створіть ще один вкладений елемент <div> з класом .tab-pane.

Крім цього, ви можете зробити, щоб вкладки з'являлися плавно, додавши клас .fade до кожної панелі .tab . Перша панель вкладок (або активна панель вкладок) також повинна мати клас .show для правильного згасання вихідного вмісту.

<link rel="stylesheet" ; href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul id="clothing-nav" class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Головна</a>
</li> <li class="nav-item"> <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Капелюхи</a>
</li> <!--Меню, що випадає--> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Взуття</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab" data-toggle="tab" aria-controls="dropdownShoes">Ботинки</a> <a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab" data-toggle="tab" aria-controls="dropdownBoots">Чоботи</a>
</div>
</li>
</ul> <!--Панель вмісту--> <div id="clothing-nav-content" class="tab-content"> <div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab"> <p>Ласкаво просимо! Натисніть на вкладки, щоб побачити зміну вмісту.</p>
</div> <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab"> <p>Капелюх — головний убір. Капелюх можна носити для захисту від погоди, з церемоніальних або релігійних причин, з метою безпеки або як модний аксесуар.</p>
</div> <div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab"> <p>Чотинки — предмет взуття, призначений для захисту та комфорту ніг людини при виконанні різних дій. Черевики також використовуються як прикраса.</p>
</div> <div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab"> <p>Чоботи — тип взуття та різновид черевиків. Більшість чобіт захищають ступні та кісточки, а деякі закривають і нижню частину гомілки. Існують чоботи висотою до коліна або навіть стегна.
</div>
</div> <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>