Верстка сайта Bootstrap 5 - Начало. Адаптивное меню

Мы начинаем новый курс верстка сайта на Bootstrap 5 с нуля. В этом курсе мы сделаем классный работающий сайт стилизованный благодаря Bootstrap 5. В первом видео мы начнем верстку сайта и сделаем адаптивное меню на бутстрап и кастомизируем его под свои нужды. Расскажу как делается кастомизация сайтов Bootstrap 5 и как менять классы. В обще верстка сайта на Bootstrap 5 начало.

[TheStoryDash]

Актуальный код, для 5 версии бутстрапа!
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu"
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1"
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success"
</form>
</div>
</div>
</nav>

[MrVlad]

Видимо поменялись классы, поэтому нужно менять mr -> me и параметры data-toggle -> data-bs-toggle и data-target -> data-bs-target

[kairhanserikbay]

У кого не открывается гамбургер надо изменить data-toggle на data-bs-toggle и data-target на data-bs-target а также если форма с поиском прижимается к меню надо поменять mr-auto на me-auto

[iliasadkovoi]

Скажу так, смотрел я уроки 3 части, и там все было плохо по объяснению , но глянул этот урок и просто кайфонул, спасибо тебе что ты прокачал свой скилл по объяснению

[dedregames]

Все быстро, четко, по делу. Респект за объяснения!

[storiesYouNeed]

Не работает Dropdown, пришлось переделывать с документации по 5 версии пример брать, а ваш код это 4 версия, я пока не переделал так и не заработало, возможно ли интегрировать все версии бутстрап чтобы по всем версиям работать, не только с 5
Сравните сами вот рабочий пример и так же появилась подсветка при наведении:
<header id="header" class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: black">
<div class="container">
<a class="navbar-brand" href="#">Web Dev Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target = "#navbarContent" aria-controls = "navbarContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span
</button>
<div class="collapse navbar-collapse" id = "navbarSupportedContent">
<ul class="navbar-nav mr-auto mb-3 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>


<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu"
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>

</ul>
</div>
</div>

</nav>
</header>

[Ovveee-ei]

сверял код 100раз то ли ссылка не такая на будстрап как на видео то я не знаю че вообще не так

[farangiznishonova]

a vse, u vas versia takaya ok-sa "data-toggle" eto u vas a nado seychas "data-bs-toggle"

[Просточел-ещ]

Почему
Я все уже сделал все работает
Только почему меню поиска не с права?
Я пробивал me и mr

[foma]

Ну круто, писал писал а потом бургер не открывается, и зачем я это делал?! Смысл мне дальше плейлист смотреть, если там скорее всего такая же петрушка будет. Я могу конечно в комментах сидеть искать решение, но мне это зачем, я лучше документацию читать буду чем комментарии.

[abracadabra]

Прошу помочь, я скопировал нав бар с сайта бутстрапа и захотел изменить цвет на свой, но не смог это сделать

[ПётрПетрович-хш]

Код уже не актуален, т.к. меню-бургер не открывается. Что-то изменилось с тех пор, как записывали видео.

[farangiznishonova]

pochemu to u menya dropdown ne pokazivaet )) v cem mojet bit problema ?

[ДоткаЦарская]

Когда нажимаю на дропдаун, список появляется слева на сайте, а не под кнопкой. Как решить проблему?

[Tech_Noir]

Сижу ломаю голову над тем почему у меня поисковая строка search впритык к dropdown , все в точности сделал как и ты но ничего не пойму что не так

[lite_go_]

Добрый день, добавьте следующие видео из этой серии в плейлист

[min]

я все делаю за втором, учел изменения 'bs', меню не получается горизонтальным, все равно появляется ниспадающее меню.

[animeamvshorts]

Кто знает, почему у меня эффекты не плавные как в видио? В карусели просто резко меняются картинки а не прокручивается как на видио и в выпадающем меню так-же. Подскажите пожалуйста в чём дело

[vadismd]

привет) возник вопрос, код точь в точь как у тебя но когда запускаю индексовский файл то у меня сразу ссылки меню спрятаны и открываются только по кнопке, в чем может быть проблема?

[phitrow]

А теперь пояснительную бригаду: как всё это работает?