Oggetti multimediali Bootstrap
Oggetti multimediali
Bootstrap fornisce un modo semplice per allineare oggetti multimediali (come immagini o video) a sinistra oa destra di alcuni contenuti. Questo può essere utilizzato per visualizzare commenti sul blog, tweet e così via:
John Doe Pubblicato il 19 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Jane Doe Pubblicato il 20 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Alicia Keyes Inserito il 25 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore. Non c'è paura del cioccolato prima o nessun interesse.
Oggetto multimediale di base
Giovanni Daina
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Giovanni Daina
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Esempio
<!-- 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>
Esempio spiegato
Utilizzare un elemento <div> con la .mediaclasse per creare un contenitore per oggetti multimediali.
Utilizzare la .media-leftclasse per allineare l'oggetto multimediale (immagine) a sinistra o la .media-rightclasse per allinearlo a destra.
Il testo che dovrebbe apparire accanto all'immagine viene inserito all'interno di un contenitore con class=" media-body".
Inoltre, puoi usarlo .media-headingper le intestazioni.
Allineamento superiore, centrale o inferiore
media-topL'oggetto multimediale può anche essere allineato in alto , al centro o in basso con la classe media-middleo media-bottom:
Superiore multimediale
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Media Media
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Fondo multimediale
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Esempio
<!-- 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>
Nidificazione di oggetti multimediali
Gli oggetti multimediali possono anche essere nidificati (un oggetto multimediale all'interno di un oggetto multimediale):
Esempio
John Doe Pubblicato il 19 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
John Doe Pubblicato il 20 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
John Doe Pubblicato il 21 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Un altro esempio di nidificazione
Esempio
John Doe Pubblicato il 19 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
John Doe Pubblicato il 20 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
John Doe Pubblicato il 21 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Jane Doe Pubblicato il 20 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.
Jane Doe Pubblicato il 19 febbraio 2016
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore.