Media chinthu
Zolemba ndi zitsanzo zama media a Bootstrap kuti apange zinthu zobwerezabwereza monga ndemanga zamabulogu, ma tweets, ndi zina zotero.
Chitsanzo
Chinthu chawayilesi chimathandizira kupanga zida zovuta komanso zobwerezabwereza pomwe media zina zimayikidwa pambali zomwe sizimazungulira media. Kuphatikiza apo, imachita izi ndi makalasi awiri okha ofunikira chifukwa cha flexbox.
Pansipa pali chitsanzo cha chinthu chimodzi chapa media. Magulu awiri okha ndi omwe amafunikira - kukulunga .mediandi .media-bodykuzungulira zomwe zili. Posankha padding ndi malire amatha kuwongoleredwa pogwiritsa ntchito masitayilo .
Mutu wa media
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu 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: Zinthu zamkati sizimatengedwa ngati zinthu zosinthika
Internet Explorer 10-11 sapereka zinthu zam'kati monga maulalo kapena zithunzi (kapena ::beforendi ::afterzinthu zabodza) ngati zinthu zosinthika. Njira yokhayo yothetsera ndikukhazikitsa mtengo wosakhala pamzere display(mwachitsanzo, block, , inline-block, kapena flex). Tikukulangizani kuti mugwiritse ntchito .d-flexchimodzi mwazinthu zowonetsera , ngati kukonza kosavuta.
Gwero: Flexbugs pa GitHub
Nesting
Zinthu zapa media zitha kukhazikitsidwa mosalekeza, ngakhale tikupangira kuti muyime nthawi ina. Malo omwe ali .mediamkati .media-bodymwa chinthu chapa media.
Mutu wa media
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu 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>Kuyanjanitsa
Media mu media media imatha kulumikizidwa ndi zida za flexbox pamwamba (zosakhazikika), pakati, kapena kumapeto kwa .media-bodyzomwe muli.
Ma media ogwirizana kwambiri
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
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.
<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 zolumikizidwa pakati
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
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.
<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>Media yolunjika pansi
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
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.
<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>Order
Sinthani dongosolo la zomwe zili muzinthu zapa media posintha HTML yokha, kapena powonjezera CSS flexbox kuti muyike orderkatunduyo (kuchuluka komwe mwasankha).
Media chinthu
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu 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 list
Chifukwa cha media media chili ndi zofunikira zochepa zamapangidwe, mutha kugwiritsanso ntchito makalasi awa pamndandanda wazinthu za HTML. Pa anu <ul>kapena <ol>, onjezani .list-unstyledkuti muchotse masitaelo a msakatuli aliwonse, ndiyeno gwiritsani ntchito .mediaku <li>s. Monga nthawi zonse, gwiritsani ntchito zida zotalikirana paliponse pomwe pakufunika kuti muyimbe bwino.
-
Zotengera mndandanda wazofalitsa
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus. -
Zotengera mndandanda wazofalitsa
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus. -
Zotengera mndandanda wazofalitsa
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu 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>