Урок 9. Верстка на bootstrap | Курс Веб разработчик | Академия верстки

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ม.ค. 2025

ความคิดเห็น • 132

  • @oleggrinko8617
    @oleggrinko8617 หลายเดือนก่อน +1

    Этот ментор лучший. Очень хорошо объясняет, вкладывается эмоционально

  • @kozii-d
    @kozii-d 3 ปีที่แล้ว +43

    Те, кто начали проходить курс в 21+ году и используют 5 версию бутстрапа, то в нём отменили класс btn-block. Для одиночных кнопок вместо него нужно добавить w-100

    • @kozii-d
      @kozii-d 3 ปีที่แล้ว

      @@dannygolds как написано в документации "Отменили за ненадобностью"

    • @logan_mercury
      @logan_mercury 3 หลายเดือนก่อน

      спс )

  • @luckyrobot3688
    @luckyrobot3688 4 ปีที่แล้ว +36

    Для bootstrap 4 название класса изменилось, пишется не col-lg-offset-3, а offset-lg-3. А то не хотел блок выравниваться по середине, замучился искать почему, оказывается класс изменился.

    • @serhey4027
      @serhey4027 4 ปีที่แล้ว +3

      согласен, было бы неплохо обновить курс в целом и что-то новое в него добавить

    • @ПавелМалхов-з3д
      @ПавелМалхов-з3д 4 ปีที่แล้ว

      спасибо)

    • @wildtube108
      @wildtube108 3 ปีที่แล้ว +1

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

    • @nilexum6835
      @nilexum6835 3 ปีที่แล้ว +2

      спасибо

    • @Tomik12374
      @Tomik12374 3 ปีที่แล้ว +2

      Мой герой)спасиб

  • @Андрей-к8ш9е
    @Андрей-к8ш9е 6 ปีที่แล้ว +54

    Для бутстрэпа четвертой версии пропишите:

    • @vadymtsakun3842
      @vadymtsakun3842 6 ปีที่แล้ว

      mx-auto это ...?

    • @tehrelt
      @tehrelt 5 ปีที่แล้ว

      Thx

    • @noiseless6800
      @noiseless6800 5 ปีที่แล้ว +1

      @@vadymtsakun3842Это {margin-left: auto; margin-right: auto;} (x - горизонтальная ось) (y - вертикальная)

    • @ПавелРостовцев-з7п
      @ПавелРостовцев-з7п 5 ปีที่แล้ว +3

      @@noiseless6800 да хранит тебя бог :)

    • @PlayKaif_
      @PlayKaif_ 5 ปีที่แล้ว +1

      @@ПавелРостовцев-з7п ты спас))))

  • @wessonboy2110
    @wessonboy2110 4 ปีที่แล้ว +6

    оберните кнопку еще в один класс и выровните по text-center

    Получить инструкцию

    • @akbardavletov7294
      @akbardavletov7294 3 ปีที่แล้ว

      спасибо то что надо от души

  • @MrKamaeb
    @MrKamaeb 4 ปีที่แล้ว +4

    Я прост скачал себе Bootsrtap предыдущей версии и дальше продолжил обучение, главное-это понять основы!

  • @ГражданинР-у7м
    @ГражданинР-у7м 4 ปีที่แล้ว +14

    у кого нижняя кнопка не центруется:

    Получить инструкцию

    • @brucewayne_007
      @brucewayne_007 4 ปีที่แล้ว +1

      от души

    • @wildtube108
      @wildtube108 3 ปีที่แล้ว

      Спасибо. Получилось.

    • @fgyly78
      @fgyly78 2 ปีที่แล้ว

      Два часа убил на эту кнопку. Ничего не помогало. Даже код полностью переписал. Максимум, что выжал, так это размер кнопки.
      От души)

  • @Oussama-vo4zk
    @Oussama-vo4zk 3 ปีที่แล้ว +2

    Для новеньких, для того что бы вы не мучались читая всю документацию для bootstrap 5. Вам это поможет. Можно не использовать offset , так как он не работает при добавлении множества col подряд в одном div. Если вы поставите центрирование и пропишите col col-lg-6 col-md-6 весь блок будет подстраиваться под ширину и тип который вы зададите без отступов offset.

  • @braivs
    @braivs 4 ปีที่แล้ว +1

    Со страстью смотрю это. Верю в силу веб разработки, что она по настоящему может приносить деньги. Понимаю что надо заставлять себя практиковать, так будет прогресс.

    • @TritonTritosha
      @TritonTritosha 2 ปีที่แล้ว

      и как? получилось?

    • @braivs
      @braivs 2 ปีที่แล้ว

      @@TritonTritosha да. Работаю и живу в Гоа)

  • @xsful7783
    @xsful7783 3 ปีที่แล้ว +5

    для тех, у кого input-lg не работает:
    form-control-lg
    пример:

  • @Evgeny..
    @Evgeny.. 4 ปีที่แล้ว

    Самые лучшие курсы, которые когда-либо проходил

  • @Mediumwell56
    @Mediumwell56 4 ปีที่แล้ว +1

    Если что-то из урока не работает на bootstrap 4, вбиваешь это в поиск на сайте и всегда находишь решение. 28:37 ctrl+клик это круто, не знал что так можно

  • @Talantbek1994
    @Talantbek1994 4 ปีที่แล้ว +1

    ты молодец. Обьясняешь очень четко и классно

  • @lemonjuice938
    @lemonjuice938 4 ปีที่แล้ว +5

    Нижняя кнопка не сдвигается
    Помоги! Всё делаю за тобой и такой нюанс вообще не нравится

  • @kazarinov_al
    @kazarinov_al 4 ปีที่แล้ว +2

    какой командой заменить center-block в 4 bootstrap'e?

  • @helloworld-fv8kx
    @helloworld-fv8kx 2 ปีที่แล้ว

    божеее, бутстрап это просто шедевр !!! а то эта адаптивная верстка на css не очень )))) спасибо за видео

  • @valerakuznetsov
    @valerakuznetsov 3 ปีที่แล้ว +1

    Спасибо. Это супер !

  • @mr.orleond4334
    @mr.orleond4334 3 ปีที่แล้ว +1

    Привет! Отличный курс! Подскажите, а что за расширение позволяет в html-коде выбирать подключаемые классы в выпадающем списке из подключенных стилей?

    • @mr.orleond4334
      @mr.orleond4334 3 ปีที่แล้ว +2

      Нашел ответ на свой вопрос) В Visual Studio Code установил дополнительно Bootstrap 5 Snippets by Coder Foundry

    • @asmik.s4931
      @asmik.s4931 ปีที่แล้ว

      @@mr.orleond4334 Огромное спасибо!

  • @itachiychiha-----1232
    @itachiychiha-----1232 3 ปีที่แล้ว

    Подскажите пожалуйста почему у меня поля в которых написано введите ваш email и пороль становятся под видео а не справа как в этом уроке.

  • @naumnersesov3969
    @naumnersesov3969 5 ปีที่แล้ว +1

    form-btn и center block почему не работают вместе

  • @souichimoon
    @souichimoon 5 ปีที่แล้ว +9

    Когда переходишь с чистого CSS на bootstrap возникают те же чувства что и при переходе с JS на jQuery

    • @РоговТимур
      @РоговТимур 2 ปีที่แล้ว

      Чувство вроде: "А что так можно было что ли??"

  • @shamistanaliyev5678
    @shamistanaliyev5678 4 ปีที่แล้ว +1

    всё очень супер и понятно,спасибо большое!!!)

  • @ИгорьГудыменко-ж6ъ
    @ИгорьГудыменко-ж6ъ 4 ปีที่แล้ว

    Как прописать 53ю строку?, когда прописываю ее и в конце жму просто энтер, то ничего не разворачивается, а просто курсор перескакивает на строку ниже.

  • @Freedom_Code
    @Freedom_Code 5 ปีที่แล้ว

    Почему-то сделал как у вас в уроке (установил Boostrap3 ) и появляется скролл снизу . Что делать?

  • @ВасильЗаячківський-л7щ
    @ВасильЗаячківський-л7щ 4 ปีที่แล้ว

    form-btn не красится, примняется цвет бутстрап класа, как изменить?

  • @itsmefakhriddin207
    @itsmefakhriddin207 4 ปีที่แล้ว

    помоги мне bootstrap четвертой не получается сдвинать видио ?

  • @jusupmunanbekov7477
    @jusupmunanbekov7477 5 ปีที่แล้ว

    нету визуального макета. как поставить сетку на первичный макет на фотошопе?

  • @ДосымАтейбек-п6я
    @ДосымАтейбек-п6я 3 ปีที่แล้ว

    у меня не открывается картинки что делать ?

  • @shamistanaliyev5678
    @shamistanaliyev5678 4 ปีที่แล้ว +2

    было бы хорошо,если бы оставлял ссылки на фотки

  • @Сергей-ф7о7с
    @Сергей-ф7о7с 4 ปีที่แล้ว

    Почему то не работают команды на бутстрэп 4

  • @Angry_Welder
    @Angry_Welder 4 ปีที่แล้ว

    Не понимаю причину обертываний в дивы:
    1) зачем div class="container" обернули в div class="section";
    2) span обернули в class="heder text-center";
    3) зачем блок с видео inframe обернули div class="video".
    Почему нельзя просто оставить родительские дивы в 2) и 3), т.е. пользоваться bootstrapовскими divми.
    Битрейт 19.05.

  • @Андрей-к8ш9е
    @Андрей-к8ш9е 6 ปีที่แล้ว

    Как картинки feature-box двигать? Тоесть, я хочу подвинуть первое преимущество вправо, третее влево. Как это сделать?

  • @maholnt_play9223
    @maholnt_play9223 4 ปีที่แล้ว

    У меня почему то последняя кнопка не стала по центру,она как была слева так и стоит

    • @АрсенСедиров
      @АрсенСедиров 4 ปีที่แล้ว

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

  • @danilshishkov1019
    @danilshishkov1019 6 ปีที่แล้ว +2

    Подскажите как сделать бинд команды как у Артема в консоли "server"

  • @АннаГолубева-в7л
    @АннаГолубева-в7л 5 ปีที่แล้ว

    Лучший. Спасибо огромное

  • @_Fantom_.
    @_Fantom_. 5 ปีที่แล้ว

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

  • @Sholunishka
    @Sholunishka 4 ปีที่แล้ว

    Как коментировать?

  • @meidro_
    @meidro_ 3 ปีที่แล้ว +2

    Я одного не пойму, какой смысл bootstrap, если все равно нужен свой файл css ??? В любом случае необходимо писать свой css что бы подогнать под стиль который необходим. И в добавок увеличивается код html который можно было перенести в css. Может я не понимаю конечно)

    • @Deskezz1337
      @Deskezz1337 3 ปีที่แล้ว

      я думаю, что это чисто субьективное

    • @NickBD95
      @NickBD95 3 หลายเดือนก่อน

      я вообще не понимаю, почему надо сначала рассматривать bootstrap без четкого понимания grid и flex, еще эти длинные сокрашения от emmet везде вставляет, в итоге время тратишь, ставя видео на паузу, чтобы повторить это, так как автор не соизволил хотя бы делать небольшие паузы в этом моменте, вечно куда-то торопится

  • @леналитвинова-к3э
    @леналитвинова-к3э 5 ปีที่แล้ว +3

    я в свое время проходила верстку на курсах в учебном центре, но нам не давали таких знаний как тут. Артем, молодец, классно объясняешь. Хочу полную версию купить, чтобы выполнить все задания. И потом продолжить обучение у вас на курсе по скриптам. Их я вообще не знаю.
    Но вот вопрос, наш преподаватель говорил, что Bootstrap очень засоряет код. поэтому нас к этому не приучали. Хотелось бы твое мнение услышать? Все таки вы большие эксперты в этом, а мы начинающие верстальщики без общего понимания.

    • @vipdeveloper
      @vipdeveloper 5 ปีที่แล้ว

      Купили курс?

    • @sergeipirogov5396
      @sergeipirogov5396 5 ปีที่แล้ว +1

      Ну так вот он, засор многочисленными добавочными классами и библиотеками, то что и так прекрасно описывается чистым css. Если вы будете постоянно делать одни и те же кнопки в проектах, то вероятно у вас будут свои готовые заготовки любых кнопок, каких хотите, а не каких бутстрап вам прописал...Вообще народ в основном использует только сетку от бутстрап, остальное кидают в топку, хотя и сетка тоже делается без него, главное знать, как правильно её сделать.

    • @WhiteBear141981
      @WhiteBear141981 4 ปีที่แล้ว

      Sergei Pirogov, добрый день! Подскажите, как правильно сделать сетку?

  • @doroga_kesh
    @doroga_kesh 2 ปีที่แล้ว

    и где же этот макет???

  • @NickBD95
    @NickBD95 3 หลายเดือนก่อน

    В принципе очень хорошо объясняет, то местами слишком быстро говорит, переключается между окнами, постоянно приходится ставить на паузу или немного даже проматывать назад. Зачем так быстро? Можно же делать небольшие паузы.

  • @naumnersesov3969
    @naumnersesov3969 5 ปีที่แล้ว

    почему картинки на весь экран ?

  • @МаксимКрутов-е8б
    @МаксимКрутов-е8б 5 ปีที่แล้ว

    Огромное спасибо!

  • @vitaliyallabergeov568
    @vitaliyallabergeov568 4 ปีที่แล้ว

    Благодарю вас

  • @yehorpolishchuk8877
    @yehorpolishchuk8877 5 ปีที่แล้ว

    откуда берутся подсказки (дополнения)? какой плагин? у меня не работает, help

    • @WhiteBear141981
      @WhiteBear141981 4 ปีที่แล้ว

      Егор Полищук, emmet

    • @yehorpolishchuk8877
      @yehorpolishchuk8877 4 ปีที่แล้ว

      @@WhiteBear141981 Я имел ввиду подсказки бутстраповских атрибутов и значений классов, мне emmet в этом плане не помог, он уже был, потому и вопрос был задан

    • @WhiteBear141981
      @WhiteBear141981 4 ปีที่แล้ว +1

      Егор Полищук, в Visual Code это расширение называется Bootstrap v4 Snippets

  • @mr.orleond4334
    @mr.orleond4334 3 ปีที่แล้ว

    Не знаю, почему на видео так аккуратно и красиво адаптируется сайт, возможно в старом бутстрапе такая адаптация была. С кодом из урока (оптимизированным под бутстрап 5, естессно), при уменьшении страницы хедер уезжает вправо (offset 3 же), как на видео стало лишь при удалении оффсета и изменении col-lg-6 на 12. И видео уезжает правее относительно расположенной ниже формы (красиво становится лишь тогда, когда уберешь offset-1 у видео, но тогда при нормальном разрешении ни алё. Спасёт только @media)

    • @Glo_Academy
      @Glo_Academy  3 ปีที่แล้ว +1

      Версия бутстрап обновилась, поэтому там нужно использовать другие классы. Например, вместо col-md-offset-3 нужно писать offset-md-3 и тд

  • @WhiteBear141981
    @WhiteBear141981 4 ปีที่แล้ว

    Красиво!

  • @ВасильБереза-щ2г
    @ВасильБереза-щ2г 6 ปีที่แล้ว

    У меня сразу вопросик есть: как выравнивать заголовок по середине, если бы он занимал не 6 колонок, а 7, класс оффсет только целые числа принимает или числа с плавающей точкой тоже?

    • @MrAkioTv
      @MrAkioTv 5 ปีที่แล้ว

      Всегда ведь можно попробовать самому )

    • @vipdeveloper
      @vipdeveloper 5 ปีที่แล้ว

      offset-lg-2.5 (с обеих сторон по 2.5 это 5, и 7 колонок на заголовок, проверил, всё работает)

    • @vipdeveloper
      @vipdeveloper 5 ปีที่แล้ว

      лучше скажи как center-block применить, он не работает

  • @noiseless6800
    @noiseless6800 5 ปีที่แล้ว

    Как управлять отступами на разных экранах?

    • @Glo_Academy
      @Glo_Academy  5 ปีที่แล้ว +2

      Через медиа запросы

  • @radyshenkya2639
    @radyshenkya2639 3 ปีที่แล้ว +1

    В новых версиях бутстрапа нету класса btn-block, вместо него используйте col-12

    • @ДимаДембровский
      @ДимаДембровский 3 ปีที่แล้ว

      Я тебя просто люблю)

    • @denisgheonea5254
      @denisgheonea5254 3 ปีที่แล้ว

      спасибо за подсказку

    • @mr.orleond4334
      @mr.orleond4334 3 ปีที่แล้ว

      Костыли)
      Вместо классов теперь используется специальная обертка
      Button

    • @radyshenkya2639
      @radyshenkya2639 3 ปีที่แล้ว

      @@mr.orleond4334 Я на сайте бутстрапа это читал, там написано что бтн-блок убрали, вместо этого используйте col-12. Да и плюсом смысл использовать 2 тэга, когда можно обойтись одним, причем который не считается костылем, он выполняет именно ту функцию для которой он и был предназначен

    • @mr.orleond4334
      @mr.orleond4334 3 ปีที่แล้ว

      @@radyshenkya2639 Я согласен с тем, что оборачивать отдельно один баттон через чур, просто сам не нашел иного способа, читая документацию на бутстрапе..

  • @wildtube108
    @wildtube108 3 ปีที่แล้ว

    Input-lg не работает.

  • @RMirsaitov
    @RMirsaitov 4 ปีที่แล้ว

    Спасибо)

  • @OyNice
    @OyNice 6 ปีที่แล้ว

    Всем Привет
    Ответе мне пажалуйста
    Что такое Фреймворки ??
    Получается это инструмент для расположения элементов как картина,тексты, видео и тд ??
    Я правильно понял или же нет ?? с корректирует меня пожалуйста. (начинающий)

    • @Kami1mah
      @Kami1mah 5 ปีที่แล้ว +2

      Вас что, в Гугле забанили?)
      Фре́ймворк, иногда фреймво́рк - заготовки, шаблоны для программной платформы, определяющие архитектуру программной системы; программное обеспечение, облегчающее разработку и объединение разных модулей программного проекта. Уместно использование термина «каркас».

  • @youritperson
    @youritperson 5 ปีที่แล้ว

    ну почему у меня не работает offset, а ???

    • @Glo_Academy
      @Glo_Academy  5 ปีที่แล้ว

      Версия Bootstrap сменилась.

    • @Glo_Academy
      @Glo_Academy  5 ปีที่แล้ว

      Надо на сайте bootstrap вверху выбрать версию 3.7

    • @MrAkioTv
      @MrAkioTv 5 ปีที่แล้ว +4

      offset-lg-2 , попробуй так. Вместо "2" ставь свое значение, которое нужно

  • @armandesigner6165
    @armandesigner6165 5 ปีที่แล้ว

    у меня все влево ушло не по центру ((

    • @OEMGone
      @OEMGone 5 ปีที่แล้ว +1

      Для Bootstrap 4 вместо col-lg-offset-3 попробуй offset-lg-3 или mx-auto

  • @pravednik4170
    @pravednik4170 6 ปีที่แล้ว

    Col-lg-offset не работает. Как исправить?

    • @EvgenyKrasanov
      @EvgenyKrasanov 6 ปีที่แล้ว +3

      в 4ом бутстрапе его убрали, сделали более гибко. col-lg-6 для ширены и mx-auto для центровки, что означает margin по оси X авто

    • @pravednik4170
      @pravednik4170 6 ปีที่แล้ว

      Evgeny Krasanov спасибо

    • @danilshishkov1019
      @danilshishkov1019 6 ปีที่แล้ว +5

      может я плохо разбираюсь но я в исходнике четвертой версии нашел команды:
      .offset-1 .offset-2 .offset-3 ... .offset-11
      .offset-sm-0 .offset-sm-1 ... .offset-sm-11
      .offset-md-0 .offset-md-1 ... .offset-md-11
      .offset-lg-0 .offset-lg-1 ... .offset-lg-11
      .offset-xl-0 .offset-xl-1 ... .offset-xl-11

    • @EvgenyKrasanov
      @EvgenyKrasanov 6 ปีที่แล้ว +1

      getbootstrap.com/docs/4.1/layout/grid/#offset-classes да вы правы, эти классы остались, название немного изменилось, по сравнению с 3ей версией. Спасибо!

    • @tehrelt
      @tehrelt 5 ปีที่แล้ว

      mx-auto

  • @ho4hou_kot
    @ho4hou_kot 6 ปีที่แล้ว +1

    Bootstrap 4 верстал бы там уже флех и не надо слева отступы считать

    • @exponat5398
      @exponat5398 6 ปีที่แล้ว

      Курс был снят год назад

    • @ho4hou_kot
      @ho4hou_kot 6 ปีที่แล้ว +2

      ʬẌẌ тогда зачем выкладывать было сейчас. Надо было снять тоже самое на 4 и выкладывать. Шлак понятно людей только запутали.. видно по комментам

    • @MrAkioTv
      @MrAkioTv 5 ปีที่แล้ว +1

      @@ho4hou_kot Кому надо, тот разберется )

  • @sergeipirogov5396
    @sergeipirogov5396 5 ปีที่แล้ว

    Но ведь можно же всё это делать и без Бутсрап на чистом css, только нужно создать свою сетку, аналогичную бутстраповской. И зачем тогда бутстраповские костыли, классы и прочее, те же яйца только в профиль. Все разработчики об этом говорят.

    • @Glo_Academy
      @Glo_Academy  5 ปีที่แล้ว

      Вы правы

    • @SpeedyGonshik
      @SpeedyGonshik 5 ปีที่แล้ว +1

      А как создать свою сетку?

  • @danilpalyha7974
    @danilpalyha7974 4 ปีที่แล้ว

    очень быстро\

  • @EvgenyKrasanov
    @EvgenyKrasanov 6 ปีที่แล้ว

    я еще позанудсвую) что бы высоту видео тоже сделать респонсивной, можно использовать эти классы getbootstrap.com/docs/4.1/utilities/embed/#example

    • @Glo_Academy
      @Glo_Academy  6 ปีที่แล้ว +1

      Видео было записано по 3 бутстрапу

    • @EvgenyKrasanov
      @EvgenyKrasanov 6 ปีที่แล้ว

      getbootstrap.com/docs/3.3/components/#responsive-embed в 3 этот класс тоже есть

  • @marmar7851
    @marmar7851 3 ปีที่แล้ว

    у кого ест сетка

  • @goldlion1815
    @goldlion1815 3 ปีที่แล้ว

    а че так мало лайков?)

  • @KoT-ew2dk
    @KoT-ew2dk 6 ปีที่แล้ว

    Сколько классов, ужас какой