Bootstrap 4 mediální objekty
Mediální objekty
Bootstrap poskytuje snadný způsob, jak zarovnat mediální objekty (jako jsou obrázky nebo videa) spolu s obsahem. Mediální objekty se často používají k zobrazení komentářů blogu, tweetů a tak dále:
John Doe Publikováno 19. února 2016
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
John Doe Publikováno 20. února 2016
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Základní mediální objekt
John Doe Publikováno 19. února 2016
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Chcete-li vytvořit mediální objekt, přidejte .mediatřídu do prvku kontejneru a umístěte mediální obsah do podřízeného kontejneru s .media-bodytřídou. Podle potřeby přidejte výplň a okraje pomocí nástrojů pro nastavení mezer:
Příklad
<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>
Vnořené mediální objekty
Mediální objekty lze také vnořit (mediální objekt uvnitř mediálního objektu):
John Doe Publikováno 19. února 2016
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Jane Doe Publikováno 20. února 2016
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Chcete-li vnořit mediální objekty, umístěte do kontejneru nový .mediakontejner .media-body:
Příklad
<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 média zarovnaný vpravo
John Doe Publikováno 19. února 2016
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Chcete-li obraz média zarovnat doprava, přidejte obrázek za .media-bodykontejner:
Příklad
<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>
Zarovnání nahoře, uprostřed nebo dole
Pomocí flex utilit, align-self-*tříd umístěte mediální objekt nahoře, uprostřed nebo dole:
Média Nahoru
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Mediální střed
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Spodní část média
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest.
Příklad
<!-- 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>