Bootstrap - Oggetto multimediale
Questo capitolo discute dell'oggetto Media. Si tratta di stili di oggetti astratti per la creazione di vari tipi di componenti (come commenti di blog, Tweet e così via) che presentano un'immagine allineata a sinistra o a destra accanto al contenuto testuale. L'obiettivo dell'oggetto media è di rendere il codice per lo sviluppo di questi blocchi di informazioni drasticamente più breve.
L'obiettivo degli oggetti multimediali (markup leggero, facile estendibilità) viene raggiunto applicando classi ad alcuni dei markup semplici. Ci sono due forme per l'oggetto multimediale:
.media - Questa classe consente di posizionare un oggetto multimediale (immagini, video e audio) a sinistra oa destra di un blocco di contenuto.
.media-list- Se stai preparando un elenco in cui gli elementi faranno parte di un elenco non ordinato, utilizza una classe. utile per thread di commenti o elenchi di articoli.
Vediamo un esempio di seguito di oggetto multimediale predefinito:
<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>
Vediamo un esempio di elenco dei media -
<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>