Bootstrap - objeto de mídia
Este capítulo discute sobre o objeto de mídia. Esses são estilos de objetos abstratos para a construção de vários tipos de componentes (como comentários de blog, tweets, etc.) que apresentam uma imagem alinhada à esquerda ou à direita ao lado do conteúdo textual. O objetivo do objeto de mídia é tornar o código para desenvolver esses blocos de informações drasticamente mais curto.
O objetivo dos objetos de mídia (marcação leve, facilidade de extensão) é alcançado aplicando classes a algumas marcações simples. Existem duas formas para o objeto de mídia -
.media - Esta classe permite flutuar um objeto de mídia (imagens, vídeo e áudio) à esquerda ou à direita de um bloco de conteúdo.
.media-list- Se você estiver preparando uma lista onde os itens farão parte de uma lista não ordenada, use uma classe. útil para tópicos de comentários ou listas de artigos.
Vamos ver um exemplo abaixo de objeto de mídia padrão -
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
Vejamos um exemplo de lista de mídia -
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class = "media">
<a class = "pull-right" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>