Курсы по программированию

Формула программиста

основатель — Волосатов Евгений Витольдович
Поздравляю с 1 сентября! Система начисления Байтов работает.

Bootstrap-4 первые шаги / Отзывы: карты - в сетку

  • На этом уроке мы сделаем карты ровными и научимся использовать в стилях  шрифты с google fonts
  • Дата отправки отчёта: 10 мая 2020 г.
  • Задание выполнено: за 3 час. 16 мин.
  • Чему научился: Классы col задавал пол дня нужного эффекта не добился
    шрифты импортировал и заменил - работает
  • Что было сложным: после мучений с переносами и адаптивностью, выкинул все col-ы и сделал класс card-group из bootstrap, а интервалы соорудил через mx-3. и всё равно совсем гибко не работает. В документации, кстати написано что в кардгруппах адаптивность не поддерживается.
  • Оценка видео-уроку:
Отчёт от 24659 за Bootstrap-4 первые шаги / Отзывы: карты - в сетку




Оцени работу

 
Сохранить страницу:

791. --
Валерий Жданов
Валерий Жданов
ответить
→  Виталий  # Bootstrap-4 первые шаги / Отзывы: карты - в сетку / 2020-05-10 08:52

преодолевая все трудности, в том числе мычащий и запинающися голос учителя, от которого хотелось спать, Вы наконец-то одержали победу над card-ами!!!  Урра!!!

(кстати, Зураб на фото в третьем card очень напоминает одного малоизвестного американского актера по имени Брюс ))) )


17947. --
Dmitry Sinitsin
Dmitry Sinitsin
ответить
→  Виталий  # Bootstrap-4 первые шаги / Отзывы: карты - в сетку / 2020-05-10 10:56

"Классы col задавал пол дня нужного эффекта не добился" - с этими колами надо понять одну хрень.
Бутстрап делит экран на 12 столбцов. Что настольного компа, что планшета, что смартфона. У всех экранов делим на 12 столбцов.
Так вот когда Виталий пишет в своем творении кол-элгэ - он указывает браузеру команду занять столько столбцов, какую цифру он укажет после этого кол-элгэ)
Если написать col-lg-6 , то элемент к которому это написано займет 6 столбцов или половину экрана.
Если col-lg-11, то займет почти весь экран, без одной колонки.
Если col-lg-12 - то это команда занять весь экран, но это по умолчанию так и делается, то получается бессмысленная команда.

И эта канитель актуальна для других типов экрана , кол-эмдэ - это как распределить колонки (ЗАНИМАЕМЫЕ элементом) для средних экранов,
кол-эсэм - смолл экраны(мелкие)м и т.д.
А смысл, почему эти кол-элгэ и эмдэ и тд вместе пишут для желаемого элемента - это как раз бутстраповская "резиновость" сайта.
Один и тот же сайт не должен расползаться и криветь при изменении размера экрана у пользователя. Поэтому и подгоняют свою верстку для разных типов экрана чтобы выглядело прилично.
Главное что надо понять в этой мути - экран делим на 12 столбцов, а число в колах - это сколько ЗАЙМЕТ элемент.
Я эту хрень не сразу догнал, да и не здесь. Или тут об этом не говорилось, или я ушами прохлопал )
Удачи!


24659. --
Виталий
Виталий
ответить
# Bootstrap-4 первые шаги / Отзывы: карты - в сетку / 2020-05-10 12:29

неа там какая то другая система. Всё это работает с простыми дивами. Как только ставлю кард - либо всё в рял, либо в столбик. col-md-6 вообще никакого эффекта не даёт


  • Отчёт оценивали:
    791Валерий Жданов+1   24823Дмитрий Мостыка+1   17947Dmitry Sinitsin+1   25290Konstantin+1   24765Anatoli+1   24410Андрей0  

Начинаем практику по языку C#





Если вы пришли без приглашения -
введите тысяча двадцать четыре (цифрами).
Чтобы стать хорошим программистом — нужно писать программы. На нашем сайте очень много практических упражнений.

После заполнения формы ты будешь подписан на рассылку «C# Вебинары и Видеоуроки», у тебя появится доступ к видеоурокам и консольным задачам.

Несколько раз в неделю тебе будут приходить письма — приглашения на вебинары, информация об акциях и скидках, полезная информация по C#.

Ты в любой момент сможешь отписаться от рассылки.


Научился: Разместил карточки в сетке bootstrap. Импортировал шрифты c сайта google fonts. Установил шрифт 'Pacifico' для имени человека, оставившего отзыв. Установил шрифт 'Nanum Gothic' для ссылок в меню навигации.



Научился:  Привязала карточки к Bootstrap-сетке, а так же использовала google-шрифты в стилях заголовков карточек и навигационного меню.