Как правильно сверстать данный блок на bootstrap?

Question

[Елизавета]

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

Comments

[Ди Ма]

Ширину левого блока нужно сделать именно такой (не полных 4 колонки)?

[Елизавета]

Ди Ма: не обязательно

[Ди Ма]

Картинку проще всего позиционировать как background-image. Тогда если задать

background-image: url(images/mybg.png);
background-size: cover; 
background-position: 50% 50%;

то картинка будет занимать весь див (не искажаясь, как если бы задали фиксированную ширину и высоту в не правильной пропорции). И будет всегда подстраиваться под размер дива. Только это плохо сказывается на индексации. Лучше бы картинки добавлять тегами img

[Ди Ма]

Елизавета: А с подсветкой- каждый элемент списка состоит из иконки и текста. Переключением класса менять видимость/прозрачность иконки.

Answer 1

[Sergey Sidorov]

Какая версия bootstrap?

В 4-й и 3-й версии блок справа можно сверстать с помощью функционала карточки v4-alpha.getbootstrap.com/components/card (bootstrap-3.ru/components.php#thumbnails-custom-content для 3-ей) если версии bootstrap более ранние - можно перетянуть данный функционал в них.

Готового решения для левого блока нет, можно начать с v4-alpha.getbootstrap.com/components/list-group (bootstrap-3.ru/components.php#list-group 3-я версия) и кастомизировать его под себя по принципу который указала Елизавета.