Bootstrap mediální objekty
Mediální objekty
Bootstrap poskytuje snadný způsob, jak zarovnat mediální objekty (jako jsou obrázky nebo videa) nalevo nebo napravo od určitého obsahu. To lze použít 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.
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.
Alicia Keyes Zveřejněno 25. ú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. Před představením se nemusíte bát zločinu nebo pohodlí.
Základní mediální objekt
John Doe
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
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
<!-- 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>
Příklad vysvětlen
Pomocí prvku <div> s .mediatřídou vytvořte kontejner pro mediální objekty.
Použijte .media-lefttřídu k zarovnání mediálního objektu (obrázku) doleva nebo .media-righttřídu k zarovnání doprava.
Text, který by se měl objevit vedle obrázku, je umístěn uvnitř kontejneru s class=" media-body".
Navíc můžete použít .media-headingpro nadpisy.
Zarovnání nahoře, uprostřed nebo dole
Mediální objekt může být také nahoře, uprostřed nebo dole zarovnán s třídou media-top, media-middlenebo :media-bottom
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">
<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>
Vnořování mediálních objektů
Mediální objekty lze také vnořit (mediální objekt uvnitř mediálního objektu):
Příklad
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.
John Doe Publikováno dne 21. ú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.
Další příklad hnízdění
Příklad
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.
John Doe Publikováno dne 21. ú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.
Jane 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.