in English

Media object

Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.

Example

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.

Abaixo está um exemplo de um único objeto de mídia. Apenas duas classes são necessárias – o wrapper .mediae o .media-bodyem torno do seu conteúdo. O preenchimento e a margem opcionais podem ser controlados por meio de utilitários de espaçamento .

Placeholder 64x64
Título de mídia

Você fará o mesmo por mim? É hora de encarar a música Eu não sou mais sua musa. Ouvi dizer que é lindo, seja o juiz e minhas garotas vão votar. Eu posso sentir uma fênix dentro de mim. O céu está com ciúmes do nosso amor, os anjos estão chorando lá de cima. Sim, você me leva para a utopia.

<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: Elementos inline não são tratados como itens flexíveis

O Internet Explorer 10-11 não renderiza elementos embutidos como links ou imagens (ou ::beforepseudoelementos ::after) como itens flexíveis. A única solução é definir um displayvalor não embutido (por exemplo, block, inline-blockou flex). Sugerimos usar .d-flex, um de nossos utilitários de exibição , como uma solução fácil.

Fonte: Flexbugs no GitHub

Aninhamento

Os objetos de mídia podem ser aninhados infinitamente, embora sugerimos que você pare em algum momento. Coloque aninhado .mediadentro .media-bodyde um objeto de mídia pai.

Placeholder 64x64
Título de mídia

Ficar na linha de frente quando as bombas começarem a cair. O céu está com ciúmes do nosso amor, os anjos estão chorando lá de cima. Não posso substituí-lo por um milhão de anéis. Rapaz, quando você estiver comigo eu vou te dar um gostinho. Não há volta. Antes de você me conhecer eu estava bem, mas as coisas estavam meio pesadas. Pesada é a cabeça que usa a coroa.

Placeholder 64x64
Título de mídia

Saudações entes queridos, vamos fazer uma viagem. Sim, fazemos os anjos chorarem, chovendo sobre a terra lá de cima. Dê-lhe algo bom para comemorar. Eu costumava morder minha língua e prender a respiração. Eu vou fazer seu coração acelerar no meu jeans apertado. Enquanto eu marcho sozinho para uma batida diferente. Verão depois do ensino médio, quando nos conhecemos. Você é tão hipnotizante, você poderia ser o diabo? Você poderia ser um anjo? É hora de trazer os grandes balões. Pensava que eu era a exceção. Biquínis, abobrinhas, martínis, nada de biquínis.

<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>

Alinhamento

A mídia em um objeto de mídia pode ser alinhada com os utilitários flexbox na parte superior (padrão), no meio ou no final do seu .media-bodyconteúdo.

Placeholder 64x64
Mídia com alinhamento superior

Vou colocá-la em coma. Você dá uma centena de razões e diz que realmente vai tentar. Então eu sentei em silêncio, concordei educadamente. Preparando-se para minha batalha de coroação. E no meu aniversário de 18 anos fizemos tatuagens iguais. Tão très chic, sim, ela é um clássico. Estou pronto para a estrada menos percorrida.

Estou andando no ar (esta noite). Mas pé no chão. Você é original, não pode ser substituído. Mas em outra vida eu seria sua garota. Nós dirigimos para Cali e ficamos bêbados na praia. Podemos dançar, até morrermos, você e eu, seremos jovens para sempre. Vi você no centro cantando Blues.

<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
Mídia alinhada ao centro

Ela vai ficar fria como um freezer. No final de tudo. Picando como uma abelha, ganhei minhas listras. Biquínis, abobrinhas, martínis, nada de biquínis. Espero que você tenha um apetite saudável. Podemos dançar, até morrermos, você e eu, seremos jovens para sempre. Estamos vivendo a vida. Estamos fazendo certo. Palavra na rua, você tem algo para me mostrar, eu.

Quero ver o show em 3D, um filme. Dizem, tenha medo de não ser como os outros, amante futurista. Abra seu coração. Então eu sentei em silêncio, concordei educadamente. Última sexta à noite. Sim, você tem sorte se estiver no avião dela. Eu serei seu presente, lhe darei algo bom para comemorar.

<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
Mídia alinhada por baixo

Vamos, deixe suas cores explodirem. Eu posso sentir essa luz que está dentro de mim. A noite toda eles estão tocando, sua música. De Tóquio ao México, ao Rio. Não há volta. Mas pé no chão. Mágico, colorido, Sr. Mistério, ee. DNA diferente, eles não entendem você.

Mas pé no chão. Ela tem isso, je ne sais quoi, você sabe disso. Eu posso ver a escrita na parede. Os garotos quebram o pescoço tentando dar uma espiadinha. Leve-me, ta-ta-leve-me. Abra seu coração. Pensava que eu era a exceção. Boom Boom Boom. Venice Beach e Palm Springs, o verão é tudo. Traga o ritmo de volta. (É assim que nós fazemos)

<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>

Ordem

Altere a ordem do conteúdo nos objetos de mídia modificando o próprio HTML ou adicionando algum CSS flexbox personalizado para definir a orderpropriedade (para um número inteiro de sua escolha).

Objeto de mídia

Eu sei que haverá sacrifício, mas esse é o preço. Você é corajoso o suficiente para me deixar ver seu pavão? Seja seu sonho adolescente esta noite. Uh-huh, eu vejo você. Não há volta. Sim, estouramos nossos cartões de crédito e fomos expulsos do bar. Então deixe-me colocar você em seu terno de aniversário. Você pode se apaixonar quando a conhecer. Tinha o mundo na palma de suas mãos. Não deixe a grandeza te derrubar, oh, oh sim. Agora estamos falando de astrologia, fazendo as unhas, tudo japonês. Faça de mim sua Afrodite.

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>

Lista de mídia

Como o objeto de mídia tem tão poucos requisitos estruturais, você também pode usar essas classes em elementos HTML de lista. No seu <ul>ou <ol>, adicione o .list-unstyledpara remover qualquer estilo de lista padrão do navegador e, em seguida, aplique .mediaao seu <li>s. Como sempre, use utilitários de espaçamento sempre que necessário para ajustar.

  • Placeholder 64x64
    List-based media object

    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.

  • Placeholder 64x64
    List-based media object

    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.

  • Placeholder 64x64
    List-based media object

    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.

<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>