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

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 202

  • @wdm
    @wdm  21 день назад +1

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

  • @debasher
    @debasher 5 лет назад +63

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

  • @AnVaSKLetsPlay
    @AnVaSKLetsPlay 7 лет назад +311

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

    • @wdm
      @wdm  7 лет назад +24

      Спасибо!

    • @remyanderson8526
      @remyanderson8526 3 года назад

      @Jerry Lachlan Instablaster :)

  • @parahumanoid
    @parahumanoid 3 года назад +2

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

  • @nikitos23kh
    @nikitos23kh 6 лет назад +14

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

  • @КимГрей-г9г
    @КимГрей-г9г 4 года назад +1

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

  • @tatyanadovzhich
    @tatyanadovzhich 7 лет назад +4

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

  • @Астролит
    @Астролит 6 лет назад +6

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

  • @ProstoSvidetel
    @ProstoSvidetel 5 лет назад +7

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

  • @АлександрЧасовников-щ3ч

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

  • @mikhailvolosovich135
    @mikhailvolosovich135 7 лет назад +3

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

  • @ministersport
    @ministersport 4 года назад +3

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

  • @АртемКосых-г3ъ
    @АртемКосых-г3ъ 6 лет назад +1

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

  • @Andrei_Porsev
    @Andrei_Porsev 7 лет назад +4

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

  • @olatera
    @olatera 6 лет назад +1

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

  • @web4554
    @web4554 7 лет назад +2

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

  • @justspartak
    @justspartak 5 лет назад +2

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

  • @Fokusnikd
    @Fokusnikd 5 лет назад +1

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

  • @suspiciouscandy1678
    @suspiciouscandy1678 4 года назад +1

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

  • @oleksandrmorozov3051
    @oleksandrmorozov3051 7 лет назад +24

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

  • @dimanazdratenko
    @dimanazdratenko 7 лет назад +2

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

  • @ingvarishchenko1041
    @ingvarishchenko1041 6 лет назад +1

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

  • @mcswplayon987
    @mcswplayon987 6 лет назад +4

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

  • @krassnow8963
    @krassnow8963 5 лет назад +3

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

  • @dailyvideo1593
    @dailyvideo1593 2 года назад +1

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

  • @GGSoft2009
    @GGSoft2009 5 лет назад

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

  • @samurai-csgo
    @samurai-csgo 7 лет назад

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

  • @nekchich5565
    @nekchich5565 6 лет назад

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

  • @Андрей-е4ы2и
    @Андрей-е4ы2и 5 лет назад +1

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

  • @vwusr2533
    @vwusr2533 7 лет назад

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

  • @sea-lucky7143
    @sea-lucky7143 7 лет назад +1

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

  • @АртемТабаков-б5т
    @АртемТабаков-б5т 6 лет назад

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

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

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

  • @romanpityul8805
    @romanpityul8805 5 лет назад

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

  • @ЕгорЗверев-й8к
    @ЕгорЗверев-й8к 5 лет назад

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

  • @maksymdunaev6020
    @maksymdunaev6020 3 года назад +2

    ГЕНИЙ

  • @АндрейРождественский-н8ъ

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

  • @egoregor3024
    @egoregor3024 6 лет назад

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

  • @ВладСтоляров-ю6ъ
    @ВладСтоляров-ю6ъ 3 года назад

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

  • @МакарКорнилов-ц5к
    @МакарКорнилов-ц5к 6 лет назад +1

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

  • @sergeykireev1431
    @sergeykireev1431 6 лет назад

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

  • @mrnobody3739
    @mrnobody3739 3 года назад +1

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

  • @chingiz_mammadov
    @chingiz_mammadov 6 лет назад

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

  • @АндрейЛисецкий-ч1д
    @АндрейЛисецкий-ч1д 4 года назад +1

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

  • @artemsergeev4833
    @artemsergeev4833 3 года назад +1

    Храни тебя Бернерс-Ли!

  • @mishasv1490
    @mishasv1490 6 лет назад

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

  • @ЕвгенийМельников-е7у
    @ЕвгенийМельников-е7у 4 года назад +1

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

  • @ВасилинаСергієнко-л3л

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

  • @mamita5595
    @mamita5595 5 лет назад

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

  • @SuperKatSSS
    @SuperKatSSS 7 лет назад

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

  • @vitamedovshchuk8369
    @vitamedovshchuk8369 5 лет назад +1

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

  • @asetaseett3334
    @asetaseett3334 7 лет назад

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

  • @Школа1СДмитрияМедведкова

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

  • @andreys1099
    @andreys1099 6 лет назад +1

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

  • @nifler111
    @nifler111 5 лет назад

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

  • @olisy87
    @olisy87 5 лет назад +1

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

  • @whyrabbit1
    @whyrabbit1 7 лет назад +6

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

  • @Dmitriy-k2z
    @Dmitriy-k2z 6 лет назад

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

  • @chistowick
    @chistowick 4 года назад

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

  • @avin365
    @avin365 6 лет назад +1

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

  • @vl8224
    @vl8224 4 года назад

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

  • @АлександрКонев-х6п
    @АлександрКонев-х6п 5 лет назад +1

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

  • @serhiymelnyk9875
    @serhiymelnyk9875 7 лет назад

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

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

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

  • @ZurabPro
    @ZurabPro 6 лет назад +7

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

  • @yrsafam
    @yrsafam 7 лет назад

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

  • @psihonort9275
    @psihonort9275 6 лет назад

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

  • @front-end14
    @front-end14 5 лет назад

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

  • @ivand7299
    @ivand7299 6 лет назад +1

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

  • @andriibabenko1644
    @andriibabenko1644 7 лет назад

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

  • @МаксимДубенко-в4т
    @МаксимДубенко-в4т 7 лет назад +1

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

  • @ЕвгенийКузнецов-ь7ъ

    Все очень доступно и понятно. Спасибо!

  • @nikitadenisov166
    @nikitadenisov166 6 лет назад +2

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

  • @dezu805
    @dezu805 6 лет назад

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

  • @alexkardone3809
    @alexkardone3809 7 лет назад +17

    Спасибо за урок! Вопросы:
    1. В каких случаях используется .container? Один раз, после body или для каждой секции?
    2. Есть ли случаи, когда внутри .row нам необходимо использовать .container?
    3. Допустимо ли использовать .container, но внутрь не вкладывать .row, а сразу вкладывать какие-то другие элементы?
    4. Если я использую например бутстраповский Navbar или другие готовые компоненты, то мне нужно их оборачивать в .container и .row или нет?
    5. Внутри готовых компонентов, для упорядочивания содержимого, можно делать ряды и колонки, или нет? И вообще, стоит ли извращаться с готовыми компонентами, или лучше делать тот же Navbar самому?

    • @wdm
      @wdm  7 лет назад +24

      1. Контейнер используется тогда, когда в нём есть необходимость.
      2. В Bootstrap такие случаи имеют место быть, но практической пользы в этом не вижу.
      3. .col* должны быть в .row
      4. Не использую компоненты Bootstrap, возможно ответ есть в документации. Однако думаю, что ответ №1 актуален и для этого пункта.
      5. Компоненты не использую, думаю они более полезны для быстрого прототипирования, программистам например или для бэкенда.

    • @alexkardone3809
      @alexkardone3809 7 лет назад +3

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

    • @Иван-я1л
      @Иван-я1л 6 лет назад +5

      WebDesign Master красавчик на все ответил парню!!! Вот это я понимаю с душой относиться к своему ремеслу!!! Так держать,успехов во всем 👌

    • @_-s.narekhovoyiexpayr-_3794
      @_-s.narekhovoyiexpayr-_3794 6 лет назад +1

      Вот WebDesign Master молодец! Почти все RUclips'ры на вопросы не отвечают, а вот когда их хвалят, говорят что они молодцы, говорят спасибо за уроки, сразу же они это видят и пишут "Рад помочшь)", "Да не за что)" и все такое. А WebDesign Master на все вопросы ответил. *ТАК ДЕРЖАТЬ!*

  • @АндрейКуприянов-н8в

    Добрый день! Поясните пожалуйста, при написании такого когда:
    col-8
    col-4
    на всех разрешениях экрана от md(768px) и ВЫШЕ 1-ая ячейка будет занимать 8 из 12, а 2-ая 4 из 12 ячеек или только на разрешении md(768px) 1-ая ячейка будет занимать 8 из 12, а 2-ая 4 из 12, а при переходе от md на lg(или на sm) размер ячеек будет 6 из 12 ?

  • @Алексей-ю2и2ж
    @Алексей-ю2и2ж 7 лет назад

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

  • @kidsgame5274
    @kidsgame5274 4 года назад

    Добрый вечер . Подскажите как сделать так , чтобы при уменьшении ширины браузера колонки не выстраивалось вряд вертикально , а допустим была минимальная ширина колонки что ли ?

  • @ГеннадийПозднухов
    @ГеннадийПозднухов 4 года назад

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

  • @salinderru
    @salinderru 7 лет назад +3

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

  • @Andrey-zv1kc
    @Andrey-zv1kc 7 лет назад +1

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

  • @Kensidan
    @Kensidan 7 лет назад

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

  • @ohospade
    @ohospade 7 лет назад +16

    А я Ваши уроки считаю не одними из лучших, а бесспорно лучшими на русском языке. Спасибо, что не скупитесь делиться знаниями!

  • @vovshke
    @vovshke 6 лет назад +2

    Жаль что нельзя два лайка поставить.

  • @ihmevehje1372
    @ihmevehje1372 6 лет назад

    Здравствуйте. Не подскажете - какой редактор использовался при создании этого видео, и как освоить сокращения при написании, чтобы код трансформировался так, как у Вас на видео (я так понимаю, это особенности редактора).

    • @wdm
      @wdm  6 лет назад +1

      Здравствуйте.
      ruclips.net/video/RfFtACtO998/видео.html
      ruclips.net/video/JSGPd1E16-o/видео.html

  • @erdauletbayangali7470
    @erdauletbayangali7470 5 лет назад +1

    Ждем джедай верстки 8 с нетерпением

    • @wdm
      @wdm  Год назад +1

      Здравствуйте. Джедай верстки 8 уже на канале: ruclips.net/video/3PzzZ5eHHig/видео.html

  • @gurudk3378
    @gurudk3378 6 лет назад

    Подскажите пожалуйста, как изменить размер .container? Например, мне нужно ширину в 1580px.

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

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

  • @VladHorpynych
    @VladHorpynych 7 лет назад

    Алексей, нужна ваша помощь по фреймворку Unyson!
    Как с вами можно связаться, помимо комментов на ютубе?

  • @EduardMalxa
    @EduardMalxa 4 года назад

    spasibo prosto respect!

  • @МаксимСиндели
    @МаксимСиндели 7 лет назад

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

  • @razumniy
    @razumniy 6 лет назад

    Подскажите как делать перезагрузку страницы автоматически после сохранения Ctrl+S// это скрипт какой-то?

  • @timdjol
    @timdjol 7 лет назад +1

    Заметил в gulp task нету image-min. По вашему мнению какой метод эффективный для сжатия изображений gulp image min или сервисом tinypng?

    • @wdm
      @wdm  7 лет назад +2

      Для меня лучший вариант на данный момент - TinyPNG для PS. imagemin полезен для сжатия больших объемов изображений. Тут двоякая ситуация. Если вы планируете использовать CMS в дальнейшем или фреймворк (98% вероятности) - сжатие на стороне Gulp смысла не имеет, так как всё равно придется настраивать вашу CMS на сжатие изображений. Если у вас статичные сайты (как в моём случае) - лучше использовать TinyPNG или плагин для Photoshop.
      Однако у меня есть сайт, где очень много изображений, здесь действительно лучше запустить Gulp таск и оптимизировать все изображения скопом, обрезая и добавляя ватермарк по ходу дела.
      Такие выводы.

    • @timdjol
      @timdjol 7 лет назад

      Спасибо за ответ

  • @TheFryOS
    @TheFryOS 7 лет назад

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

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

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

    • @wdm
      @wdm  4 года назад +1

      Здравствуйте. ruclips.net/video/lOXz0ZYuTqI/видео.html

  • @МаксимЖаринов-х3ю
    @МаксимЖаринов-х3ю 5 лет назад

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

  • @mostbest88
    @mostbest88 7 лет назад +1

    Алексей, в первую очередь спасибо за урок. Такой вопрос, будете ли вы на основе OptimizedHTML 4 делать сборку стремящуюся к 100% показателям в сервисе google page speed? Т.е. с инлайнывыми подключениями стилей и т.п.

    • @wdm
      @wdm  7 лет назад +1

      Google Pagesped в настоящее время претерпел множество изменений. Появился интеллектуальный анализ на основании реальных показателей эффективности. Поэтому 100% теперь - это просто цифра, которая никак не повлияет на результат ранжирования. А вот реальная скорость работы сайта - это намного важнее. Даже если ваш новый сайт набирает всего 75% в первых тестах Google Pagespeed, реальные показатели спустя некоторое время могут быть или выше или ниже, в зависимости от того, насколько эффективен ваш сайт в реальном использовании, а не в синтетическом тесте. И ТОЛЬКО ТОГДА, когда ваш сайт получит реальную оценку (несколько месяцев), Google может изменить позиции в поисковой выдаче на основании этого показателя.

    • @mostbest88
      @mostbest88 7 лет назад

      Я вас понял. Спасибо.

    • @mostbest88
      @mostbest88 7 лет назад

      А как вы тестируете реальную скорость работы сайта?

    • @wdm
      @wdm  7 лет назад +1

      В браузере ))

  • @Konst_SSS
    @Konst_SSS 6 лет назад

    Спасибо!

  • @andreynik8016
    @andreynik8016 6 лет назад

    А как сделать чтобы от md разрешения например логотип был слево
    А если разрешении меньше он вставал по центру, а не прижимался к левому краю ?

  • @SerhiiPylypenko-g9b
    @SerhiiPylypenko-g9b 6 лет назад

    Здравствуйте, у меня почему-то не работает упорядоченность элементов, а пишу как и вы