Bootstrap 4 Медиа-объекты
Медиа-объекты
Bootstrap предоставляет простой способ выравнивания медиа-объектов (таких как изображения или видео) вместе с содержимым. Медиа-объекты часто используются для отображения комментариев в блогах, твитов и т. д.:
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джон Доу Опубликовано 20 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Базовый медиа-объект
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Чтобы создать медиа-объект, добавьте .mediaкласс в элемент-контейнер и поместите медиа-контент в дочерний контейнер с .media-bodyклассом. При необходимости добавьте отступы и поля с помощью утилит интервалов:
Пример
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Вложенные медиа-объекты
Медиа-объекты также могут быть вложенными (медиа-объект внутри медиа-объекта):
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джейн Доу Опубликовано 20 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Чтобы вложить медиа-объекты, поместите новый .mediaконтейнер внутрь .media-bodyконтейнера:
Пример
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Выровненное по правому краю мультимедийное изображение
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Чтобы выровнять изображение мультимедиа по правому краю, добавьте изображение после .media-bodyконтейнера:
Пример
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Верхнее, среднее или нижнее выравнивание
Используйте гибкие утилиты, align-self-*классы, чтобы разместить медиа-объект сверху, посередине или снизу:
Медиа Топ
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Медиа Средний
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Медиа снизу
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Пример
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>