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

[@oleggrinko8617]

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

[@kozii-d]

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

[@kozii-d]

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

[@logan_mercury]

спс )

[@luckyrobot3688]

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

[@serhey4027]

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

[@ПавелМалхов-з3д]

спасибо)

[@wildtube108]

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

[@nilexum6835]

спасибо

[@Tomik12374]

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

[@MrKamaeb]

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

[@Андрей-к8ш9е]

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

[@vadymtsakun3842]

mx-auto это ...?

[@tehrelt]

Thx

[@noiseless6800]

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

[@ПавелРостовцев-з7п]

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

[@PlayKaif_]

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

[@braivs]

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

[@TritonTritosha]

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

[@braivs]

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

[@Evgeny..]

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

[@Talantbek1994]

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

[@Oussama-vo4zk]

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

[@xsful7783]

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

[@tishkevichStreamer]

Я тебя обожаю

[@helloworld-fv8kx]

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

[@valerakuznetsov]

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

[@wessonboy2110]

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

[@akbardavletov7294]

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

[@ГражданинР-у7м]

у кого нижняя кнопка не центруется: Получить инструкцию

[@brucewayne_007]

от души

[@wildtube108]

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

[@fgyly78]

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

[@shamistanaliyev5678]

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

[@Mediumwell56]

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

[@kazarinov_al]

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

[@АннаГолубева-в7л]

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

[@souichimoon]

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

[@РоговТимур]

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

[@_Fantom_.]

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

[@lemonjuice938]

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

[@леналитвинова-к3э]

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

[@vipdeveloper]

Купили курс?

[@sergeipirogov5396]

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

[@WhiteBear141981]

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

[@shamistanaliyev5678]

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

[@mr.orleond4334]

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

[@mr.orleond4334]

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

[@asmik.s4931]

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

[@МаксимКрутов-е8б]

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

[@naumnersesov3969]

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

[@itachiychiha-----1232]

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

[@vitaliyallabergeov568]

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

[@WhiteBear141981]

Красиво!

[@Сергей-ф7о7с]

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

[@itsmefakhriddin207]

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

[@ИгорьГудыменко-ж6ъ]

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

[@ДосымАтейбек-п6я]

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

[@maholnt_play9223]

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

[@АрсенСедиров]

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

[@RMirsaitov]

Спасибо)

[@Freedom_Code]

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

[@ВасильЗаячківський-л7щ]

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

[@jusupmunanbekov7477]

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

[@doroga_kesh]

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

[@NickBD95]

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

[@meidro_]

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

[@Deskezz1337]

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

[@NickBD95]

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

[@Sholunishka]

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

[@Angry_Welder]

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

[@radyshenkya2639]

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

[@ДимаДембровский]

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

[@denisgheonea5254]

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

[@mr.orleond4334]

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

[@radyshenkya2639]

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

[@mr.orleond4334]

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

[@Андрей-к8ш9е]

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

[@mr.orleond4334]

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

[@Glo_Academy]

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

[@wildtube108]

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

[@СаргисАлексанян-в3я]

попробуй form-control-lg

[@danilshishkov1019]

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

[@yehorpolishchuk8877]

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

[@WhiteBear141981]

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

[@yehorpolishchuk8877]

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

[@WhiteBear141981]

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

[@naumnersesov3969]

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

[@noiseless6800]

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

[@Glo_Academy]

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

[@ВасильБереза-щ2г]

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

[@MrAkioTv]

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

[@vipdeveloper]

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

[@vipdeveloper]

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

[@OyNice]

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

[@Kami1mah]

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

[@youritperson]

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

[@Glo_Academy]

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

[@Glo_Academy]

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

[@MrAkioTv]

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

[@ho4hou_kot]

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

[@exponat5398]

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

[@ho4hou_kot]

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

[@MrAkioTv]

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

[@sergeipirogov5396]

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

[@Glo_Academy]

Вы правы

[@SpeedyGonshik]

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

[@armandesigner6165]

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

[@OEMGone]

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

[@EvgenyKrasanov]

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

[@Glo_Academy]

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

[@EvgenyKrasanov]

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

[@pravednik4170]

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

[@EvgenyKrasanov]

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

[@pravednik4170]

Evgeny Krasanov спасибо

[@danilshishkov1019]

может я плохо разбираюсь но я в исходнике четвертой версии нашел команды: .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]

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

[@tehrelt]

mx-auto

[@goldlion1815]

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

[@danilpalyha7974]

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

[@marmar7851]

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

[@KoT-ew2dk]

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