Bootstrap Media Objects
Obiekty medialne
Bootstrap zapewnia łatwy sposób wyrównywania obiektów multimedialnych (takich jak obrazy lub filmy) do lewej lub prawej strony niektórych treści. Może być używany do wyświetlania komentarzy na blogu, tweetów i tak dalej:
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.
Alicia Keyes Wysłany 25 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. Nie ma strachu przed przestępczością ani wygodą przed występem.
Podstawowy obiekt medialny
nieznany z nazwiska
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.
nieznany z nazwiska
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
<!-- 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>
Przykład wyjaśniony
Użyj elementu <div> z .mediaklasą, aby utworzyć kontener dla obiektów multimedialnych.
Użyj .media-leftklasy, aby wyrównać obiekt multimedialny (obraz) do lewej lub .media-rightklasy, aby wyrównać go do prawej.
Tekst, który powinien pojawić się obok obrazu, jest umieszczony w kontenerze z class=" media-body".
Dodatkowo możesz użyć .media-headingdo nagłówków.
Wyrównanie do góry, środka lub dołu
Obiekt multimedialny może być również wyrównany do góry, środka lub dołu z media-topklasą media-middlelub media-bottomklasą:
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">
<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>
Zagnieżdżanie obiektów multimedialnych
Obiekty multimedialne można również zagnieżdżać (obiekt multimedialny wewnątrz obiektu multimedialnego):
Przykład
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.
John Doe Wysłano 21 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.
Kolejny przykład zagnieżdżania
Przykład
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.
John Doe Wysłano 21 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.
Jane Doe Wysłany 19 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.