Bootstrap сетка. Подробное руководство

Подписаться 303 тыс.

Просмотров 242 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Всем привет, друзья! Bootstrap неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк в средних, малых и крупных проектах. Bootstrap важен тем, что имеет поддержку всех современных браузеров и дает более удобную, управляемую и гибкую систему для разработчиков, нежели классическая модель разметки без использования фреймворка.
Страница урока: webdesign-master.ru/blog/html...
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

3 фев 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 203

@wdm Месяц назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

@AnVaSKLetsPlay 6 лет назад

Считаю твои уроки одними из лучших на youtube. Спасибо за труд.

@wdm 6 лет назад

Спасибо!

@remyanderson8526 2 года назад

@Jerry Lachlan Instablaster :)

@debasher 5 лет назад

Дошёл до 20 минуты и не смог сдержаться. Я просто кайфую от таких уроков. Подача материала просто на высшем уровне, объясняется всё от А до Я, про складывание столбцов даже не знал. Побольше бы таких уроков и спасибо за такую кропотливую работу. Всем добра.

@nikitos23kh 6 лет назад

Побольше бы такие людей, которые четко без воды и понятным языком доносят информацию. Благодарю за уроки!

@ProstoSvidetel 4 года назад

О-о-очень подробное и наглядное объяснение! Наконец-то становится понятна картина в целом. Отдельное спасибо за наглядность примеров 🤝

@oleksandrmorozov3051 6 лет назад

Спасибо, крутой обзор. Ждем джедая!!

@Andrei_Porsev 6 лет назад

Жду с не терпеньем следующие уроки, о которых ты упоминал в этом уроке. Спасибо за труды.

@web4554 6 лет назад

Спасибо за Урок, Алексей) У Вас замечательные уроки)

@mcswplayon987 5 лет назад

Неплохо. Очень и очень круто, спасибо за полезную информацию. Без воды, все по делу)

@user-et5bc3uo2n 5 лет назад

Бро! Восхитительнейшая подача материала! Благодаря твоему видео, получилось сдвинуться с мертвой точки! У тебя талант к преподаванию, прокачивай его. Желаю громадных успехов!

@sea-lucky7143 6 лет назад

Спасибо большое Алексей, как всегда качественно, понятно и на высоте! Ждём новых видосов :)

@justspartak 4 года назад

Хорошая подача материала. Всё доходчиво, и наглядно. Cпасибо!

@tatyanadovzhich 6 лет назад

ОГРОМНЕЙШЕЕ ВАМ СПАСИБО!!!! за все Ваши уроки. Очень подробное, толковое описание всех тонкостей и нюансов верстки. Пожалуйста, продолжайте в том же духе! Вы делаете мир умнее, а значит и добрее :)

@romanshvietsov8026 3 года назад

Огромное спасибо,делай побольше таких уроков!

@user-fu1wg2mj7h 6 лет назад

Очень понравился материал! После этого обучающего видео смотрел как верстают макет сайта. Все было предельно ясно.

@mikhailvolosovich135 6 лет назад

Ты очень хорошо ведёшь ,за два твоих ролика ,я понял больше чем через неделю просмотров .

@samurai-csgo 6 лет назад

Волшебно! Особенно вертикальное выравнивание порадовало )

@user-fz1ji3ol7h 3 года назад

Моё уважение, парень даже видео ускоряет в момент написания кода, а это огромная работа для 40 минутного видео.

@dimanazdratenko 6 лет назад

Огромное спасибо, наконец-то все по полочкам разложено :)

@romanpityul8805 4 года назад

Спасибо Огромное!! Очень доходчиво все объясняешь!! Раньше как-то bootstrap не заходил мне..а после твоих уроков прям влетел))

@nekchich5565 6 лет назад

Просто и понятно ни капли воды , респект.

@olatera 6 лет назад

господи, спасибо золотой человег!!!! наконец-то нормальное видео на русском по сетке для новичков.

@krassnow8963 4 года назад

Спасибо, как всегда, четко и по делу) Легко воспринимается, когда уже верстал и на бутстрап 3 и на флексах))

@dumakisa 6 лет назад

Алексей как всегда на высоте! Отдельное спасибо за "пикселей" вместо "пикселов" )

@user-fm7mm6km1w 5 лет назад

Спасибо за урок. Ты отличный учитель.

@SuperKatSSS 6 лет назад

Чётко, понятно, наглядно. Отличный обзор, спасибо!

@parahumanoid 3 года назад

Здорево! Материал, ясность изложения, постоянство терминологии, наглядность примеров, ярко демонстрирующих конкретную суть поведения так, что не спутать с другими возможными причинами, выговор, тембр, отсутствие долбанной музыки и скомканных акцентов. Просто премиумный уровень. Хоть сейчас подавай уроки в PluralSight, даже лучше. И главное, темп подачи материала подобран хорошо. Расчет на новичка в бутстрапе, но не с интеллектом табуретки, как некоторые объясняют азы по полчаса. Четко, в тему, и -- поехали дальше. Просто прекрасно.

@user-kc8sl1ky1q 6 лет назад

Добрый день. Спасибо за Ваш труд.

@XMelentino 5 лет назад

Шикарный урок, спасибо большое!

@user-jw8sm9ru5d 5 лет назад

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

@Fokusnikd 5 лет назад

Спасибо за потрясающий гайд.

@GGSoft2009 4 года назад

Ну спасибо огромное!!!! Вопросов не остается!!! Браво!!!!

@user-jv6sj4yd7u 4 года назад

Супер. Лучший урок по этой теме. Спасибо.

@asetaseett3334 6 лет назад

Спасибо за урок. Продолжайте в том же духе!

@guestalex 4 года назад

Блин, лучший урок, что я видел по bootstrap

@ingvarishchenko1041 6 лет назад

ОГРОМНОЕ СПАСИБО! ВСЕ ОЧЕНЬ ПОДРОБНО И ПОНЯТНО!

@whyrabbitone 6 лет назад

Алексей, очень круто объясняешь, разложил всё прямо ОТ и ДО, теперь стало более понятно, как работать с данной сеткой, большое тебе спасибо) Когда планируешь джедая верстки на bs4?

@mishasv1490 5 лет назад

Мега полезное видео, наверное даже самое полезное по bootstrap 4

@andreys1099 5 лет назад

Огромное спасибо за видео! Все очень подробно и понятно :)

@yrsafam 6 лет назад

Как всегда шикарно ) спасибо :)

@user-fh1gr5li2r Год назад

Благодарю за ценную информацию!

@user-th7so5xc3k 6 лет назад

Алексей, из всех блогеров, ты объясняешь лучше всех!!! Побольше уроков,а то скучнова-то

@olisy87 4 года назад

Большое спасибо за видео! Теперь я понимаю что это за ряды и колонки во фреймворках и как их использовать.

@vwusr2533 6 лет назад

Мегареспект тебе Алексей, 2 дня искал способ как изменить ширину контейнера в новом бутстрап, а оказалось нужно использовать 4-й шаблон для верстки и все там вшито.

@vitamedovshchuk8369 4 года назад

Спасибо за шикарный урок)

@mrnobody3739 2 года назад

просто и доходчиво, спасибо, урок прям супер

@serhiymelnyk9875 6 лет назад

Спасибо за Ваш труд !!!

@user-bm4mm7zd4c 3 года назад

спасибо большое за твои труды, все доступно))

@user-tg1ge6oi2v 3 года назад

Очень структурировано спасибо !

@chistowick 3 года назад

Отличный материал, спасибо!

@psihonort9275 6 лет назад

Спасибо за руководство, годнота !

@user-yk2nw8en3p 6 лет назад

Суперское видео!

@sergeykireev1431 5 лет назад

Отличные уроки хорошая внятная речь

@user-pn6it8nh7y 4 года назад

Большое спасибо! очень доступно объяснили

@user-gu1fb7nu2e 5 лет назад

Видео - супер!!! Спасибо!

@user-kz5go4mp8w 4 года назад

Спасибо друг, ты реально крут)

@dailyvideo1593 Год назад

Офигенский видос)) Лайк!

@suspiciouscandy1678 4 года назад

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

@user-mu4gp8ku4q 3 года назад

дружище, верстаю сайт с другом на бутстрапе, спасибо большое от души что объяснил

@egoregor3024 5 лет назад

ТЫ.ПРОСТО.ЛУЧШИЙ.

@salinderru 6 лет назад

спасибо. супер обьяснение.

@chingiz_mammadov 5 лет назад

Вообще нормально обьяснил. Мужик!

@ivand7299 6 лет назад

Спасибо прекрасно все обьяснил

@TheWorldPeace 4 года назад

Спасибо за урок!

@vl8224 3 года назад

Спасибо. Было интересно

@user-kd4hj2tr3n 6 лет назад

хороший видос, красиво оформил

@TheFryOS 6 лет назад

Лайкос, пили ещё.

@mamita5595 4 года назад

Ну вообще все круто. Молодец

@user-rt9vp1zw1p 6 лет назад

спасибо за подробный урок, Алексей. Не могу найти видео про компьютер и обстановку рабочего места. хотелось бы услышать ваши мысли по поводу организации рабочего места: стол, стул и т. п.

@Kensidan 6 лет назад

Спасибо Алексей

@ZurabPro 6 лет назад

Мне Grid больше понравился, расскажи как нибудь сравнение, своё мнение, думаю было бы интересно

@NonToxicTV 6 лет назад

Алексей спасибо Вам! Очень высокий уровень! приятно, понятно и полезно! Можете пожалуйста сориентировать когда выйдет видео по 4-му шаблону?

@user-lf4qm1od6x 5 лет назад

Спасибо большое!!!

@nifler111 4 года назад

очень качественный урок.

@40par 4 года назад

Спасибо, очень полезно

@tipOdessa 6 лет назад

крутое видео! лайк и подписка! спасибо

@Andrey-zv1kc 6 лет назад

очень классный видос,посоветуй пожалуйста как лучше делать навигацию в хедере с выпадающими менюшками,когда при наведении мышки на кнопку с навигации появляется еще одна навигация и тд.. я делаю просто display none ,а через hover меняю значение. хорошая ли это практика?

@EdGerfanov 6 лет назад

спасибо за видео!:)

@user-uc4fc6iy8e 4 года назад

Просто наглядно спс...

@romansharpe1131 5 лет назад

Хороший урок

@Ber1al221 6 лет назад

Спасибо за руководство. Есть такой вопрос: стоит ли использовать встроенные компоненты Бутстрап или достаточно только сетки.

@user-cw7ne4dv2s 3 года назад

Супер! 100 лайков!

@11-april 4 года назад

Спасибо!

@headspase2585 4 года назад

Здравствуйте, очень полезный урок, можно пожалуйста ссылку на следующий?

@wdm 4 года назад

Здравствуйте. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lOXz0ZYuTqI.html

@Eduard02834 4 года назад

spasibo prosto respect!

@bringonor6755 6 лет назад

Алексей сделай Flex-box для самых малых будет многим интересно

@nikitadenisov166 5 лет назад

Долго искал про это видео . А то на бутстрапе 3.7.6 надоела верстать

@MAXAMIRAX 5 лет назад

Привет, Алексей! Отличный канал! Скажите пожалуйста, в какой программе или на каком сайте вы пишете код и сразу же видите результат? Не смог найти источник. Спасибо за ответ

@leitohardy9679 5 лет назад

Спасибо.

@avin365 5 лет назад

Огромное Вам спасибо! За эти 45 минут Bootstrap перестал быть страшным зверем))

@tigranvardanyan5044 5 лет назад

молодец чувак

@andriibabenko1644 6 лет назад

Було цікаво. Дякую)

@maksymdunaev6020 3 года назад

ГЕНИЙ

@user-dz1uq5sd5b 4 года назад

Лайк, подписка. Однозначно. Решительно. Бесповоротно. О-о-очень грамотная и доступная подача. Просмотр одного этого ролика заполнил отдельные непонимания структуры сетки и оказался полезнее нескольких прочтений соответствующего раздела на сайте бутстрапа.

@user-pd6uw5yl2z 2 года назад

Спасибо

@dezu805 6 лет назад

спасибо, а если мне нужно изменить кол-во колонок на других разрешениях? например, из четырёх колонок сделать шесть на разрешении больше 1600 (не 1200) и например, из двух сделать одну, на разрешении меньше 450 (не 576)? в таких случаях bootstrap подходит?

@limeya4099 6 лет назад

супер!спасибо.how old are you?

@user-ep5vj8dg5r 6 лет назад

Спасибо за подробное видео. У меня вопрос. Пользовался еще альфа версией сетки в том году, конечно удобнее, чем 3 версия. Но использовал только сетку, да и вообще подключается порой столько классов не нужных, как по мне это лишь загружает сайт. Вы убираете те что не используете из самих файлов или они остаются? Конечно используя sass гораздо проще, но всеравно остается немало классов, которые не будут использоваться с вероятностью 98%. Меня всегда этот вопрос волновал в бутстрапе.

@wdm 6 лет назад

42kb в сжатом CSS файле - это в 10 раз меньше, чем картинка товара на вашей странице. Это излишний перфекционизм, который ни на что не влияет, кроме вашего спокойного сна. Что касается использования только сетки, в проектах она у меня используется на полную. Каждый килобайт. Вы имеете ввиду сетку или весь Bootstrap?

@thesijisgame6590 6 лет назад

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

@wdm 6 лет назад

TheSijisGame container-fluid