Objetos de mídia de inicialização
Objetos de mídia
O Bootstrap fornece uma maneira fácil de alinhar objetos de mídia (como imagens ou vídeos) à esquerda ou à direita de algum conteúdo. Isso pode ser usado 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.
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.
Alicia Keyes Postado em 25 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. Não há medo de crime ou conveniência antes do show.
Objeto de mídia básico
John Doe
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
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
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Exemplo explicado
Use um elemento <div> com a .mediaclasse para criar um contêiner para objetos de mídia.
Use a .media-leftclasse para alinhar o objeto de mídia (imagem) à esquerda ou a .media-rightclasse para alinhá-lo à direita.
O texto que deve aparecer ao lado da imagem, é colocado dentro de um container com class=" media-body".
Além disso, você pode usar .media-headingpara títulos.
Alinhamento Superior, Médio ou Inferior
O objeto de mídia também pode estar alinhado na parte superior, central ou inferior com a classe media-top, media-middleou media-bottom:
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">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Aninhando objetos de mídia
Objetos de mídia também podem ser aninhados (um objeto de mídia dentro de um objeto de mídia):
Exemplo
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.
John Doe Postado em 21 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.
Outro exemplo de aninhamento
Exemplo
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.
John Doe Postado em 21 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.
Jane 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.