Bootstrap -mediavoorwerpe
Media-voorwerpe
Bootstrap bied 'n maklike manier om media-voorwerpe (soos beelde of video's) aan die linkerkant of regs van sommige inhoud in lyn te bring. Dit kan gebruik word om blogopmerkings, tweets ensovoorts 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.
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.
Alicia Keyes Geplaas op 25 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. Daar is geen vrees vir sjokolade voor of geen belangstelling nie.
Basiese media-objek
John Doe
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
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
<!-- 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>
Voorbeeld verduidelik
Gebruik 'n <div>-element saam met die .mediaklas om 'n houer vir media-objekte te skep.
Gebruik die .media-leftklas om die media-voorwerp (beeld) na links te belyn, of die .media-rightklas om dit na regs te belyn.
Teks wat langs die prent moet verskyn, word binne 'n houer geplaas met class=" media-body".
Daarbenewens kan jy .media-headingvir opskrifte gebruik.
Bo-, middel- of onderbelyning
Die media-voorwerp kan ook bo, middel of onder in lyn wees met die media-top, media-middleof media-bottomklas:
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">
<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>
Nestende media-voorwerpe
Media-objekte kan ook geneste word ('n media-voorwerp binne 'n media-objek):
Voorbeeld
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.
John Doe Geplaas op 21 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.
Nog 'n voorbeeld van nes
Voorbeeld
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.
John Doe Geplaas op 21 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.
Jane 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.