Bootstrap 4 Media Objects
Media-voorwerpe
Bootstrap bied 'n maklike manier om media-voorwerpe (soos beelde of video's) saam met inhoud in lyn te bring. Media-objekte word dikwels gebruik om blogopmerkings, twiets en so meer te vertoon:
John Doe Geplaas op 19 Februarie 2016
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
John Doe Geplaas op 20 Februarie 2016
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Basiese media-objek
John Doe Geplaas op 19 Februarie 2016
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Om 'n media-objek te skep, voeg die .mediaklas by 'n houerelement en plaas media-inhoud binne 'n kinderhouer saam met die .media-bodyklas. Voeg opvulling en kantlyne by soos nodig, met die spasiëringshulpmiddels:
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-voorwerpe
Media-objekte kan ook geneste word ('n media-objek binne 'n media-voorwerp):
John Doe Geplaas op 19 Februarie 2016
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Jane Doe Geplaas op 20 Februarie 2016
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Om media-voorwerpe te nes, plaas 'n nuwe .mediahouer in die .media-bodyhouer:
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>
Regs-belynde mediabeeld
John Doe Geplaas op 19 Februarie 2016
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Om die mediaprent regs te belyn, voeg die prent na die .media-bodyhouer by:
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>
Bo-, middel- of onderbelyning
Gebruik die flex utilities, align-self-*klasse om die media-voorwerp bo, middel of onder te plaas:
Media Top
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Media Middel
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Media onderkant
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn.
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>