Bootstrap 4 oggetti multimediali
Oggetti multimediali
Bootstrap fornisce un modo semplice per allineare oggetti multimediali (come immagini o video) insieme al contenuto. Gli oggetti multimediali vengono spesso utilizzati 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.
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.
Oggetto multimediale di base
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.
Per creare un oggetto multimediale, aggiungi la .mediaclasse a un elemento contenitore e posiziona il contenuto multimediale all'interno di un contenitore figlio con la .media-bodyclasse. Aggiungi padding e margini secondo necessità, con le utilità di spaziatura:
Esempio
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Oggetti multimediali nidificati
Gli oggetti multimediali possono anche essere nidificati (un oggetto multimediale all'interno di un oggetto multimediale):
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.
Per annidare oggetti multimediali, posiziona un nuovo .mediacontenitore all'interno del .media-bodycontenitore:
Esempio
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Immagine multimediale allineata a destra
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.
Per allineare a destra l'immagine multimediale, aggiungi l'immagine dopo il .media-bodycontenitore:
Esempio
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Allineamento superiore, centrale o inferiore
Utilizzare le utilità flessibili, le align-self-*classi per posizionare l'oggetto multimediale in alto, al centro o in basso:
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">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>