Indice dei contenuti
Media object
Il componente Media object crea una struttura per la visualizzazione di contenuti testuali con immagini floattate a destra o sinistra. Casi tipici sono i commenti di un blog o l'anteprima di un articolo con un titolo, un sommario e una foto di accompagnamento.
Markup HTML di base
<div class="media"> <img class="media-object pull-left" src="img/post-thumb-1.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Titolo</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.</p> </div> </div>
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.
L'oggetto va racchiuso in un div con classe .media.
Al suo interno si inserisce poi l'immagine. Ad essa va aggiunta la classe .media-object e la classe .pull-left se la si vuole floattata a sinistra, .pull-right se la si vuole floattata a destra.
La parte testuale va inclusa in un div con classe .media-body.
Al suo interno, se c'è un titolo, va marcato con la classe .media-heading.
Varianti: immagine in un link
Se il media object (l'immagine) è racchiuso in un link, le classi .pull-left o .pull-right vanno dichiarate sull'elemento a.
<div class="media"> <a href="#" class="pull-left"> <img class="media-object" src="img/post-thumb-1.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Titolo</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.</p> </div> </div>
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.
Varianti: liste di media objects
È possibile strutturare una serie di media objects in liste.
<ul class="media-list"> <li class="media"> <a href="#" class="pull-left"> <img class="media-object" src="img/post-thumb-1.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Titolo</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.</p> </div> </li> <li class="media"> <a href="#" class="pull-left"> <img class="media-object" src="img/post-thumb-1.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Titolo</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.</p> </div> </li> <li class="media"> <a href="#" class="pull-left"> <img class="media-object" src="img/post-thumb-1.jpg"> </a> <div class="media-body"> <h4 class="media-heading">Titolo</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.</p> </div> </li> </ul>
-
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.
-
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.
-
Titolo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.
In questo caso, a livello di markup, sull'elemento ul va applicata la classe .media-list, mentre la classe .media, invece che su un div, va aggiunta agli elementi li. Al loro interno si mantiene invariata la struttura.