in English

Медиа объект

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

Пример

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

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

Placeholder 64x64
Заголовок СМИ

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

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
  </div>
</div>
Flexbug № 12: встроенные элементы не рассматриваются как flex-элементы

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

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

Вложение

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

Placeholder 64x64
Заголовок СМИ

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

Placeholder 64x64
Заголовок СМИ

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

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    <p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        <p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
      </div>
    </div>
  </div>
</div>

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

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

Placeholder 64x64
Ведущие СМИ

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

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

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
    <p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
  </div>
</div>
Placeholder 64x64
Выровненные по центру СМИ

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

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

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
    <p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
  </div>
</div>
Placeholder 64x64
СМИ с выравниванием по нижнему краю

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

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

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
    <p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
  </div>
</div>

Заказ

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

Медиа объект

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

Placeholder 64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    <p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

Список СМИ

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

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

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

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

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

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

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

<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
    </div>
  </li>
</ul>