Объекты мультимедиа Bootstrap
Медиа-объекты
Bootstrap предоставляет простой способ выравнивания медиа-объектов (таких как изображения или видео) слева или справа от некоторого контента. Это можно использовать для отображения комментариев в блогах, твитов и т. д.:
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джейн Доу Опубликовано 20 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Алисия Киз Опубликовано 25 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль. Перед шоу нет страха перед преступлением или удобством.
Базовый медиа-объект
Джон Доу
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джон Доу
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Пример
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Объяснение примера
Используйте элемент <div> с .mediaклассом, чтобы создать контейнер для медиа-объектов.
Используйте .media-leftкласс, чтобы выровнять медиа-объект (изображение) по левому краю, или .media-rightкласс, чтобы выровнять его по правому краю.
Текст, который должен появиться рядом с изображением, помещается внутрь контейнера с class=" media-body".
Кроме того, вы можете использовать .media-headingдля заголовков.
Верхнее, среднее или нижнее выравнивание
Медиа-объект также может быть выровнен по верхнему, среднему или нижнему краю с классом media-top, media-middleили :media-bottom
Медиа Топ
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Медиа Средний
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Медиа снизу
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Пример
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Вложение медиа-объектов
Медиа-объекты также могут быть вложенными (медиа-объект внутри медиа-объекта):
Пример
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джон Доу Опубликовано 20 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джон Доу Опубликовано 21 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Другой пример вложения
Пример
Джон Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джон Доу Опубликовано 20 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джон Доу Опубликовано 21 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джейн Доу Опубликовано 20 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.
Джейн Доу Опубликовано 19 февраля 2016 г.
Боль сама по себе любовь к боли, основные экологические проблемы, но я даю этому виду время, чтобы упасть, так что какая-то большая боль и боль.