Уроки Bootstrap верстки / #3 - Система сеток и адаптивное меню
HTML-код
- Опубликовано: 2 фев 2017
- Урок на сайте itProger: itproger.com/course/bootstrap/3
В этом уроке мы с вами еще затронем тему работы с сетками в Bootstrap, а также сделаем небольшую шапку для нашего сайта при помощи одного только Bootstrap!
✔ Основной сайт: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Страничка Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼💻
- Все уроки по хештегу #GoshaBootstrap
Все кто запоролся на этом уроке. Здесь идет аж Bootstrap 3 какой-то там. navbar-header уже не нужен, к ul не надо nav, имеют класс nav-item, в li имеют класс nav-link. А сам
черт возьми, не понял ничего. Можешь сам код скинуть сюда, пж?
Герой
Спасибо большое
@@kirill2003_yt
ITPROGER
Главная
О нас
Обратная связь
для Bootstrap 4
ITPROGER
Главная
О нас
Обратная связь
Спасибо сильно помог!
Большое спасибо, ибо есть большая разница, когда используешь 3 и 4 версию. У меня на 3 версии все мои пункты меню были прилеплены к правому краю страницы. Спасибо!
Vladimir Mololkin, есть такое дело..
можешь написать, откуда инфа, если не секрет?
из документации getbootstrap.com/docs/4.0/components/navbar/
кто из 2019:
Первый
Второй
Да! или order-md-7 -можно ставить значение от 1 и до 12
Спасибо
Спасибо
Я так понимаю его урок подустарел немного, спасиб)
Прошёл год. Вместо push и pull теперь используется order. попробуй тут угнаться...
У меня все точно так же сделал но у меня меню не по горизонтали а по вертикали в чем может быть проблема please guys
Спасибо, честно говоря за все время просмотра различных уроков, здесь самое понятное объяснение, круто!
Большое Вам спасибо за урок. Всё просто, доступно, а главное бесплатно :)
Уроки шикарные, все твои курсы лучшие ))
Автор красавчик, очень легко объясняет и мне понятно, спасибо те
Неплохие уроки!
Для новичков самое то.
Спасибо, Гоша
Уф, сколько уроков пересмотрела но только здесь поняла что и как, пасибки автору:)
Дякую , пояснюєш чудово!!!Постійно дивлюсь твої уроки, пояснює без води ...саме те що потрібно, дуже вдячний за твої уроки) З мене лайк+ і підписка!
Толково!!! Честно говоря я думал Bootstrap останется не освещённым. Ан нет, вот тебе и Гоша Дударь!
Спасибо! Все понятно
Из документации Бутстрапа 4 , если вы хотите чтобы выглядело как у автора: то вот код:
Navbar
Home (current)
Features
Pricing
Disabled
Чел спасибо большое, а то я думал что бутстрап неправитльно установил
Епон чел ты рили гений, я уже хотел было расхреначить компьютер, типо опять ничего не получается лол))
Сапсибо огромное!
если выполнить на базе версии 4.5.3 будет другой вид, все течёт все меняется
спасибо Вам огромное! :)
Спасибо большое!
спс автору. очень познавательно.
Очень помогает ❤
Чётко и понятно.
Большое спасибо за уроки, из Киргизии привет)))
Привет
Привет земляк)))
Салам, спасибо за урок. Мы не из Киргизии, Биз Кыргызстанданбыз)))
От души красава, лайк!
bootstrap рулит, спасибо!
Все получается!!!! Круть!!
Это уже третье видео в этом плейлисте, где нет сторонней рекламы 0_0
Робин-гуд с 666-к подписоты)
Дякую)))
Гоша, ты прелесть!
+
Стал намного лучше говорить и продумывать материал! Радует качество и быстрота разбора материала. Всё круто!
Спасибо! 🙂👍
Здраствуйте Гоша запишите пожалюста видео о вашем пути в програмирование
Гоша Просто супер !!! Спасибо тибе ОГРОМНОЕ !!!!!!!!!!!!
А можно новый плейлист по актуальному бутстрапу? (: Проделанную работу ценим, конечно, но нужна актуальная информация :/
как эти ссылки в шапке сайта распределять,например по центру?
7:52
Nazvanie
так по-моему лучше
у меня меню в верхний правый угол ушло
а у тебя 4 бутсрап?это может быть потому что у тебя 3
@@edgarshakhmaryan9246 наоборот если у него 4 так будет, а в видео у автора 3
@@iordachidenis5026 а, не заметил
он написал два раза push а надо push а ниже pull как по видео. Если у него 3 бутстрап
Спасибо
Посоветую посмотреть видео в ускорении 1.75 что бы экономить своё время)))
Bootstrap 4. Пример меню.
Navbar
Home (current)
Features
Pricing
Disabled
Спасибо огромное!
Если версия 4.2.1 и не получается. Тоесть єффект как в предыдущих коментариях.Стоит ли переходить на 3.3.7?И как решить эту проблему?
от push и pull блоки местами не поменялись
+++
Гоша, когда следующий урок ?!
nav-item active теперь не меняет текстуру(цвет) фона элемента а только цвет текста. а заставить можно без собственных стилей?
Это отличное видео отличное, но оно слегка устарело? Класса navbar-default уже не существует, насколько я понял (я использовал bootstrap 5)
Здравствуйте. Так сложились звезды, что срочно изучаю Bootstrap. На уроке 3...4 понял, что этот курс устарел: пошли нестыковки в срабатывании кода (видимо, в БТ сменили кое-где классы).
Но знать все равно надо.
Тогда поступил так. Видео использую, как программу обучения. Но актуальный "учебник" открываю на самом официальном сайте Bootstrap и свежий материал беру оттуда.
Вопрос к ребятам: кто для фронта использует DreamWeaver?
Всем печенек, до связи.
Я.
Спасибо за урок, но у меня меню идет не в ряд, а в столбик, не могу понять в чем проблема, кто то сталкивался с такой проблемой?
Потому что у тебя бутстрап 4
Да с такой-же проблемой столкнулся, не могу не как решить.🤷♂️
Можно ли между тэгов с классами бутсрап вписывать свои тэги с классами и стилями? Я сделал и у меня вся страница сломалась.
Bootstrap 4.5.3 менюшка вправо уехала и стала вертикальной.
Можно ли в навбаре как то растянуть пункты по всей ширине экрана?
Item - айтэмс 🎉
блин автор видео красава. даже не к чему придраться
Как поменять цвет меню ? Через css почему то не получается
Сделай новый обзор на bootstrap 4, многие классы поменялись
Почему у меня просит задать ширину и длину в стилях? Как избавитсья?
как разместить навигационную панель по центру?
А будет как создать боковое меню?
Если не в терпеж, то проще загуглить.
Bootstrap топ
Так а гдеможно посмотреть все эти специальные классы бутстрап? И их свойства?
На сайте, там много.
У меня почему-то не адаптивно. То есть при увеличении колёсиком мыши оно адаптируется, но так - нет. Думаю баг браузера, т.к. код весь у тебя переписал
Как именно?
Что делать, если меню ушло в правый верхний угол?
Поменяй версию bootstrap'a, на сайте можно выбрать
по умолчанию все потомки child'ы класса .navbar якобы под d-flex и по умолчанию у них стоит space-between, надо написать justify-content-start к классу container-fluid который первый потомок navbar'а. Но в уроках наверное потом надо будет их всё равно по сторонам растащить
Можно узнать, на каком бутстрапе работает автор, ибо у меня в последнем 4-том бутстрапе много фишек изменено уже(
3.3.7 Можно увидеть из строки:
Можно ли вместо "Itproger" поставить лого, если да,можешь пожалуйста код написать.
И можно ли цвет шрифтов в кнопках поменять на белый,и если да,ток как? =3
Пожалуйста...=) Надеюсь ответишь.
Чтоо?)
Ты серьезно?
Ты что сам не можешь?
Просто же...
@@jajdheubebxjznrbr да только новичок потом может и не с
позиционировать его) Лучше бэграундом)
Народ ! ссылку оставьте где можно брать актуальные классы. Спасибо
getbootstrap.com/docs/4.0/components/navbar/?
Какая среда разработки?
Чет я мало что понимаю, у меня вроде что-то работает, но стили нет, тупо все ссылки без никакого оформления. весь код перепроверил 3 раза, всё 1 в 1.
В чем может быть проблема?
Привет. Вся проблема в бустрапе. Установи bootstrap v3.3.7 getbootstrap.com/docs/3.3/getting-started/ . Просто поменяй код как в первом видео и все заработает!
@@user-hh9pl7nk6c Cпасибо
bootstrap-4.ru/docs/4.0/components/navbar/#color-schemes
Третий не лишний?)))
Привет, можешь помочь, я пытался сделать меню полностью скопировал код, но у меня navbar-header и div со списком в разных концах экрана. Смотрел через код элемента, они даже не соприкасаются, т.е между ними просто пустое место.
Такая же хня ) не знаю как решить, если у тебя получиться то отпишись пожалуста
Anton Hohotyn я решил. Дело оказывается в самом bootstrap 4. Поищи предыдущие версии и все будет работать
А в новых версиях как такое же сделать не вкурсе ?
Anton Hohotyn к сожалению нет
Ребята смотрите офф документацию, и будем вам счастье.
ПОЧЕМУ Я УЗНАЛА ОБ ЭТОМ ТОЛЬКО СЕЙЧАС ЫЫЫЫ
Согласен! :-)
Гоша, почему push и pull не сработало??? Этих классов нет в bootstrap 4?
Это 3.
Гоша привет! пожалуста сними видео про домен и хостинг!!
почему у меня шрифт не тот, может кто нибудь знает?
На моем компьютере в папке с сайтом лежат файлы с сайтом при запуске все работает. Как только я копирую данную папку на другой комп функционал сайта перестает работать. Подскажите в чем может быть причина?
Может на другом компе не подключен интернет? Всякие jquery могут через интернет подключаться.
голопом по европам ...
тема нужная, хотелось бы более обстоятельных разборов
с точками, запятыми и подчёркиваниями. а не монолитом просто вываленный материал аля "ну тут все и так понятно"
у меня не работают стили для меню , но сетки работают . может я что то не подключил? кто сталкивался с такой проблемой , что делать?
Bipolyarochka Polyarnaya Bootstrap 4 отличается от 3 версии. Изучите оффц док.
4 бутстрап работает по другому. классы не подходят. кто знает где можно узнать все классы и их свойства?
На их сайте, в компонентах.
100+
А почему тег header не используете?
Его не обязательно было там вписывать, он приводил пример.
Надо бы сократить использование слова "соответственно"
И нахрена менять столько всего в 4-й версии?
navbar-header == navbar-brand
обращаю вимание всех на новую программу adobe portfolio для создания сайтов, хотел бы знать ваше мнение
заглянул в эту прогу, бесплатная, платна лишь публикация сайта на их сервере, см. myportfolio.com, поддержка Crome и Safari, другие навигаторы тоже отражают.
аааа как запомнить все классы
Ну вот сука, почему у тебя не миллиард подписонов за такой ахуительный контент)))
а свой стайл задать можно?
Конечно можно, это же ксс, ты чего?)
зачем нужен push pull (где использовать)
Он же объяснил,push pull меняют местами блоки, вводишь название класса 1-блока в push, а в 2 вводишь название класса с кем хочешь поменять местами pull, но сейчас пишется просто - order.
@@constvntine5453 для чего их менять местами?
Можно ли убрать текст каторый идёт синхорнно под видео? Сильно мешает
это субтитры....
И с какого хрена col-lg-pull и push не работают у меня.
Потому что уже бутстрап 4 версии. То что он говорит, уже многое не работает.
У вас получается очень доходчиво объяснять всю эту петрушку - спасибо! У меня тоже сайт на бутстрапе и мне бы надо сдвинуть лого в центр. Словом как вот эту штуку take.ms/eHh5u сместить к центру страницы? take.ms/tCzjk
Скорее всего я туплю, но моих мозгов не хватает, что бы решить эту проблему.
Как сделать так, что бы ссылки становились активными?
Т.е. после нажатия на них цвет менялся?
href не?
Все оказалось проще. Не нужен ни JS для этого, ни какие другие инструменты. Проблема в том, что это только одна страница сайта, которую Гоша скопипастил))) Для того, что бы ссылки были активными на других страницах их нужно создать)))))
Ммм. Как чтобы ссылка подсвечивалась нужно это делать в твоем в .css файле. Ссылки это ( a) , присваиваешь им hover и делай с ними все что хочешь.
Я ПЕРВЫЙ!!!!!!!!!!!!!!!!!!!
Predator Я второй дебил 😂😂 За это платят?
НУ да )))
LGP 😂😂😂 Не позорься ок?
Ок )))
Если у кого-то не работает, все потому, что вы скорее всего используете библиотеки 4го бута. Ссылка на 3.3.7, как у автора - getbootstrap.com/docs/3.3/getting-started/
Это 3-ий что-ли ?
да
Всё конечно отлично, но когда пишешь код нужно детально его объяснять. Ты написал push и pull и не объяснил что ЭТО. Просто показал что получилось
В 2021 половина классов неактуальны
Разобрать с экрана текст очень трудно. Разве нельзя было сторонней программой делать запись экрана, а не применять видеокамеру со стороны?
2021 не актуально
кто из 2к20, устарело, ищите новее или читайте документацию
Было бы порядочнее написать в шапке "урок устарел",а не собирать просмотры
Ввожу всё как на видео и нехрена не работает. Пока у меня Бустрап вызывает только горение жопы.
видео по старой версии, поэтому может не работать
@@user-xy5sd4sz4m что то он слишком быстро модернизируется не привнося ничего нового. Подскажите, плз, если знаете. Зачем нужен бутстрап если есть флекс и грид? Прикручивать слайдеры и карусели? Я прошёл несколько курсов по бутстрапу за эту неделю, но надобности в нём нак и не увидел. Какая то мусорная каша, которой приходится платить за пару фич (сорри если резковато. Но это всё из за пригорания от бутстрапа)
Я пока сам не в курсе зачем он. Начал учит, потому что параллельно учу Angular. Думаю, просто удобная и популярная библиотечка
@@user-xy5sd4sz4m А что для Ангуляра нужен Бутстрап? Много времени ушло на JS?
@@StepanVorobiov У всех по разному на js уходит, а на счет Бутстрапа ты серьезно?)
Мусорная каша? Там сетки по удобнее чем в гридах, большая библиотека, много готовых классов, если тебе в кайф все писать самому, то иди пиши. А другие устали все переписывать, он удобный)
Я вот понять не могу, у тебя во всех роликах, что я не смотрю, каждое видео меняется, что черт возьми ты делаешь с микрофоном?!!!
Урок не актуален !