Bagay ti media
Dokumentasion ken dagiti pagarigan para iti banag ti media ti Bootstrap tapno mangbangon kadagiti nangato a maulit-ulit a paset a kas dagiti komento ti blog, dagiti tweet, ken dagiti kapada.
Pagwadan
Ti banag ti media ket tumulong a mangbangon kadagiti komplikado ken maulit-ulit a paset a sadiay ti sumagmamano a media ket naiposision iti abay ti linaon a saan a mangbalkot iti naibaga a media. Plus, aramidenna daytoy nga addaan laeng iti dua a kasapulan a klase gapu iti flexbox.
Iti baba ket maysa a pagarigan ti maymaysa a banag ti media. Dua laeng a klase ti kasapulan—ti pannakabalkot .mediaken ti .media-bodyaglawlaw ti linaonmo. Ti opsional a padding ken margin ket mabalin a makontrol babaen dagiti spacing utilities .
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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: Dagiti elemento ti inline ket saan a matrato a kas dagiti banag ti flex
Ti Internet Explorer 10-11 ket saan a mangiparang kadagiti inline nga elemento a kas dagiti silpo wenno ladawan (wenno ::beforeken dagiti ::afterpseudo-elemento) a kas dagiti flex a banag. Ti laeng panagliklik ket ti panangikeddeng ti saan nga inline a displaypateg (kas pagarigan, block, inline-block, wenno flex). Isingasingmi ti panagusar iti .d-flex, maysa kadagiti display utilities -mi , kas nalaka a panangtarimaan.
Gubuayan: Flexbugs iti GitHub
Panag-umok
Dagiti banag ti media ket mabalin nga awan patinggana a naisanglad, urayno isingasingmi nga agsardengka iti maysa a punto. Ikabil ti nested .mediaiti uneg ti .media-bodyti maysa a nagannak a media a banag.
Paulo ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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>Panagtunos
Ti media iti maysa a banag ti media ket mabalin a maitunos kadagiti flexbox a utilidad iti ngato (default), tengnga, wenno ngudo ti .media-bodylinaonmo.
Top-aligned a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a 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 a naitunos iti sentro
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a 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>Naitunos iti baba a media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus.
Donec sed nga odio dui. Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a 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>Ipaipaw-it
Baliwan ti urnos ti linaon kadagiti banag ti media babaen ti panangbalbaliw ti HTML a mismo, wenno babaen ti pananginayon ti sumagmamano a kostumbre a flexbox CSS tapno mangikeddeng ti ordertagikua (iti maysa nga intero a bilang a piliem).
Bagay ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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>Listaan ti media
Gapu ta ti banag ti media ket addaan kadagiti bassit unay nga estruktural a kasapulan, mabalinmo pay nga usaren dagitoy a klase kadagiti elemento ti HTML ti listaan. Iti <ul>wenno <ol>, inayon ti .list-unstyledtapno maikkat ti ania man a default nga estilo ti listaan ti browser, ken kalpasanna agaplikar .mediaiti <li>s-mo. Kas iti kanayon, agusarka kadagiti spacing utilities sadinoman a kasapulan tapno ma-fine tune.
-
Listaan-a naibatay a banag ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus. -
Listaan-a naibatay a banag ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti faucibus. -
Listaan-a naibatay a banag ti media
Cras agtugaw amet nibh libero, iti gravida nulla. Nulla vel metus nga eskelerisko nga ante sollicitudin. Cras purus odio, vestibulum iti vulputado iti, tempus viverra turpis. Fusce condimentum nunc nga vulputate nga fringilla. Donec lacinia congue felis iti 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>