Компонент медиа-объектов Bootstrap обеспечивает простой способ выравнивания текста и медиа-объектов при их близком расположении. Это позволяет быстро и легко перемещать медиа влево или вправо внутри блока. Полезно для компонентов пользовательского интерфейса, таких как комментарии в блогах, твиты и др.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Заголовок медиа</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="media">
<img class="mr-3" src="/example/image/11s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Заголовок медиа</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
Как пользоваться
Чтобы использовать компонент медиа-объектов, необходимо применить класс для внешнего контейнера, а также отдельные классы для медиа и текста.
- Внешний контейнер
- Поместите всё целиком в <div> и присвойте ему класс .media.
- Медиа-объект
- Для медиа-объекта (например: <img>, <video> и др.) не требуется никакого специального класса. Просто вставьте медиа-объект в код HTML, где это требуется.
- Текст
- Примените класс .media-body к <div> или к другому элементу, который выступает родителем для текста. Также примените .media-heading к любым заголовкам внутри .media-body.
- margin
- Используйте утилиты Booststrap для применения margin к медиа-объектам (например, .mr-3).
Вложенные медиа-объекты
Вы можете вкладывать один медиа-объект в другой (т. е. весь медиа-блок). Вложенный медиа-блок будет иметь отступ по умолчанию.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
<div class="media">
<img class="mr-3" src="/example/image/10s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Вложенный медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
Горизонтальное выравнивание
Вы можете поменять в разметке местами медиа-объект и текст, чтобы заголовок с текстом располагались перед изображением.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
<img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo">
</div>
<div class="media">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
<img class="mr-3" src="/example/image/11s.jpg" alt="Sample photo">
</div>
Кроме этого вы можете использовать стилевое свойство order в своём пользовательском CSS-файле, чтобы поменять порядок элементов без изменения их в исходном коде.
Вертикальное выравнивание
Медиа-объекты по умолчанию выравниваются по верхнему краю. Вы можете поменять это с помощью любого из служебных классов. Например, чтобы выровнять по центру, используйте d-flex align-self-center. Здесь d-flex применяет display: flex к элементу.
По середине
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<img class="d-flex align-self-center mr-3" src="/example/image/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
По низу
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<img class="d-flex align-self-end mr-3" src="/example/image/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
Два медиа-объекта
В медиа-блоке можно разместить более одного изображения.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<div>
<img class="mr-2" src="/example/image/9s.jpg" alt="Sample photo">
<img class="mr-3" src="/example/image/10s.jpg" alt="Sample photo">
</div>
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
Выравнивание по левому и правому краю
В медиа-блоке могут отображаться два медиа-объекта — один слева, а другой справа. Текст в разметке следует вставить между ними.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="media">
<img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
<img class="ml-3" src="/example/image/10s.jpg" alt="Sample photo">
</div>
Спискок медиа-объектов
Вы можете создать список, просто поместив медиа-объекты внутрь списка. Подобный список может оказаться полезен для отображения пользовательских комментариев, списка статей и др.
Чтобы создать список медиа-объектов, примените класс .list-unstyled к элементу <ul>, а класс .media к каждому элементу <li>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="/example/image/9s.jpg" alt="Photo of Pukeko in New Zealand">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
<div class="media">
<img class="mr-3" src="/example/image/10s.jpg" alt="Photo of bird in the Philippines">
<div class="media-body">
<h4>Вложенный медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</li>
<li class="media">
<img class="mr-3" src="/example/image/11s.jpg" alt="Photo of sunset in Laos">
<div class="media-body">
<h4>Медиа-объект</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.</p>
</div>
</li>
</ul>