Верстка сайта Bootstrap 5 - Начало. Адаптивное меню
HTML-код
- Опубликовано: 11 окт 2020
- Мы начинаем новый курс верстка сайта на Bootstrap 5 с нуля. В этом курсе мы сделаем классный работающий сайт стилизованный благодаря Bootstrap 5. В первом видео мы начнем верстку сайта и сделаем адаптивное меню на бутстрап и кастомизируем его под свои нужды. Расскажу как делается кастомизация сайтов Bootstrap 5 и как менять классы. В обще верстка сайта на Bootstrap 5 начало.
По промокоду WDB20 скидка на хостинг от HOSTIQ.ua при оплате за 3 месяца - r.hostiq.ua/wdb-hosting
Актуальный код, для 5 версии бутстрапа!
Navbar
Home
Link
Dropdown
Action
Another action
Something else here
Disabled
Search
Действительно рабочий!!
тот даже с подсказками от Vladislav Striga не полностью работает. (у меня не сворачивается.. вообще)
Скажу так , смотрел я уроки 3 части , и там все было плохо по объяснению , но глянул этот урок и просто кайфонул , спасибо тебе что ты прокачал свой скилл по объяснению
Все быстро, четко, по делу. Респект за объяснения!
Видимо поменялись классы, поэтому нужно менять mr -> me и параметры data-toggle -> data-bs-toggle и data-target -> data-bs-target
thanks very much
Отлично! А то я уж голову сломал где косяк то..
Вот спасибо за подсказку! А то я уже два дня голову ломаю, почему не получается повторить, чтобы работало!..
Пишешь такой код с видоса, не работает..
Лезешь в документацию, видишь другие классы, хочешь поделиться с остальными, а тут уже есть годный коммент)
Лайк в топ
Уже начала с ума сходит. Спасибо))
Спасибо за начало урока)
От души бро. Спасибо за уроки
У кого не открывается гамбургер надо изменить data-toggle на data-bs-toggle и data-target на data-bs-target а также если форма с поиском прижимается к меню надо поменять mr-auto на me-auto
Я попробовал исправить, не работает по прежнему
Нашел в чем причина, но теперь не хочет закрываться
Спасибо тебе, добрый человек!
@@dewaro8986 в чем причина?
дідько, дякую тобі!
Перешёл на tailwind, оч нравится)
сверял код 100раз то ли ссылка не такая на будстрап как на видео то я не знаю че вообще не так
спасибо бро! то что нужно!)
Добрый день, добавьте следующие видео из этой серии в плейлист
Когда нажимаю на дропдаун, список появляется слева на сайте, а не под кнопкой. Как решить проблему?
Кто знает, почему у меня эффекты не плавные как в видио? В карусели просто резко меняются картинки а не прокручивается как на видио и в выпадающем меню так-же. Подскажите пожалуйста в чём дело
Здравствуйте, у меня collapse не закрывает содержимое блока в чем может быть проблема?
интересно, круто!!
Завтра досмотрю
подскажи как добавить стиль, а именно покрасить сам бургер? рамку покрасил а сами три полоски не выходит
Уроки супер, пересмотрел. Лайк везде!
Не работает Dropdown, пришлось переделывать с документации по 5 версии пример брать, а ваш код это 4 версия, я пока не переделал так и не заработало, возможно ли интегрировать все версии бутстрап чтобы по всем версиям работать, не только с 5
Сравните сами вот рабочий пример и так же появилась подсветка при наведении:
Web Dev Blog
Home
Blog
About
Dropdown
Action
Another action
Something else here
Ну круто, писал писал а потом бургер не открывается, и зачем я это делал?! Смысл мне дальше плейлист смотреть, если там скорее всего такая же петрушка будет. Я могу конечно в комментах сидеть искать решение, но мне это зачем, я лучше документацию читать буду чем комментарии.
Прошу помочь, я скопировал нав бар с сайта бутстрапа и захотел изменить цвет на свой, но не смог это сделать
Mr. DAN посмотрите мое видео, я показал как это делается
я все делаю за втором, учел изменения 'bs', меню не получается горизонтальным, все равно появляется ниспадающее меню.
красава
Я так понимаю это будет лэндинг для портфолио проектов?
a vse, u vas versia takaya ok-sa "data-toggle" eto u vas a nado seychas "data-bs-toggle"
Спасибо ! Спас с dropdown-ом )) помогло !
Очень полезно. Мог бы ты сделать видео с самыми необходимыми классами бутстрапа? Просто, смотрю и любуюсь ,как всё филигранно и быстро , но и попутно удивляюсь количевству незнакомых классов. Очень хотелось бы глянуть.
Да откройте канал эти видео есть, целый курс
@@SuprunAlexey Нашел, спасибо)
Сижу ломаю голову над тем почему у меня поисковая строка search впритык к dropdown , все в точности сделал как и ты но ничего не пойму что не так
попробуй к форме ещё добавить класс ms-auto
Подскажете пожалуста. На какой операционной системе лучше учить программировать? Винде или макос? И какое лучше железо? Амд или Интел?
Артур Шевченко на начальном этапе это не имеет никакого значения
Спс
привет) возник вопрос, код точь в точь как у тебя но когда запускаю индексовский файл то у меня сразу ссылки меню спрятаны и открываются только по кнопке, в чем может быть проблема?
vadism3d / не совсем понял. У вас сразу открывается адаптивное меню?
@@SuprunAlexey нет, оно просто скрыто (в полной версии) а по кнопке открывается
Давай урок по Laravel Вышол 8 версия
Код уже не актуален, т.к. меню-бургер не открывается. Что-то изменилось с тех пор, как записывали видео.
классы немного поменялись
data-bs-toggler data-bs-target navbarSupportedContent id navbarDropdown mr-2 теперь me-2 container-fluid
Web Dev Blog
Home
Blog
About
Dropdown
Action
Another action
Something else here
Search
У меня меню в мобильной версии не открывает, что делать ?
У меня меню ,в мобильной версии не открывается ,что делать ?
Пытаюсь изменить цвет ссылок и borderа на белый не получается. Подскажи как быть?
element{
color: white !important;
}
Очень круто,что теперь практика, но лучше бы ты взял хотя бы макет чуть по сложнее с слайдером, выпадашками и т.п. И еще вопрос, корректно ли юзать и не будет ли ошибок при использовании бутстрап совместно с своей сборкой галп?
Та макет по сложнее не все после теории осилят, это и долго, а такой прям отлично
По сборке не скажу, я ж не знаю что у вас там
подскажите не могу растянуть шапку на весь экран браузера ибо у меня кнопок больше и не влезает все. подскажите как растянуть на всю ширину страницы?
Container-fluid вам нужен вместо обычного контейнера, если я вас правильно понял
@@SuprunAlexey незнаю корректно ли так но я просто в style.css прописал .container { max-width: 100%} ))))) так можно? шапка растянулась))
@@SuprunAlexey но и container-fluid сработал спасибо) учусь еще...с нуля
Trader Freeman просто классу container добавьте -fluid в HTML файле
@@SuprunAlexey так и сделал) азы есть) в коде ориентируюсь)
Dropdown работает. но не так. как надо. Т .е открывается. но список дочерних ссылок не под материнской категорией, а в самом начале страницы. В чём может быть проблема?
для данного пункта меню с dropdown кнопкой нужно добавить второй класс:
@@sergeyladorski спасибо! Теперь всё работает как надо.
Ох... уже 5й вышел? )) а я только с 3го на 4й перешел ))
Ага
В этом плейлисте нет больше видео по бутстрап5, только 1 видео
Не согласен в хидере с классом container после тега nav , я б поставил див с классом container сразу после тега header
Я правильно понял?
Вот так я имел виду лучше сделать)
@@maksymgapachilo9507 Я тебя понял. Кстати ты мне в 11 часов ночи ответил. Почему не спишь?
@@anonim17pokib так еще не так и позно, такой режим )
Почему
Я все уже сделал все работает
Только почему меню поиска не с права?
Я пробивал me и mr
Что пробивал?
@@SuprunAlexey я чекал комментарии и вышло что там поменялись атрибуты. Ну заменил все работает
Только там mr говорят теперь me
А оно не работает
Пробовал сделать это через код как на сайте бутстаппа но у них поиск с лева .
Не работает как в комментариях написали?
блин не понимаю где все видео) ну ладно пойду дальше искать...
Почему никто не показывает, как кастомизировать bootstrap? Неужели вы используете весь этот css? 150kb сам бутстрап + шрифты + js. А ведь кое-где и 3g интернет еще в диковинку.
А где продолжения?
у меня dropdown не работает:
WDB
Home
About
Blog
Blog
dropdown1
dropdown2
dropdown3
Search
где можно ссылку найти на бутстрап ?
на JS то есть ?
@@user-fi3zi2ld7k да
спасибо, но можно было переделать и указать какие классы должны быть, а то половина кода отсутствует и брать ее нужно из документации, для новичка будет невыполнимо
выполнимо
А теперь пояснительную бригаду: как всё это работает?
Помогите у меня только бургер меню при любом разрешении
У меня тоже было,я допустил ошибку : написал "...navbar-expЕnd-lg"а надо"...navbar-expАnd-lg",может и у тебя такая ошибка))))
pochemu to u menya dropdown ne pokazivaet )) v cem mojet bit problema ?
если не работает dropdown menu лучше самому переписать в html и настроить в css. Вот пример ruclips.net/video/6CgnWhJ-amE/видео.html
Измени data-toggle на data-bs-toggle и data-target на data-bs-target
дякую за підказку. Бо теж не вийшло зразу. Підписка з мене
почему у меня нету 5й версии на сайте?
нашел))
@@danilkrymskiy846 быстро, даже не успел ответить
у мен я не работает js, что делать?
Как это не работает js
Ещё давай роликов
А вы эти написали у себя?
@@SuprunAlexey Частично, я б сказал
Что-то я запутался 🙈
Не понимаю зачем это все прописывать если можно с бустрапа скопировать ? Лучше бы показали что от куда брали
А продолжение есть?
Конечно, посмотри в плейлистах
@@SuprunAlexey Увидел, но последние 2 Бутстрап-плейлиста не заполнены. Видосики нашёл вне плейлиста. Спасибо, Мощные уроки
Мб
Кто-то розобрался что делать чтобы дропдаун выпадал?
поищи в комментах, люди пишут об изменении названий классов
Эм, этот сайт как у него можно тупо бутстрап готовые шаблоны повставлять с текстом и все тоже самое будет але
так с любым сайтом можно, не обязательно бутстрап, тут суть в том что бы вы научились делать такие сайты самостоятельно
Слишком много лишнего ты мог сделать код меньше и не понимаю зачем arisa
Bootstrap - это какая-то злая шутка. Находишь видео обучение и через месяц оно уже не актуально
Актуально
@@SuprunAlexey Чек мой комент в вверху
Я еле как сделал чтобы можно было выбрать дропдаун 123
поиск рип
@@user-wr6rw6xv3h ??
Ну поиск не с права
И не сворачивается
Хотя 4 раза все пересмотрел и все
у меня хэдэр не отобразился, удалил - всё ок)
Nikita Yarosh цвет ему поставил?
@@SuprunAlexey да, конечно, у меня почему всё иногда через раз работает, а ещё я бы хотел попросить видео урок как подключить бутстрап к вью, реакту и ангуляру. просто я вот недавно начал проект на вью, вроде бы подключил бутстрап, и стили работают, а вот тот же тогглер, при уменьшении размеров экрана, нет, хотя я поппер подключил тоже, может, есть какие там нюансы?
Нюансы конечно есть. Посмотрите у меня курс на примере бутстрапа + реакт, во вью все примерно так же. (Курс один из последних на канале)
@@SuprunAlexey ок, спасибо
Зло ваш бутстрап)))
Почему?
Я тоже так думал.
НО уже нет )
как всегда откровенно слабо:открыл документацию -> nav -> взял код который подходит и конечно подключил блочно bootstrap. а всего 15 сек вышло в видео!? тогда далее,тогда далее,тогда далее воды давай,забыл про scss .ну да тогда далее про reboot опять забыл ну тогда далее,не стыдно !!??
соответственно, соответственно, соответственно. X 1000 раз!!...
режь! учить говорить! и снова режь!
Ok
Никакого объяснения.
Фу нахер...бутстрап
Однозначно дизлайк! Почему не объясняете - что это за классы, которые Вы используете? Почему не объясняете что они делают!?
Потому что это практика, показываю как работают. Гляньте курс по бутстрапу конкретно у меня на канале