Bootstrap – Media object (медиа-объект)

В этой статье разберём элемент интерфейса Bootstrap, предназначенный для создания на сайте таких структур, как комментарии, отзывы, твиты и т.п.
Назначение и структура медиа-объекта
Медиа-объект - это элемент Bootstrap, который является основой для построения на сайте сложных блоков (комментариев, отзывов и др.). Один комментарий или отзыв в этом сложном блоке - это один медиа-объект.
Медиа-объект состоит из медиа-элемента (изображения, видео или аудио) и текстового контента.

Код медиа-объекта в Bootstrap 3:
<!-- Медиа-объект --> <div class="media"> <!-- Медиа-элемент (изображение). Класс media-left располагает медиа-элемент относительно контента слева --> <div class="media-left"> <a href="#"> <img class="media-object" src="..." alt=""> </a> </div> <!-- Контент, состоящий из заголовка и некоторого текста --> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> </div>
Код медиа-объекта в Bootstrap 4:
<!-- Медиа-объект --> <div class="media"> <!-- Медиа-элемент (изображение) --> <img class="mr-3" src="/examples/images/media-image-1.png" alt="..."> <!-- Контент, состоящий из заголовка и некоторого текста --> <div class="media-body"> <h5 class="mt-0">Текст заголовка</h5> ... </div> </div>
В Bootstrap 4 создание медиа-объекта осуществляется с использованием только двух классов (media и media-body). Отступы margin и padding между элементами медиа-объекта настраиваются посредством классов Bootstrap 4, специально предназначенных для этого.
Помещение одних медиа-объектов в другие
Фреймворк Bootstrap позволяет помещать один медиа-объект в другой. Осуществляется это посредством помещения кода медиа-объекта в текстовый контент (media-body) родительского медиа-объекта. Уровень вложенности медиа-объектов не ограничен.

Bootstrap 3:
<!-- Bootstrap 3 --> <!-- Контейнер для медиа-объектов --> <ul class="media-list"> <!-- Первый медиа-объект --> <li class="media"> <div class="media-left"> <img class="media-object" src="image-1.png" alt=""> </div> <!-- Контент первого медиа-объекта --> <div class="media-body"> <h4 class="media-heading">Текст заголовка</h4> ... <!-- Второй медиа-объект, вложенный в контент первого --> <div class="media"> <div class="media-left"> <img class="media-object" src="image-2.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Текст заголовка</h4> ... </div> </div> </div> </li> </ul>
Bootstrap 4:
<!-- Bootstrap 4 --> <!-- Первый медиа-объект --> <div class="media"> <img class="mr-3" src="image-1.png" alt="..."> <!-- Контент первого медиа-объекта --> <div class="media-body"> <h5 class="mt-0">Media heading</h5> ... <!-- Второй медиа-объект, вложенный в контент первого --> <div class="media mt-3"> <img class="mr-3" src="image-2.png" alt="..."> <div class="media-body"> <h5 class="mt-0">Media heading</h5> ... </div> </div> </div> </div>
Выравнивание медиа-элемента относительно контента
В Bootstrap медиа-элемент можно выровнять относительно контента:
- по верхнему краю (по умолчанию);
- по середине (в Bootstrap 3 – класс media-middle, в Bootstrap 4 - align-self-center);
- по нижнему краю (в Bootstrap 3 – класс middle-bottom, в Bootstrap 4 - align-self-end).
Bootstrap 3 (медиа-элемент выровнен относительно контента по верхнему краю):
<!-- Bootstrap 3 --> <div class="media"> <!-- --> <div class="media-left"> <img class="media-object" src="image.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> </div>

Bootstrap 4 (медиа-элемент выровнен относительно контента по верхнему краю):
<!-- Bootstrap 4 --> <div class="media"> <!-- Класс align-self-start определяет --> <img class="align-self-start mr-3" src="image.png" alt="..."> <div class="media-body"> <h5 class="mt-0">...</h5> <p>...</p> </div> </div>
Bootstrap 3 (медиа-элемент выровнен относительно контента по середине):
<!-- Bootstrap 3 --> <div class="media"> <!-- --> <div class="media-left media-middle"> <img class="media-object" src="image.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> </div>

Bootstrap 4 (медиа-элемент выровнен относительно контента по середине):
<!-- Bootstrap 4 --> <div class="media"> <!-- Класс align-self-center определяет --> <img class="align-self-center mr-3" src="image.png" alt="..."> <div class="media-body"> <h5 class="mt-0">...</h5> <p>...</p> </div> </div>
Bootstrap 3 (медиа-элемент выровнен относительно контента по нижнему краю):
<!-- Bootstrap 3 --> <div class="media"> <!-- --> <div class="media-left media-bottom"> <img class="media-object" src="image.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> </div>

Bootstrap 4 (медиа-элемент выровнен относительно контента по нижнему краю):
<!-- Bootstrap 4 --> <div class="media"> <!-- Класс align-self-end определяет --> <img class="align-self-end mr-3" src="image.png" alt="..."> <div class="media-body"> <h5 class="mt-0">...</h5> <p>...</p> </div> </div>
Расположение медиа-элемента справа от контента
Изменения порядка следования элементов в медиа-объекте осуществляется посредством изменения HTML-кода, а именно контент (элемент с классом media-body) необходимо поместить до медиа-элемента (изображения).
В Bootstrap 3 кроме этого ещё необходимо изменить класс у медиа-элемента (с media-left на media-right).

<!-- Bootstrap 3 --> <div class="media"> <!-- Контент медиа-объекта --> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> <!-- Медиа-элемент (изображение). Класс media-right располагает медиа-элемент относительно контента справа --> <div class="media-right"> <img class="media-object" src="image.png" alt=""> </div> </div>
<!-- Bootstrap 4 --> <div class="media"> <!-- Медиа-элемент (изображение) --> <div class="media-body"> <h5 class="mt-0">...</h5> <p>...</p> </div> <!-- Контент, состоящий из заголовка и некоторого текста --> <img class="ml-3" src="image.png" alt="..."> </div>
Список из медиа-объектов
Медиа-объекты (классы) можно использовать в элементах HTML списка.

HTML-код списка в Bootstrap 3:
<!-- Bootstrap 3 --> <!-- Контейнер для медиа-объектов --> <ul class="media-list"> <!-- Первый медиа-объект --> <li class="media"> <div class="media-left"> <img class="media-object" src="image-1.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> </li> <!-- Второй медиа-объект --> <li class="media"> <div class="media-left"> <img class="media-object" src="image-2.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">...</h4> ... </div> </li> </ul>
В Bootstrap 4 создание списка из медиа-объектов осуществляется немного по-другому.
Первое что необходимо выполнить – это добавить класс list-unstyled к элементу ul или ol. Это действие удалит стили, которые браузер применяет для оформления этих элементов по умолчанию.
Второе – это добавить к элементам li класс media.
Для настройки отступов между элементами в Bootstrap 4 используйте классы spacing.
<!-- Bootstrap 4 --> <ul class="list-unstyled"> <!-- Первый медиа-объект --> <li class="media mb-4"> <img class="mr-3" src="image-1.png" alt="..."> <div class="media-body"> <h5 class="mt-0 mb-1">...</h5> ... </div> </li> <!-- Второй медиа-объект --> <li class="media mb-4"> <img class="mr-3" src="image-2.png" alt="..."> <div class="media-body"> <h5 class="mt-0 mb-1">...</h5> ... </div> </li> </ul>
У меня почему-то не отображаются картинки. В чем может быть причина?
Чтобы не путаться лучше использовать абсолютные пути:
В данном примере картинка image.png расположена в папке images, которая в свою очередь расположена в папке assets. А папка assets в корне сайта.
Попробуйте проверить пути…
Очень хороший инструмент для этого — это вкладка Console в панели разработчика (F12 в браузере). Там отображаются все ошибки.