Подключение jQuery
Для работы Bootstrap необходима библиотека jQuery. Её можно скачать и подключить локально, добавив ссылку на файл в HTML-странице, или использовать CDN-ссылку. jQuery следует подключить перед Bootstrap. Для оптимизации, размещайте скрипты в конце страницы, перед закрывающим тегом <body>.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Пример подключения через CDN -->Выпадающее меню
Выпадающее меню создаётся с помощью классов и атрибутов. Основной блок имеет класс dropdown. Внутри него находится кнопка (или ссылка) с классом btn btn-secondary dropdown-toggle и атрибутом data-bs-toggle="dropdown". Этот атрибут указывает Bootstrap на элемент, управляющий выпадающим меню. Список находится в элементе <ul> с классом dropdown-menu. Элементы списка — ссылки <a>.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Выберите пункт
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Ещё что-то</a></li>
</ul>
</div>Для разделения пунктов используется <hr> с классом dropdown-divider. Заголовки добавляются с помощью <li> и класса dropdown-header. Для деактивации элемента — класс disabled. Класс dropdown-menu-right меняет позицию меню (справа или слева). Для выпадающего меню вверх, замените класс dropdown-menu на dropdown-menu dropdown-menu-end.
Шапка сайта с выпадающими меню
Пример создания сложной структуры: шапки сайта с выпадающими меню. Код объёмный, но логичен и основан на рассмотренных компонентах. Он использует классы для адаптивной навигации, изменяющей отображение в зависимости от размера экрана.
<!-- (здесь будет пример кода шапки, аналогичный тому, что описан в видео, но слишком объемный для примера в markdown) -->Этот код реализует адаптивную шапку с выпадающими меню, кнопкой для мобильных устройств и формой поиска.
В этом уроке мы изучили создание выпадающих меню и списков в Bootstrap, а также пример адаптивной шапки сайта. Полный код примеров доступен по ссылке [ссылка на сайт].