Bootstrap objetos multimídia

Neste capítulo, vamos discutir objectos multimédia Bootstrap. Estes estilo de objeto abstrato é recomendado para uma variedade de tipos de componentes (por exemplo: Comentários do blog), podemos usar a foto-texto no componente, a imagem pode ser justificado à esquerda ou à direita justificado. objetos de mídia pode usar menos código para implementar objetos multimídia e corrida texto.

Você pode adicionar as duas formas seguintes em tags HTML para definir o objeto de mídia:

• .media: Esta classe permite que os objetos de mídia nos multimédia (imagens, vídeo) float para a esquerda ou para o bloco de conteúdo certo.
• .media-list: Se você precisa de uma lista dos vários elementos faz parte da lista não ordenada, você pode usar a classe. Os comentários podem ser usados ​​para listar e a lista de artigos.

Agora vamos olhar para os exemplos do uso de objectos multimédia .media classe:

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

Ver exemplos on-line

Os exemplos acima mostram o efeito dos seguintes:

Agora vamos olhar para os exemplos do uso de multimedia objeto classe .media-list:

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

Ver exemplos on-line

Os exemplos acima mostram o efeito dos seguintes: