Bootstrap 3 и 4 - Медиа-компонент

Bootstrap 3 Bootstrap 4

Статья, в которой рассматривается медиа-компонент (media) платформы Twitter Bootstrap 3 и 4.

Медиа-компонент - это абстрактный элемент, который является основой для построения на сайте сложных блоков, состоящих из комментариев, сообщений и т.п. Один комментарий или одно сообщение в этом сложном блоке - это один медиа-компонент. Следовательно, один сложный блок может состоять из большого количества повторяющихся медиа-компонентов.

Медиа-компонент состоит из медиа-объекта (изображения, видео или аудио) и блока с текстовым содержимым.

Bootstrap 3 и 4 - Медиа-компонент

Настройка медиа-компонента, т.е. указание расположения медиа-объекта относительно контекста осуществляется с помощью классов .media-left, .media-right, .media-middle, .middle-bottom. Кроме этого, Twitter Bootstrap 3 и 4 позволяет вкладывать одни медиа-компоненты в другие.

Внимание: если в Twitter Bootstrap 4 включен режим flexbox, то медиа-компоненты будут использовать flex-стили там, где это возможно.

Настраивать расположение медиа-объекта относительно блока с текстовым содержимым можно в двух направлениях: горизонтальном и вертикальном.

В горизонтальном направлении медиа-объект (изображение, видео или аудио) относительно контента можно расположить слева (.media-left) или справа (.media-right).

Например, создать медиа-компонент, в котором меди-объект (изображение) располагается относительно блока с содержимым слева:

<!--Медиа-компонент-->
<div class="media">
  <!--Элемент a (ссылка), содержащий медиа-объект (изображение). Для элемента a задан класс .media-left, который располагает медиа-объект относительно контента слева-->
  <a class="media-left" href="#">
    <!--Медиа-объект (изображение)-->
    <img class="media-object" src="image.png" alt="">
  </a>
  <!--Блок, содержащий контент-->
  <div class="media-body">
    <!--Заголовок-->
    <h4 class="media-heading">...</h4>
    <!--Некоторый текст-->
    <p>...</p>
  </div>
</div>

Bootstrap 3 и 4 - Медиа-компонент, в котором меди-объект (изображение) располагается относительно блока с содержимым слева

Например, создать медиа-компонент, в котором медиа-объект (изображение) располагается относительно блока с содержимым справа:

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">...</h4>
    <p>...</p>
  </div>
  <div class="media-right">
    <a href="#">
      <img class="media-object" src="image.png" alt="">
    </a>
  </div>
</div>

Bootstrap 3 и 4 - Медиа-компонент, в котором меди-объект (изображение) располагается относительно блока с содержимым справа

В вертикальном направлении медиа-объект (изображение, видео или аудио) можно выровнять:

  • по верхнему краю (по умолчанию) блока, содержащего контент.
  • по середине (.media-middle) блока, содержащего контент.
  • по нижнему краю (.middle-bottom) блока, содержащего контент.

Например, в медиа-компоненте расположить медиа-объект (изображение) в вертикальном направлении по верхнему краю блока с текстовым содержимым:

<div class="media">
  <!—Медиа-блок, выровненный в вертикальном направлении по верхнему краю контента (по умолчанию)-->
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="image.png" alt="">
    </a>
  </div>
  <!--Блок, содержащий контент-->
  <div class="media-body">
    <h4 class="media-heading">...</h4>
    <p>...</p>
  </div>
</div>

Bootstrap 3 и 4 - Медиа-компонент, в котором медиа-объект (изображение) в вертикальном направлении располагается по верхнему краю блока с текстовым содержимым

Например, в медиа-компоненте расположить медиа-объект (изображение) в вертикальном направлении посередине блока с текстовым содержимым.

<div class="media">
  <!--Медиа-блок, выровненный в вертикальном направлении посередине блока, содержащего контент (.media-middle)-->
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="image.png" alt="">
    </a>
  </div>
  <!--Блок, содержащий контент-->
  <div class="media-body">
    <h4 class="media-heading">...</h4>
    <p>...</p>
  </div>
</div>

Bootstrap 3 и 4 - Медиа-компонент, в котором медиа-объект (изображение) в вертикальном направлении располагается посередине блока с текстовым содержимым

Например, в медиа-компоненте расположить медиа-объект (изображение) в вертикальном направлении по нижнему краю блока с текстовым содержимым:

<div class="media">
  <!--Медиа-блок, выровненный в вертикальном направлении по нижнему краю контента (.media-bottom)-->
  <div class="media-left media-bottom">
    <a href="#">
      <img class="media-object" src="image.png" alt="">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">...</h4>
    <p>...</p>
  </div>
</div>

Bootstrap 3 и 4 - Медиа-компонент, в котором медиа-объект (изображение) в вертикальном направлении располагается по нижнему краю блока с текстовым содержимым

Twitter Bootstrap 3 и 4 позволяет располагать один медиа-компонент внутри другого, т.е. создавать вложенные медиа-компоненты. Для того чтобы разместить некоторый медиа-компонент в другом, необходимо первый поместить после текстового содержимого второго.

<!--Медиа-компонент 1-->
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="image.png" alt="">
    </a>
  </div>
  <div class="media-body">
    <!--Начало текстового содержимого-->
    <h4 class="media-heading">...</h4>
    <p>...</p>
    <!--Конец текстового содержимого-->
    <!--Медиа-компонент 2 (вложенный в медиа-компонент 1-->
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object" src="image.png" alt="">
      </a>
      <div class="media-body">
        <h4 class="media-heading">...</h4>
        <p>...</p>
      </div>
    </div>
    <!--Конец медиа-компонента 2-->
  </div>
</div>

Bootstrap 3 и 4 - Один медиа-компонент вложенный в другой

Twitter Bootstrap 3 и 4 позволяет располагать один медиа-компонент внутри другого, т.е. создавать вложенные медиа-компоненты. Для того чтобы разместить некоторый медиа-компонент в другом, необходимо первый поместить после текстового содержимого второго.

<!--Список, в котором элементы li являются медиа-компонентами-->
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="image.png" alt="">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">...</h4>
      <p></p>
      <!-- Вложенный медиа-компонент -->
      <div class="media">
        <a class="media-left" href="#">
          <img class="media-object" src="image.png" alt="">
        </a>
        <div class="media-body">
          <h4 class="media-heading">...</h4>
          <p></p>
          <!-- Вложенный медиа-компонент -->
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="image.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">...</h4>
              <p>...</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Вложенный медиа-компонент -->
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="image.png" alt="">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">...</h4>
          <p>...</p>
        </div>
      </div>
    </div>
  </li>
  <li class="media">
    <div class="media-body">
      <h4 class="media-heading">...</h4>
      <p>...</p>
    </div>
    <div class="media-right">
      <a href="#">
        <img class="media-object" src="image.png" alt="">
      </a>
    </div>
  </li>
</ul>

Bootstrap 3 и 4 - Медиа-компоненты в виде списка

Bootstrap 4 - Медиа-компонент (демо)



   Bootstrap 0    7462 0

Комментарии (6)

  1. Владимир # 0
    Есть идеи, как это можно использовать, например, в лендингах?
    1. Александр Мальцев # +1
      В лендингах данный компонент обычно используют для создания блока, содержащего отзывы покупателей о продукте. Картинка — это фото покупателя, а текст — это отзыв или комментарий об этом продукте.
    2. Наталия # 0
      Здравствуйте!
      У меня почему-то не отображаются картинки. В чем может быть причина?
      1. Александр Мальцев # 0
        Скорее всего Вы неправильно установили к ним путь.
        Чтобы не путаться лучше использовать абсолютные пути:
        <img class="media-object" src="/assets/images/image.png" alt="">
        
        В данном примере картинка image.png расположена в папке images, которая в свою очередь расположена в папке assets. А папка assets в корне сайта.
        Попробуйте проверить пути…
        Очень хороший инструмент для этого — это вкладка Console в панели разработчика (F12 в браузере). Там отображаются все ошибки.
        1. Наталия # 0
          Нет, с этим все впорядке. Почему-то ширину выставляет в 0.
          1. Александр Мальцев # 0
            Чтобы с этим разобраться, можно также использовать панель разработчика. Только вкладка будет не Console, a Element. В ней находите нужный элемент и смотрите правильно ли он расположен (может быть, вы какой-то div не закрыли), какие стили на него накладываются… Определяете где же у Вас может быть ошибка…

      Вы должны авторизоваться, чтобы оставлять комментарии.