Медиа-объекты

Компонент медиа-объектов 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>

Автор: Йен Диксон

Последнее изменение: 21.02.2024