Objetos de mídia do Bootstrap 4
Objetos de mídia
O Bootstrap fornece uma maneira fácil de alinhar objetos de mídia (como imagens ou vídeos) junto com o conteúdo. Objetos de mídia são frequentemente usados para exibir comentários de blogs, tweets e assim por diante:
John Doe Postado em 19 de fevereiro de 2016
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
John Doe Postado em 20 de fevereiro de 2016
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Objeto de mídia básico
John Doe Postado em 19 de fevereiro de 2016
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Para criar um objeto de mídia, adicione a .mediaclasse a um elemento de contêiner e coloque o conteúdo de mídia dentro de um contêiner filho com a .media-bodyclasse. Adicione preenchimento e margens conforme necessário, com os utilitários de espaçamento:
Exemplo
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Objetos de mídia aninhados
Objetos de mídia também podem ser aninhados (um objeto de mídia dentro de um objeto de mídia):
John Doe Postado em 19 de fevereiro de 2016
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Jane Doe Postado em 20 de fevereiro de 2016
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Para aninhar objetos de mídia, coloque um novo .mediacontêiner dentro do .media-bodycontêiner:
Exemplo
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Imagem de mídia alinhada à direita
John Doe Postado em 19 de fevereiro de 2016
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Para alinhar a imagem de mídia à direita, adicione a imagem após o .media-bodycontêiner:
Exemplo
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Alinhamento Superior, Médio ou Inferior
Use os utilitários flex, align-self-*classes para colocar o objeto de mídia na parte superior, no meio ou na parte inferior:
Topo de mídia
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Meio de mídia
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Parte inferior da mídia
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
A dor em si é o amor da dor, os principais problemas ecológicos, mas eu dou esse tipo de tempo para cair, para que alguma grande dor e dor.
Exemplo
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>