#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
HTML-код
- Опубликовано: 13 июн 2024
- Исходники к видео:
boosty.to/codequest/posts/3fa...
Подписывайся на альтернативные каналы:
- codequest
- t.me/codequest
В прошлом видео мы рассмотрели основы сетки Bootstrap, и даже написали начальную разметку для нашего макета. Сегодня мы пойдем еще дальше и сделаем нашу страницу адаптивной. Ведь Bootstrap предоставляет для этого все необходимое.
0:00 - Предисловие
0:29 - Проблема статических сайтов
1:32 - Desktop First
3:27 - Mobile First
4:41 - Контрольные точки (breakpoints)
6:20 - Классы адаптивной сетки
7:07 - Приступаем к практике
7:26 - Шапка сайта
8:07 - Вертикальные отступы
8:49 - Промо-информация
9:03 - Ряд с клиентами
9:47 - Секция с ценами
10:10 - Ряд сотрудников
10:41 - Подвал сайта
11:21 - Итоговый обзор адаптивного макета
11:50 - Подведение итогов
Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.
Также жду вас на моем сайте codequest.ru
Здесь вы найдете подробные интерактивные курсы по веб-разработке.
Как часто вы используете Bootstrap в своих проектах?
0:00 - Предисловие
0:29 - Проблема статических сайтов
1:32 - Desktop First
3:27 - Mobile First
4:41 - Контрольные точки (breakpoints)
6:20 - Классы адаптивной сетки
7:07 - Приступаем к практике
7:26 - Шапка сайта
8:07 - Вертикальные отступы
8:49 - Промо-информация
9:03 - Ряд с клиентами
9:47 - Секция с ценами
10:10 - Ряд сотрудников
10:41 - Подвал сайта
11:21 - Итоговый обзор адаптивного макета
11:50 - Подведение итогов
Единственное видео где я понял про сетки.автор канала ты красавчик, не забрасывай своей канал🎉
У вас лучший курс по Bootstrap : без воды, все по существу, а главное, доступным языком.
Спасибо =)
Ура, наконец то дождались. Спасибо за труд, ждем продолжения.
Спасибо за поддержку! Немного приболел, поэтому с задержкой, дальше больше!
Класс! Очень полезное видео! Всё чётко - информативно и без воды.
Благодарю за очень полезный и эффективный гайд! 👍
Спасибо , интересный плейлист
Годный контент, все так понятно. И главно не куда не спешим и все четко
Спасибо за поддержку!
Старался рассказать простыми словами, надеюсь, что удалось =)
Благодарю за видео, все четко и по делу, продолжай в том же духе, успехов!
Спасибо за поддержку, буду стараться =)
Super!!! /Оч подробно/ оч понятно/лучшее на русском объяснение по bootstrap. Спасибо
Старался =)
Спасибо. Очень доступно, кратко, по существу! *лайк*
Спасибо за отзыв!
Мотивирует продолжать =)
супер, все последовательно и результат хорошо выглядит
Спасибо! Хотел снять только одно видео, но разошелся =)
Спасибо большое, быстро и доступно всё объяснили :)
На здоровье =)
спасибо большое не понимал бутсрап но с этим видео понял все. Спасибо большое
Значит не зря старался =)
Супер видео то что надо. продолжай! :) Videoga gap yo'q! :D
Спасибо, в выходные будет новое видео =)
Спасибо за труды!
Благодарю за поддержку =)
Бро спасибо за все видео Можешь сделать адаптивный полный сайт Друзья если кому интересно давайте набирем лайки на этот комент всем спасибо Я Все понял из всех видео просто интересно как будет делать какой-нибудь сайт профи своего дела
Спасибо за твои старания
Благодарю за поддержку =)
Блин, классно рассказал, так держать.
Спасибо, старался =)
спасибо за интересный и полезный ролик
И вам спасибо за поддержку =)
Все замечательно и прекрасно! Остается только понять, зачем вообще этот Bootstrap нужен, если есть Flex и Grid?
Это интересно и полезно!
Ждём следующие уроки
Спасибо! Я думаю, будет очень полезно =)
Изложение материала на высоте.
Было бы интересно посмотреть вёрстку данного сайта до конца, а не только в виде блоков.
Также интересен вопрос насколько сложные сайты (в плане расположения элементов), например, асинхронное расположение и. т. п. можно сделать с помощью Bootstrap, такой контент был бы интересен.
Спасибо, подумаю =)
Однозначно подписка
Благодарю =)
привет, запиши пожалуйста видео по кастомизации bootstrap переменных и миксинов под свой проект! видосов про сетку полно, а по настройке нет
Привет!
Следующее видео как раз про это, покажу как настраивать сетку и использовать миксины вместо классов, в том числе и для адаптива =)
о, полезное видео по новому бутстрапу! А вот такой вопрос. Если нужно, например, верстать pixel perfect, а макет, в общем-то подходит под сеточную вёрстку, но какой-нибудь элемент в макете выпадает из общей парадигмы и залазит немного, например, на гаттер, т.е, вылазит за край колонки. Что в таком случае делать, применять position:absolute и прочие костыли или вообще отказываться от сетки?
Можно просто использовать бутстрап не для всех секций. Т.е. там где макет выбивается, мы применяем свои классы и верстаем без колоночной сетки, как вариант. Либо обсудить эти моменты с дизайнером и заказчиком =)
Спасибо за видео. Вопрос. Я правильно понял, что внутри "row" элементы div без класса "col" ведут себя как обычные элементы, то есть растягиваются на всю доступную ширину, несмотря на то, что у "row" стоит "display: flex;" от bootstrap?
Нет, они становятся гибкими. Просто для них прописано правило ".row > *" с шириной в 100% по умолчанию =)
@@CodeQuestRu спасибо!
Застряла на контрольных точках. Использую less , когда , например, пишу @include media-breakpoint-up(sm) - в СSS файле он не преобразовывается в @media (min-width: 576px). Можно ли как-то указать брейкпоинты в less, или придется вручную прописывать @media (min-width: 576....768px и т.д)?
Bootstrap 5 написан на препроцессоре Sass, нужно использовать его
@@CodeQuestRu перешла на sass (для компиляции использую Prepros). Когда пишу " @include media-breakpoint-up(sm) {
background-color: red;
}" при сохранении возникает ошибка ' undefined mixins '
Если он не видит такой миксин, значит чего-то не хватает. Проверьте подключение
класс, вроде все понятно и четко.
хотел захейтить но не к чему придраться (просто шутка !)
Спасибо!
Скоро будет продолжение =)
@@CodeQuestRu буду ждать)
У меня медиа выражения не работают, хотя в шапке html все установлено как надо
Где-то должна быть ошибка
@@CodeQuestRu ну это ежу понятно
Я так понял, что сам бутстрап не сделает адаптив? Нужно самому медиа-запросы прописывать?
Почему? В бутстрап как раз используются заранее созданные классы с суффиксами lg, md и т.д.
А почему не сжимал экран меньше ≈550 пикселей? Там было что то не так
Что именно? От 0 до 576px идет Extra small и блоки занимают всю ширину
@@CodeQuestRu да, понятно. Но у вас в одном моменте меньше 576пксилей стал уезжать экран и вы остановились зачем то, видимо что то работало не правильно
По началу экран съезжает, потому что макет еще не адаптивный и из блоков выпадает содержимое, которое не умещается в область просмотра. Мы решаем эту проблему, когда настраиваем адаптивность всех блоков
@@CodeQuestRu окей. Меня интересует когда можно использовать эту сетку? Во всех проэктах или определенных?
Ну я бы сказал так. Как и любой инструмент, он должен выбираться под задачи, а не задачи под инструмент. То есть не нужно пытаться подстраивать под Bootstrap все проекты, но он может сильно сократить время верстки там, где он подходит.
Чаще всего это макеты, которые изначально рисуются под какую-то сетку, или даже конкретно под сетку Bootstrap. В следующем видео я покажу, как можно настраивать эту сетку под себя.
Если вам нужна адаптивная сетка, вы просто берете готовую и не пишите ее с нуля =)
у меня не срабатывают классы gy-3 и тд
не знаю в чем причина(
осальное все работает.
почитала документацию, пишет "вертикальные отступы могут вызвать переполнение ниже в конце страницы. Если это происходит, вы добавляете оболочку вокруг с классом : оверфлоу-хидден"
я так сделала, но все равно не работает
Можете скинуть свой проект мне в личку VK, постараюсь посмотреть =)
как решил?
@@CodeQuestRu такая же проблема)
@@user-pi1bp9iy1w bootstrap версию надо новее, 5ю
Что то я не пойму когда мы пишим кол мд 4 это точка 768 почему тогда клиенты в трех колонках располагаются, . А точка останвки 992 там получается что шесть колонок Точка остановки 576 -2колонки, а вот точка останоки меньше 576 там как мы и писали -6 колонок
Ну считай всего теоретических колонок сетки 12. И мы указываем сколько колонок должен занимать элемент.
col-3 занимает 3 колонки, значит в одном ряду у нас поместится 4 таких элемента.
col-4 занимает 4 колонки, значит в одном ряду у нас поместится 3 таких элемента.
Как-то так =)
@@CodeQuestRu ВОт этом то и проблема я не понимаю ты пишишь
что col-3 занимает 3 колонки, значит в одном ряду у нас поместится 4 таких элемента.
Как это понять кол-3 значит 3 колонки откуда тогда там 4 элемента? Класс мд-4 точка остановки 768 это значит 4 колнки, Я немогу понять почему в этой точки остановки я вижу 3 колонки. Т.е 3 элемента сверху "клиенты" и 3 с низу. Не значит ли это что у нас в наличии только 3 колонки? Кол -3 значит же 3 колонки, Как туда могут попасть 4-е элемента? Я не понимаю Объясни. Я понимаю если мы указали мд-3 то там есть 3 колонки которые мы указали и в них должны быть элементы наши под названием клиенты И 9 колонок которые где то там еще но мы в них не указали какие то элементы, наличие и они там по умолчанию висят гдето 9 колонок и в них ничего нет. Как все это понять? Скинь мне макет я тебе почту написал
Просто разбей мысленно весь контейнер на 12 частей.
Для этих частей у нас есть 12 классов.
col-1 создает элемент в 1 часть (1/12), и в ряду может поместиться 12 таких элементов.
col-2 создает элемент в 2 части (2/12), и в ряду может поместиться 6 таких элементов.
col-3 создает элемент в 3 части (3/12), и в ряду может поместиться 4 таких элемента.
col-4 создает элемент в 4 части (4/12), и в ряду может поместиться 3 таких элемента.
col-6 создает элемент в 6 частей (6/12), и в ряду может поместиться 2 таких элемента.
col-12 создает элемент в 1 часть (12/12), и в ряду может поместиться 1 такой элемент.
Т.е. когда ты даешь элементу класс col-3, ты говоришь сколько места ему занимать, а не сколько элементов влезет в этот ряд. Не знаю как еще попробовать объяснить =)
@@CodeQuestRu Привет друг Кажется понятно. если я напишу col-md-3 то таких элементов на странице будетвыводиться 4 штуки что 3+3+3+3=12 Спасибо ты пролил свет истины ☀ ☝ Да пребудет с нами сила понимания сути вещей 🙏
@@user-pc8vs9jw2x Да, все так =)
Рад, что смог объяснить!
Привет что не так я вот пишу в боди
.body {
margin: 0;
font-size: 30px;
background-color: aqua;
@media ( max-width: 1000px) {
background-color: #blue;
}
@media ( max-width: 500px) {
background-color: #green;
}
}
но у меня нет препроцессоров я еще незнаю как там они работают. Почему у меня цвет не меняется?
Без препроцессоров нельзя использовать вложенность правил. И еще body это не класс, а просто селектор по тегу. На чистом CSS будет так:
body {
margin: 0;
font-size: 30px;
background-color: aqua;
}
@media ( max-width: 1000px) {
body {
background-color: #blue;
}
}
@media ( max-width: 500px) {
body {
background-color: #green;
}
}
@@CodeQuestRu Странно а почему я вот это скоприровал вставил а поменялся цвет только на аква а дальше когда уменьшаю размер цвет как был аква так и есть?
Только сейчас заметил, что еще цвета указаны не правильно. Перед строчными значениями не нужен символ решетка: #blue => blue, #green => green.
Возможно причина в этом =)
@@CodeQuestRu Точно ура заработало............ Так так так так так какой ты интересный человек, Еслиб у меня был такой друг, то я бы за месяц все выучил :) И устроился бы на работу :) А строчные то значения что имеется ввиду?
Ну CSS поддерживает:
1) Строчные значения цвета: black, green, blue и т.д.
2) RGB по типу rgb(0, 0, 255)
3) HEX по типу #00ffaa
Практикуйся и у тебя все получится. Главное, чтобы тебе это было интересно =)
а отступы между блоками в мобильной версии слишком большие
Возможно, но все это легко настраивается =)
Bootstrap еще жив?
Конечно =)
он еще и развивается, а чем он плох?
фоновая музыка сделала бы просмотр еще приятнее, но уроки все ровно топчик.