Bootstrap 4 media-objecten
Media-objecten
Bootstrap biedt een gemakkelijke manier om media-objecten (zoals afbeeldingen of video's) samen met inhoud uit te lijnen. Media-objecten worden vaak gebruikt om blogopmerkingen, tweets enzovoort weer te geven:
John Doe Geplaatst op 19 februari 2016
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
John Doe Geplaatst op 20 februari 2016
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Basis media-object
John Doe Geplaatst op 19 februari 2016
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Om een media-object te maken, voegt u de .mediaklasse toe aan een containerelement en plaatst u media-inhoud in een onderliggende container met de .media-bodyklasse. Voeg zo nodig opvulling en marges toe met de hulpprogramma's voor spatiëring:
Voorbeeld
<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>
Geneste media-objecten
Media-objecten kunnen ook worden genest (een media-object binnen een media-object):
John Doe Geplaatst op 19 februari 2016
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Jane Doe Geplaatst op 20 februari 2016
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Als u media-objecten wilt nesten, plaatst u een nieuwe .mediacontainer in de .media-bodycontainer:
Voorbeeld
<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>
Rechts uitgelijnde mediaafbeelding
John Doe Geplaatst op 19 februari 2016
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Om de media-afbeelding rechts uit te lijnen, voegt u de afbeelding toe na de .media-bodycontainer:
Voorbeeld
<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>
Uitlijning boven, midden of onder
Gebruik de flex-hulpprogramma's, align-self-*klassen om het media-object bovenaan, in het midden of onderaan te plaatsen:
Media Top
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Media Midden
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Mediabodem
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
De pijn zelf is de liefde van de pijn, de belangrijkste ecologische problemen, maar ik geef dit soort tijd om naar beneden te vallen, zodat een aantal grote pijn en pijn.
Voorbeeld
<!-- 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>