Bootstrap 4 obiekty multimedialne
Obiekty medialne
Bootstrap zapewnia łatwy sposób wyrównywania obiektów multimedialnych (takich jak obrazy lub filmy) wraz z zawartością. Obiekty multimedialne są często używane do wyświetlania komentarzy na blogu, tweetów itp.:
John Doe Wysłano 19 lutego 2016
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
John Doe Wysłany 20 lutego 2016 r.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Podstawowy obiekt medialny
John Doe Wysłano 19 lutego 2016
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Aby utworzyć obiekt multimedialny, dodaj .mediaklasę do elementu kontenera i umieść zawartość multimedialną wewnątrz kontenera podrzędnego z .media-bodyklasą. W razie potrzeby dodaj dopełnienie i marginesy za pomocą narzędzi do odstępów:
Przykład
<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>
Zagnieżdżone obiekty multimedialne
Obiekty multimedialne można również zagnieżdżać (obiekt multimedialny wewnątrz obiektu multimedialnego):
John Doe Wysłano 19 lutego 2016
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Jane Doe Wysłany 20 lutego 2016 r.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Aby zagnieździć obiekty multimedialne, umieść nowy .mediakontener wewnątrz .media-bodykontenera:
Przykład
<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>
Obraz multimedialny wyrównany do prawej
John Doe Wysłano 19 lutego 2016
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Aby wyrównać obraz multimedialny do prawej, dodaj obraz za .media-bodykontenerem:
Przykład
<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>
Wyrównanie do góry, środka lub dołu
Użyj narzędzi flex, align-self-*klas, aby umieścić obiekt multimedialny na górze, środku lub na dole:
Media Góra
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Media Środkowe
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Nośnik na dole
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Sam ból to miłość do bólu, główne problemy ekologiczne, ale daję taki czas na upadek, żeby jakiś wielki ból i ból.
Przykład
<!-- 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>