Ohun elo media
Iwe ati awọn apẹẹrẹ fun ohun elo media Bootstrap lati ṣe agbero awọn ohun elo atunwi giga bii awọn asọye bulọọgi, awọn tweets, ati bii.
Apeere
Ohun media n ṣe iranlọwọ lati kọ idiju ati awọn paati atunwi nibiti diẹ ninu awọn media wa ni ipo lẹgbẹẹ akoonu ti ko yika ni ayika media wi. Pẹlupẹlu, o ṣe eyi pẹlu awọn kilasi meji nikan ti o nilo ọpẹ si flexbox.
Ni isalẹ jẹ apẹẹrẹ ti ohun elo media kan. Awọn kilasi meji nikan ni o nilo — murasilẹ .mediaati agbegbe .media-bodyakoonu rẹ. Padding iyan ati ala le jẹ iṣakoso nipasẹ awọn ohun elo aye .
Media akori
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>Flexbug #12: Awọn eroja inline ko ṣe itọju bi awọn ohun kan rọ
Internet Explorer 10-11 ko ṣe awọn eroja inline gẹgẹbi awọn ọna asopọ tabi awọn aworan (tabi ::beforeati ::afterawọn eroja-ara-ara) bi awọn ohun kan rọ. Iṣeduro nikan ni lati ṣeto iye ti kii ṣe inline display(fun apẹẹrẹ, block, inline-block, tabi flex). A daba lilo .d-flex, ọkan ninu awọn ohun elo ifihan wa , bi atunṣe irọrun.
Orisun: Flexbugs lori GitHub
Itẹle
Awọn nkan media le jẹ itẹ-ẹiyẹ ailopin, botilẹjẹpe a daba pe o duro ni aaye kan. Gbe iteeye .medialaarin awọn .media-bodyti a obi ohun media.
Media akori
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." class="mr-3" alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>Titete
Media ni ohun media kan le ni ibamu pẹlu awọn ohun elo flexbox si oke (aiyipada), aarin, tabi opin .media-bodyakoonu rẹ.
Top-aligned media
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Media ti o ni ibamu si aarin
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Awọn media ibamu-isalẹ
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Bere fun
Yi aṣẹ akoonu pada ninu awọn nkan media nipa yiyipada HTML funrararẹ, tabi nipa fifi diẹ ninu apoti flexbox CSS lati ṣeto ohun- orderini naa (si odidi ti yiyan rẹ).
Ohun elo media
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img src="..." class="ml-3" alt="...">
</div>Media akojọ
Nitoripe ohun elo media ni awọn ibeere igbekalẹ diẹ, o tun le lo awọn kilasi wọnyi lori atokọ awọn eroja HTML. Lori rẹ <ul>tabi <ol>, ṣafikun .list-unstyledlati yọ eyikeyi awọn aṣa atokọ aiyipada aṣawakiri kuro, lẹhinna kan .mediasi awọn <li>s rẹ. Gẹgẹbi nigbagbogbo, lo awọn ohun elo aye nibikibi ti o nilo lati tune.
-
Atokọ-orisun media nkan
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus. -
Atokọ-orisun media nkan
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus. -
Atokọ-orisun media nkan
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>