Bootstrap сетка. Подробное руководство
HTML-код
- Опубликовано: 3 фев 2018
- Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Всем привет, друзья! Bootstrap неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк в средних, малых и крупных проектах. Bootstrap важен тем, что имеет поддержку всех современных браузеров и дает более удобную, управляемую и гибкую систему для разработчиков, нежели классическая модель разметки без использования фреймворка.
Страница урока: webdesign-master.ru/blog/html...
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Моё уважение, парень даже видео ускоряет в момент написания кода, а это огромная работа для 40 минутного видео.
Считаю твои уроки одними из лучших на youtube. Спасибо за труд.
Спасибо!
@Jerry Lachlan Instablaster :)
Дошёл до 20 минуты и не смог сдержаться. Я просто кайфую от таких уроков.
Подача материала просто на высшем уровне, объясняется всё от А до Я, про складывание столбцов даже не знал.
Побольше бы таких уроков и спасибо за такую кропотливую работу.
Всем добра.
Спасибо, крутой обзор. Ждем джедая!!
Здорево! Материал, ясность изложения, постоянство терминологии, наглядность примеров, ярко демонстрирующих конкретную суть поведения так, что не спутать с другими возможными причинами, выговор, тембр, отсутствие долбанной музыки и скомканных акцентов. Просто премиумный уровень. Хоть сейчас подавай уроки в PluralSight, даже лучше. И главное, темп подачи материала подобран хорошо. Расчет на новичка в бутстрапе, но не с интеллектом табуретки, как некоторые объясняют азы по полчаса. Четко, в тему, и -- поехали дальше. Просто прекрасно.
Побольше бы такие людей, которые четко без воды и понятным языком доносят информацию.
Благодарю за уроки!
Жду с не терпеньем следующие уроки, о которых ты упоминал в этом уроке. Спасибо за труды.
О-о-очень подробное и наглядное объяснение! Наконец-то становится понятна картина в целом. Отдельное спасибо за наглядность примеров 🤝
Неплохо. Очень и очень круто, спасибо за полезную информацию. Без воды, все по делу)
Спасибо за Урок, Алексей) У Вас замечательные уроки)
Просто и понятно ни капли воды , респект.
Хорошая подача материала. Всё доходчиво, и наглядно. Cпасибо!
Огромное спасибо,делай побольше таких уроков!
Огромное спасибо, наконец-то все по полочкам разложено :)
Добрый день. Спасибо за Ваш труд.
Ты очень хорошо ведёшь ,за два твоих ролика ,я понял больше чем через неделю просмотров .
Спасибо большое Алексей, как всегда качественно, понятно и на высоте! Ждём новых видосов :)
Бро! Восхитительнейшая подача материала! Благодаря твоему видео, получилось сдвинуться с мертвой точки! У тебя талант к преподаванию, прокачивай его. Желаю громадных успехов!
Очень понравился материал! После этого обучающего видео смотрел как верстают макет сайта. Все было предельно ясно.
Спасибо за урок. Ты отличный учитель.
Шикарный урок, спасибо большое!
Спасибо за потрясающий гайд.
Спасибо, как всегда, четко и по делу) Легко воспринимается, когда уже верстал и на бутстрап 3 и на флексах))
Чётко, понятно, наглядно. Отличный обзор, спасибо!
Волшебно! Особенно вертикальное выравнивание порадовало )
ОГРОМНОЕ СПАСИБО! ВСЕ ОЧЕНЬ ПОДРОБНО И ПОНЯТНО!
ОГРОМНЕЙШЕЕ ВАМ СПАСИБО!!!! за все Ваши уроки. Очень подробное, толковое описание всех тонкостей и нюансов верстки. Пожалуйста, продолжайте в том же духе! Вы делаете мир умнее, а значит и добрее :)
Супер. Лучший урок по этой теме. Спасибо.
Алексей, очень круто объясняешь, разложил всё прямо ОТ и ДО, теперь стало более понятно, как работать с данной сеткой, большое тебе спасибо)
Когда планируешь джедая верстки на bs4?
Спасибо Огромное!! Очень доходчиво все объясняешь!! Раньше как-то bootstrap не заходил мне..а после твоих уроков прям влетел))
господи, спасибо золотой человег!!!! наконец-то нормальное видео на русском по сетке для новичков.
Ну спасибо огромное!!!! Вопросов не остается!!! Браво!!!!
Спасибо за урок. Продолжайте в том же духе!
Огромное спасибо за видео! Все очень подробно и понятно :)
Благодарю за ценную информацию!
просто и доходчиво, спасибо, урок прям супер
Алексей как всегда на высоте! Отдельное спасибо за "пикселей" вместо "пикселов" )
Спасибо за шикарный урок)
Как всегда шикарно ) спасибо :)
Отличный урок! Сам учусь на веб дизайнера,но знаний на курсах дают недостаточно одну базу,а в твоих уроках можно более детально углубиться.Хорошее дело делаешь,продолжай в том же духе!
спасибо большое за твои труды, все доступно))
Спасибо за Ваш труд !!!
Мега полезное видео, наверное даже самое полезное по bootstrap 4
Очень структурировано спасибо !
Блин, лучший урок, что я видел по bootstrap
Спасибо за руководство, годнота !
Большое спасибо! очень доступно объяснили
Отличный материал, спасибо!
Большое спасибо за видео! Теперь я понимаю что это за ряды и колонки во фреймворках и как их использовать.
Спасибо друг, ты реально крут)
Спасибо прекрасно все обьяснил
спасибо. супер обьяснение.
Вообще нормально обьяснил. Мужик!
Видео - супер!!! Спасибо!
Мегареспект тебе Алексей, 2 дня искал способ как изменить ширину контейнера в новом бутстрап, а оказалось нужно использовать 4-й шаблон для верстки и все там вшито.
Алексей, из всех блогеров, ты объясняешь лучше всех!!! Побольше уроков,а то скучнова-то
ТЫ.ПРОСТО.ЛУЧШИЙ.
Спасибо большое за урок! С английским дружу, мануал читаю. Но на своем языке приятней :)
Отличные уроки хорошая внятная речь
дружище, верстаю сайт с другом на бутстрапе, спасибо большое от души что объяснил
Суперское видео!
Храни тебя Бернерс-Ли!
Спасибо. Было интересно
Спасибо за урок!
Ну вообще все круто. Молодец
Спасибо Алексей
Офигенский видос)) Лайк!
Мне Grid больше понравился, расскажи как нибудь сравнение, своё мнение, думаю было бы интересно
очень качественный урок.
хороший видос, красиво оформил
Лайкос, пили ещё.
очень классный видос,посоветуй пожалуйста как лучше делать навигацию в хедере с выпадающими менюшками,когда при наведении мышки на кнопку с навигации появляется еще одна навигация и тд..
я делаю просто display none ,а через hover меняю значение. хорошая ли это практика?
Спасибо большое!!!
Спасибо, очень полезно
крутое видео! лайк и подписка! спасибо
спасибо за подробный урок, Алексей. Не могу найти видео про компьютер и обстановку рабочего места. хотелось бы услышать ваши мысли по поводу организации рабочего места: стол, стул и т. п.
Алексей спасибо Вам! Очень высокий уровень! приятно, понятно и полезно! Можете пожалуйста сориентировать когда выйдет видео по 4-му шаблону?
Спасибо за руководство. Есть такой вопрос: стоит ли использовать встроенные компоненты Бутстрап или достаточно только сетки.
Просто наглядно спс...
spasibo prosto respect!
ГЕНИЙ
Хороший урок
Спасибо!
Супер! 100 лайков!
Долго искал про это видео . А то на бутстрапе 3.7.6 надоела верстать
Привет, Алексей! Отличный канал! Скажите пожалуйста, в какой программе или на каком сайте вы пишете код и сразу же видите результат? Не смог найти источник. Спасибо за ответ
спасибо за видео!:)
Спасибо.
Спасибо за урок! Вопросы:
1. В каких случаях используется .container? Один раз, после body или для каждой секции?
2. Есть ли случаи, когда внутри .row нам необходимо использовать .container?
3. Допустимо ли использовать .container, но внутрь не вкладывать .row, а сразу вкладывать какие-то другие элементы?
4. Если я использую например бутстраповский Navbar или другие готовые компоненты, то мне нужно их оборачивать в .container и .row или нет?
5. Внутри готовых компонентов, для упорядочивания содержимого, можно делать ряды и колонки, или нет? И вообще, стоит ли извращаться с готовыми компонентами, или лучше делать тот же Navbar самому?
1. Контейнер используется тогда, когда в нём есть необходимость.
2. В Bootstrap такие случаи имеют место быть, но практической пользы в этом не вижу.
3. .col* должны быть в .row
4. Не использую компоненты Bootstrap, возможно ответ есть в документации. Однако думаю, что ответ №1 актуален и для этого пункта.
5. Компоненты не использую, думаю они более полезны для быстрого прототипирования, программистам например или для бэкенда.
Большое спасибо!
WebDesign Master красавчик на все ответил парню!!! Вот это я понимаю с душой относиться к своему ремеслу!!! Так держать,успехов во всем 👌
Вот WebDesign Master молодец! Почти все RUclips'ры на вопросы не отвечают, а вот когда их хвалят, говорят что они молодцы, говорят спасибо за уроки, сразу же они это видят и пишут "Рад помочшь)", "Да не за что)" и все такое. А WebDesign Master на все вопросы ответил. *ТАК ДЕРЖАТЬ!*
Спасибо
Спасибо за подробное видео. У меня вопрос. Пользовался еще альфа версией сетки в том году, конечно удобнее, чем 3 версия. Но использовал только сетку, да и вообще подключается порой столько классов не нужных, как по мне это лишь загружает сайт. Вы убираете те что не используете из самих файлов или они остаются? Конечно используя sass гораздо проще, но всеравно остается немало классов, которые не будут использоваться с вероятностью 98%. Меня всегда этот вопрос волновал в бутстрапе.
42kb в сжатом CSS файле - это в 10 раз меньше, чем картинка товара на вашей странице. Это излишний перфекционизм, который ни на что не влияет, кроме вашего спокойного сна. Что касается использования только сетки, в проектах она у меня используется на полную. Каждый килобайт. Вы имеете ввиду сетку или весь Bootstrap?
молодец чувак
Алексей сделай Flex-box для самых малых будет многим интересно
А как сделать чтобы от md разрешения например логотип был слево
А если разрешении меньше он вставал по центру, а не прижимался к левому краю ?
спасибо
Алексей, в первую очередь спасибо за урок. Такой вопрос, будете ли вы на основе OptimizedHTML 4 делать сборку стремящуюся к 100% показателям в сервисе google page speed? Т.е. с инлайнывыми подключениями стилей и т.п.
Google Pagesped в настоящее время претерпел множество изменений. Появился интеллектуальный анализ на основании реальных показателей эффективности. Поэтому 100% теперь - это просто цифра, которая никак не повлияет на результат ранжирования. А вот реальная скорость работы сайта - это намного важнее. Даже если ваш новый сайт набирает всего 75% в первых тестах Google Pagespeed, реальные показатели спустя некоторое время могут быть или выше или ниже, в зависимости от того, насколько эффективен ваш сайт в реальном использовании, а не в синтетическом тесте. И ТОЛЬКО ТОГДА, когда ваш сайт получит реальную оценку (несколько месяцев), Google может изменить позиции в поисковой выдаче на основании этого показателя.
Я вас понял. Спасибо.
А как вы тестируете реальную скорость работы сайта?
В браузере ))
добрый день. хотел бы уточнить по поводу картинок. вы показали как отключить падинги. можно ли отключить падинги так чтоб колонки растягивались на всю ширину экрана?
TheSijisGame container-fluid
Було цікаво. Дякую)
спасибо, а если мне нужно изменить кол-во колонок на других разрешениях? например, из четырёх колонок сделать шесть на разрешении больше 1600 (не 1200) и например, из двух сделать одну, на разрешении меньше 450 (не 576)? в таких случаях bootstrap подходит?