Документация и примеры для медиа-объекта Bootstrap для создания часто повторяющихся компонентов, таких как комментарии в блогах, твиты и тому подобное.

Пример

Медиа-объект помогает создавать сложные и повторяющиеся компоненты, в которых некоторые медиа позиционируются рядом с контентом, который не охватывает упомянутые медиа. Кроме того, благодаря flexbox он делает это только с двумя обязательными классами.

Ниже приведен пример одного медиа-объекта. Требуются только два класса - обертка .media и .media-body вокруг Вашего контента. Необязательные отступы и поля можно контролировать с помощью утилит интервалов.

Placeholder64x64
Медиа заголовок

Вы сделаете то же самое для меня? Пришло время столкнуться с музыкой. Я больше не твоя муза. Слышал, это прекрасно, будь судьей, и мои девочки проголосуют. Я чувствую внутри себя феникса. Небеса завидуют нашей любви, ангелы плачут свыше. Да, ты ведешь меня в утопию.

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Медиа заголовок</h5>
    <p>Вы сделаете то же самое для меня? Пришло время столкнуться с музыкой. Я больше не твоя муза. Слышал, это прекрасно, будь судьей, и мои девочки проголосуют. Я чувствую внутри себя феникса. Небеса завидуют нашей любви, ангелы плачут свыше. Да, ты ведешь меня в утопию.</p>
  </div>
</div>
Flexbug #12: Строковые элементы не рассматриваются как гибкие

Internet Explorer 10-11 не отображает встроенные элементы, такие как ссылки или изображения (или псевдоэлементы ::before и ::after) как гибкие элементы. Единственный обходной путь - установить не встроенное значение display (например, block, inline-block или flex). Мы предлагаем использовать .d-flex, одну из наших утилит отображения, как простое решение.

Источник: Flexbugs на GitHub

Вложенность

Медиа-объекты могут быть бесконечно вложенными, хотя мы рекомендуем Вам остановиться на каком-то этапе. Поместите вложенный файл .media в .media-body родительского медиа-объекта.

Placeholder64x64
Медиа заголовок

Стоять на передовой, когда начинают падать бомбы. Небеса завидуют нашей любви, ангелы плачут свыше. Не могу заменить тебя миллионом колец. Мальчик, когда ты со мной, я попробую. Нет пути назад. До того, как ты встретил меня, я был в порядке, но все было довольно тяжело. Тяжела голова, носящая корону.

Placeholder64x64
Медиа заголовок

Приветствую близких, давайте отправимся в путешествие. Да, мы заставляем ангелов плакать, проливая дождь на землю сверху. Подарите вам что-нибудь хорошее на радость. Я прикусывала язык и задерживала дыхание. Я заставляю твое сердце биться быстрее в моих обтягивающих джинсах. Когда я иду один в другом ритме. Летом после школы, когда мы впервые встретились. Ты такой гипнотизирующий, можешь ли ты быть дьяволом? Могли бы вы быть ангелом? Пришло время вывести большие воздушные шары. Думал, что я был исключением. Бикини, цукини, мартини, без сладостей.

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Медиа заголовок</h5>
    <p>Стоять на передовой, когда начинают падать бомбы. Небеса завидуют нашей любви, ангелы плачут свыше. Не могу заменить тебя миллионом колец. Мальчик, когда ты со мной, я попробую. Нет пути назад. До того, как ты встретил меня, я был в порядке, но все было довольно тяжело. Тяжела голова, носящая корону.</p>

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Медиа заголовок</h5>
        <p>Приветствую близких, давайте отправимся в путешествие. Да, мы заставляем ангелов плакать, проливая дождь на землю сверху. Подарите вам что-нибудь хорошее на радость. Я прикусывала язык и задерживала дыхание. Я заставляю твое сердце биться быстрее в моих обтягивающих джинсах. Когда я иду один в другом ритме. Летом после школы, когда мы впервые встретились. Ты такой гипнотизирующий, можешь ли ты быть дьяволом? Могли бы вы быть ангелом? Пришло время вывести большие воздушные шары. Думал, что я был исключением. Бикини, цукини, мартини, без сладостей.</p>
      </div>
    </div>
  </div>
</div>

Выравнивание

Мультимедиа в медиа-объекте можно выровнять с помощью утилит flexbox по верхнему (по умолчанию), среднему или концу Вашего содержимого .media-body.

Placeholder64x64
Медиа по верхнему краю

Я собираюсь ввести ее в кому. Вы приводите сотню причин и говорите, что действительно собираетесь попробовать. Так что я тихонько сел, вежливо согласился. Костюм для моей коронной битвы. А на мой 18-й день рождения нам сделали одинаковые татуировки. Так шикарно, да, она классика. Я готов к менее путешествующим дорогам.

Я иду по воздуху (сегодня вечером). Но на землю. Ты оригинальный, не подлежит замене. Но в другой жизни я была бы твоей девушкой. Мы поехали в Кали и напились на пляже. Мы можем танцевать, пока не умрем, мы с тобой будем вечно молоды. Видел, как ты в центре города поешь блюз.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Медиа по верхнему краю</h5>
    <p>Я собираюсь ввести ее в кому. Вы приводите сотню причин и говорите, что действительно собираетесь попробовать. Так что я тихонько сел, вежливо согласился. Костюм для моей коронной битвы. А на мой 18-й день рождения нам сделали одинаковые татуировки. Так шикарно, да, она классика. Я готов к менее путешествующим дорогам.</p>
    <p>Я иду по воздуху (сегодня вечером). Но на землю. Ты оригинальный, не подлежит замене. Но в другой жизни я была бы твоей девушкой. Мы поехали в Кали и напились на пляже. Мы можем танцевать, пока не умрем, мы с тобой будем вечно молоды. Видел, как ты в центре города поешь блюз.</p>
  </div>
</div>
Placeholder64x64
Медиа по центру

Она остынет, как морозильник. В конце концов. Жалящая, как пчела, я заработал свои полосы. Бикини, цукини, мартини, без сладостей. Надеюсь, у тебя здоровый аппетит. Мы можем танцевать, пока не умрем, мы с тобой будем вечно молоды. Мы живем жизнью. Мы делаем это правильно. Слухи на улице, тебе есть что показать мне, мне.

Хочу посмотреть шоу в 3D, фильм. Говорят, бойся, ты не такой, как все, футуристический любовник. Откройте свое сердце. Так что я тихонько сел, вежливо согласился. В прошлую пятницу вечером. Да, тебе повезло, если ты летишь на ее самолете. Я буду твоим подарком, подарю тебе что-нибудь хорошее на празднование.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Медиа по центру</h5>
    <p>Она остынет, как морозильник. В конце концов. Жалящая, как пчела, я заработал свои полосы. Бикини, цукини, мартини, без сладостей. Надеюсь, у тебя здоровый аппетит. Мы можем танцевать, пока не умрем, мы с тобой будем вечно молоды. Мы живем жизнью. Мы делаем это правильно. Слухи на улице, тебе есть что показать мне, мне.</p>
    <p class="mb-0">Хочу посмотреть шоу в 3D, фильм. Говорят, бойся, ты не такой, как все, футуристический любовник. Откройте свое сердце. Так что я тихонько сел, вежливо согласился. В прошлую пятницу вечером. Да, тебе повезло, если ты летишь на ее самолете. Я буду твоим подарком, подарю тебе что-нибудь хорошее на празднование.</p>
  </div>
</div>
Placeholder64x64
Медиа по нижнему краю

Давай, пусть твои цвета вспыхнут. Я чувствую этот свет внутри меня. Всю ночь они играют, твоя песня. От Токио до Мексики, до Рио. Нет пути назад. Но на землю. Волшебный, красочный, мистер Тайна, ее. Другая ДНК, они вас не понимают.

Но на землю. У нее это есть, je ne sais quoi, ты это знаешь. Я вижу надпись на стене. Мальчики ломают себе шею, пытаясь подкрасться немного. Возьми меня, та-та-возьми меня. Откройте свое сердце. Думал, что я был исключением. Бум бум бум. Пляж Венеции и Палм-Спрингс, лето - это все. Верните ритм. (Это то, как мы это делаем)

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Медиа по нижнему краю</h5>
    <p>Давай, пусть твои цвета вспыхнут. Я чувствую этот свет внутри меня. Всю ночь они играют, твоя песня. От Токио до Мексики, до Рио. Нет пути назад. Но на землю. Волшебный, красочный, мистер Тайна, ее. Другая ДНК, они вас не понимают.</p>
    <p class="mb-0">Но на землю. У нее это есть, je ne sais quoi, ты это знаешь. Я вижу надпись на стене. Мальчики ломают себе шею, пытаясь подкрасться немного. Возьми меня, та-та-возьми меня. Откройте свое сердце. Думал, что я был исключением. Бум бум бум. Пляж Венеции и Палм-Спрингс, лето - это все. Верните ритм. (Это то, как мы это делаем)</p>
  </div>
</div>

Порядок

Измените порядок содержимого в медиа-объектах, изменив сам HTML или добавив некоторый настраиваемый CSS Flexbox, чтобы установить свойство order (целое число по Вашему выбору).

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

Я знаю, что будут жертвы, но это цена. Вы достаточно храбры, чтобы позволить мне увидеть вашего павлина? Будь своей подростковой мечтой сегодня вечером. Угу, я тебя вижу. Нет пути назад. Ага, мы максимально использовали кредитные карты и нас выгнали из бара. Так что позволь мне надеть твой костюм на день рождения. Вы можете влюбиться, когда встретите ее. Был мир в твоих руках. Не позволяй величию сбить тебя с толку, о, о да. Теперь мы говорим об астрологии, делаем ногти, все по-японски. Сделай меня своей Афродитой.

Placeholder64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Медиа-объект</h5>
    <p>Я знаю, что будут жертвы, но это цена. Вы достаточно храбры, чтобы позволить мне увидеть вашего павлина? Будь своей подростковой мечтой сегодня вечером. Угу, я тебя вижу. Нет пути назад. Ага, мы максимально использовали кредитные карты и нас выгнали из бара. Так что позволь мне надеть твой костюм на день рождения. Вы можете влюбиться, когда встретите ее. Был мир в твоих руках. Не позволяй величию сбить тебя с толку, о, о да. Теперь мы говорим об астрологии, делаем ногти, все по-японски. Сделай меня своей Афродитой.</p>
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

Медиа-список

Поскольку у медиа-объекта очень мало структурных требований, Вы также можете использовать эти классы в элементах HTML списка. На Ваш <ul> или <ol>, добавьте .list-unstyled, чтобы удалить все стили списка браузера по умолчанию, а затем примените .media к Вашим <li>. Как всегда, для точной настройки используйте утилиты интервалов.

  • Placeholder64x64
    Медиа-объект на основе списка

    Все мои девочки винтажные Chanel baby. Так что можешь съесть свой торт. Сегодня вечером, сегодня вечером, сегодня вечером я выхожу в эфир. Медленно проглатывая свой страх, да, да. Быстро превращаясь в молнию. Так жарко и тяжело, До рассвета. Эта сказка заканчивается рыцарем в сияющих доспехах. Тяжела голова, носящая корону.

  • Placeholder64x64
    Медиа-объект на основе списка

    Может быть причина, по которой все двери закрыты. Потому что однажды ты мой, когда ты мой. Будь своей подростковой мечтой сегодня вечером. Тяжела голова, носящая корону. Это даже не праздник, праздновать нечего. Идеальный шторм, идеальный шторм.

  • Placeholder64x64
    Медиа-объект на основе списка

    Вы достаточно храбры, чтобы позволить мне увидеть вашего павлина? Нет пути назад. Это последний раз, когда вы говорите после последней разорванной строки. В конце концов.

<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Медиа-объект на основе списка</h5>
      <p>Все мои девочки винтажные Chanel baby. Так что можешь съесть свой торт. Сегодня вечером, сегодня вечером, сегодня вечером я выхожу в эфир. Медленно проглатывая свой страх, да, да. Быстро превращаясь в молнию. Так жарко и тяжело, До рассвета. Эта сказка заканчивается рыцарем в сияющих доспехах. Тяжела голова, носящая корону.</p>
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Медиа-объект на основе списка</h5>
      <p>Может быть причина, по которой все двери закрыты. Потому что однажды ты мой, когда ты мой. Будь своей подростковой мечтой сегодня вечером. Тяжела голова, носящая корону. Это даже не праздник, праздновать нечего. Идеальный шторм, идеальный шторм.</p>
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Медиа-объект на основе списка</h5>
      <p>Вы достаточно храбры, чтобы позволить мне увидеть вашего павлина? Нет пути назад. Это последний раз, когда вы говорите после последней разорванной строки. В конце концов.</p>
    </div>
  </li>
</ul>