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

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 202

  • @wdm
    @wdm  День тому +1

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

  • @parahumanoid
    @parahumanoid 3 роки тому +2

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

  • @КимГрей-г9г
    @КимГрей-г9г 4 роки тому +1

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

  • @debasher
    @debasher 5 років тому +63

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

  • @AnVaSKLetsPlay
    @AnVaSKLetsPlay 6 років тому +311

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

    • @wdm
      @wdm  6 років тому +24

      Спасибо!

    • @remyanderson8526
      @remyanderson8526 3 роки тому

      @Jerry Lachlan Instablaster :)

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

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

  • @nikitos23kh
    @nikitos23kh 6 років тому +14

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

  • @ministersport
    @ministersport 4 роки тому +3

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

  • @tatyanadovzhich
    @tatyanadovzhich 6 років тому +4

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

  • @Астролит
    @Астролит 6 років тому +6

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

  • @ProstoSvidetel
    @ProstoSvidetel 5 років тому +7

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

  • @ingvarishchenko1041
    @ingvarishchenko1041 6 років тому +1

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

  • @mikhailvolosovich135
    @mikhailvolosovich135 6 років тому +3

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

  • @justspartak
    @justspartak 5 років тому +2

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

  • @Andrei_Porsev
    @Andrei_Porsev 6 років тому +4

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

  • @web4554
    @web4554 6 років тому +2

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

  • @suspiciouscandy1678
    @suspiciouscandy1678 4 роки тому +1

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

  • @GGSoft2009
    @GGSoft2009 5 років тому

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

  • @Fokusnikd
    @Fokusnikd 5 років тому +1

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

  • @АртемКосых-г3ъ
    @АртемКосых-г3ъ 6 років тому +1

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

  • @olatera
    @olatera 6 років тому +1

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

  • @mcswplayon987
    @mcswplayon987 6 років тому +4

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

  • @Андрей-е4ы2и
    @Андрей-е4ы2и 5 років тому +1

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

  • @krassnow8963
    @krassnow8963 5 років тому +3

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

  • @dimanazdratenko
    @dimanazdratenko 6 років тому +2

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

  • @nekchich5565
    @nekchich5565 6 років тому

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

  • @oleksandrmorozov3051
    @oleksandrmorozov3051 6 років тому +24

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

  • @samurai-csgo
    @samurai-csgo 6 років тому

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

  • @egoregor3024
    @egoregor3024 6 років тому

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

  • @vwusr2533
    @vwusr2533 6 років тому

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

  • @sergeykireev1431
    @sergeykireev1431 6 років тому

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

  • @dailyvideo1593
    @dailyvideo1593 2 роки тому +1

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

  • @guestalex
    @guestalex 4 роки тому

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

  • @ВладСтоляров-ю6ъ
    @ВладСтоляров-ю6ъ 3 роки тому

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

  • @sea-lucky7143
    @sea-lucky7143 6 років тому +1

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

  • @АртемТабаков-б5т
    @АртемТабаков-б5т 6 років тому

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

  • @olisy87
    @olisy87 5 років тому +1

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

  • @mrnobody3739
    @mrnobody3739 3 роки тому +1

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

  • @АндрейЛисецкий-ч1д
    @АндрейЛисецкий-ч1д 4 роки тому +1

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

  • @maksymdunaev6020
    @maksymdunaev6020 3 роки тому +2

    ГЕНИЙ

  • @chingiz_mammadov
    @chingiz_mammadov 6 років тому

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

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

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

  • @ЕгорЗверев-й8к
    @ЕгорЗверев-й8к 5 років тому

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

  • @romanpityul8805
    @romanpityul8805 5 років тому

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

  • @artemsergeev4833
    @artemsergeev4833 2 роки тому +1

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

  • @МакарКорнилов-ц5к
    @МакарКорнилов-ц5к 6 років тому +1

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

  • @whyrabbitone
    @whyrabbitone 6 років тому +6

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

  • @mamita5595
    @mamita5595 5 років тому

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

  • @ZurabPro
    @ZurabPro 6 років тому +7

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

  • @ЕвгенийМельников-е7у

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

  • @mishasv1490
    @mishasv1490 5 років тому

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

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

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

  • @alexkardone3809
    @alexkardone3809 6 років тому +17

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

    • @wdm
      @wdm  6 років тому +24

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

    • @alexkardone3809
      @alexkardone3809 6 років тому +3

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

    • @Иван-я1л
      @Иван-я1л 6 років тому +5

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

    • @_-s.narekhovoyiexpayr-_3794
      @_-s.narekhovoyiexpayr-_3794 6 років тому +1

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

  • @Dmitriy-k2z
    @Dmitriy-k2z 6 років тому

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

  • @vitamedovshchuk8369
    @vitamedovshchuk8369 5 років тому +1

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

  • @Алексей-ю2и2ж
    @Алексей-ю2и2ж 6 років тому

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

  • @vl8224
    @vl8224 3 роки тому

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

  • @TheWorldPeace
    @TheWorldPeace 4 роки тому

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

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

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

  • @nifler111
    @nifler111 5 років тому

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

  • @asetaseett3334
    @asetaseett3334 6 років тому

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

  • @andreys1099
    @andreys1099 6 років тому +1

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

  • @chistowick
    @chistowick 4 роки тому

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

  • @SuperKatSSS
    @SuperKatSSS 6 років тому

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

  • @avin365
    @avin365 5 років тому +1

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

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

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

  • @ivand7299
    @ivand7299 6 років тому +1

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

  • @dezu805
    @dezu805 6 років тому

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

  • @serhiymelnyk9875
    @serhiymelnyk9875 6 років тому

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

  • @kidsgame5274
    @kidsgame5274 4 роки тому

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

  • @headspase2585
    @headspase2585 4 роки тому

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

    • @wdm
      @wdm  4 роки тому +1

      Здравствуйте. ua-cam.com/video/lOXz0ZYuTqI/v-deo.html

  • @АндрейКуприянов-н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 ?

  • @MAXAMIRAX
    @MAXAMIRAX 6 років тому

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

  • @Andrey-zv1kc
    @Andrey-zv1kc 6 років тому +1

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

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

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

  • @МаксимДубенко-в4т
    @МаксимДубенко-в4т 6 років тому +1

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

  • @psihonort9275
    @psihonort9275 6 років тому

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

  • @gurudk3378
    @gurudk3378 6 років тому

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

  • @mostbest88
    @mostbest88 6 років тому +1

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

    • @wdm
      @wdm  6 років тому +1

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

    • @mostbest88
      @mostbest88 6 років тому

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

    • @mostbest88
      @mostbest88 6 років тому

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

    • @wdm
      @wdm  6 років тому +1

      В браузере ))

  • @NonToxicTV
    @NonToxicTV 6 років тому

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

  • @ihmevehje1372
    @ihmevehje1372 6 років тому

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

    • @wdm
      @wdm  6 років тому +1

      Здравствуйте.
      ua-cam.com/video/RfFtACtO998/v-deo.html
      ua-cam.com/video/JSGPd1E16-o/v-deo.html

  • @salinderru
    @salinderru 6 років тому +3

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

  • @togontemir6036
    @togontemir6036 5 років тому

    Так понял что класс .row должен быть внутри класса .col- если сделать .row >.row второй смещается в лево (может в стилях отрицательный отступ есть ?)

  • @front-end14
    @front-end14 5 років тому

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

  • @erdauletbayangali7470
    @erdauletbayangali7470 5 років тому +1

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

    • @wdm
      @wdm  Рік тому +1

      Здравствуйте. Джедай верстки 8 уже на канале: ua-cam.com/video/3PzzZ5eHHig/v-deo.html

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

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

  • @myagkovandrey
    @myagkovandrey 6 років тому

    Алексей, пробовали ли Вы редактор MS Visual Studio Code? Многие перешли на него с Sublime, т.к. возможностей намного больше. Может сделаете обзор?

    • @wdm
      @wdm  6 років тому

      Да, пробовал. Отличный редактор.

  • @yrsafam
    @yrsafam 6 років тому

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

  • @Kensidan
    @Kensidan 6 років тому

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

  • @andriibabenko1644
    @andriibabenko1644 6 років тому

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

  • @VladHorpynych
    @VladHorpynych 6 років тому

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

  • @alexfox7088
    @alexfox7088 6 років тому

    А будет видео по навигации BS4?

  • @КристинаБлизнюк-я1ш

    Верстать по сетке имеет смысл только тогда ,когда и макет был сделан по сетке?

  • @thesijisgame6590
    @thesijisgame6590 6 років тому

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

    • @wdm
      @wdm  6 років тому +3

      TheSijisGame container-fluid

  • @ТимофейБелоусов-ъ1х

    Первый раз встречаю вас на ютубе и интересно услышать ваше мнение о Foundation Flex, Знакомы? Юзайте? Если нет, то почему? Хотелось бы узнать ваше мнение!

  • @razumniy
    @razumniy 6 років тому

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

  • @deepparser3621
    @deepparser3621 6 років тому

    а как отцентровать row? если есть header и плюс еще один row который должен быть по центру(если делать space between то она закрепляется вниз)

  • @nikitadenisov166
    @nikitadenisov166 6 років тому +2

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

  • @SerhiiPylypenko-g9b
    @SerhiiPylypenko-g9b 6 років тому

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

  • @Олег777-к8е
    @Олег777-к8е 6 років тому

    как разместить видеотрансляцию с другого сайта у себя на сайте?