Всем доброго дня! Такая ситуация: начал осваивать Bootstrap 4, но не могу понять как сверстать это окно
Вот как сделал без фрейма: https://jsfiddle.net/6fb90gcv/2/
Верстка должна тянуться по ширине? Какие колонки фиксированы, какие нет? Как стоит задача? Обучиться бутстрапу? Получить верстку именно этого дизайна?
Вообще если что-то проще сделать без бутстрапа, я бы делал без бутстрапа. Фишка бутстрапа в том что он помогает иметь стили по умолчанию если дизайнер такие не продумал (например для админки). Второй вариант когда бутстрап помогает - это когда дизайнер создает дизайн под бутстрап фреймверк. Не похоже что этот дизайн попадает под одно из определений.
Задача: обучиться бутстрапу.
Верстка именно этого дизайна для практики.
Дизайн всего макета как раз под фреймворк.
Отлично. Логика такая - вертикальные гайдлайны - показывают где проходят границы виртуальных колонок. Бутстрап дает классы, которые представляют эти колонки. Притом есть отдельные классы чтобы указывать ширину 3 колонки из 12, или 5 колонок из 12 итд.
Например на скришноте ниже видно что ширина компонентов - для текста берется 5 ширин из 12 колонок, для иконки (голова) - 1 колонка из 12.
В ходе верстки ты смотришь где проходят границы колонок, и разбиваешь соответственно компоненты. Например ты можешь захотеть разбить страницу сначала на 3 колонки (текст+иконка слева, центральный текст и кружок, иконка+текст справа), а потом соответсвенно их поделить на внутренние колонки.
Примеры того как колонки можно размещать (например как показать компонент 5 колонок в ширину с отступом 3 колонки слева) есть в документации.
В качестве примера возьми одну готовых, желательно популярных (чтобы код был качественным с большей вероятностью) тем, и посмотри на устройство кода. Вот в этой теме можно посмотреть на то как устроены колонки (я не смотрел на какой версии бутстрапа написан пример, но принцип в целом сохраняется) https://blackrockdigital.github.io/startbootstrap-landing-page/
