Objeto de medios de comunicación
Qillqakuna chaymanta ejemplokuna Bootstrap kaqpa willaynikuna objetonpaq ancha kuti kuti componentekuna ruwanapaq blog rimaykuna, tweetkuna chaymanta chaymanhina.
Qatina
Media objeto yanapakun ruwayta complejo chaymanta kuti kuti componentes maypi wakin mediokuna churasqa kanku lado contenido kaqmanta mana nisqa medios muyuriqpi p'istuykusqa. Astawan, kayta ruwan iskay clasekunalla mañasqawan gracias a flexbox.
Uraypiqa huklla willañiqi imayaypa rikch'ayninmi kachkan. Iskay clasekunalla necesitakun —chay p’istu .mediachaymanta .media-bodymuyuriqninpi contenidoyki. Opcional acolchado chaymanta margen controlakunman espaciamiento utilidadkunawan .
Medios de comunicación nisqap umalliqnin
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.<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: Chiru ukhupi elementokuna mana flex imakuna hinachu qhawasqa
Internet Explorer 10-11 mana inline elementokunata t'inkikuna utaq siq'ikuna hina (utaq ::beforechaymanta ::afterpseudo-elementokuna) flex elementokuna hina ruwanku. Huklla allichayqa mana chiruyuq displaychanita churaymi (kayhina, block, inline-block, icha flex). Yuyaychayku llamk'achiyta .d-flex, huk qhaway yanapakuyniykumanta , huk mana sasa allichay hina.
Pukyu: Flexbugs GitHub nisqapi
Nido
Media objetokuna mana tukukuyniyuq anidado kanman, ichaqa huk pacha sayachiyta yuyaychayku. Huk tayta willay imayaypa .mediaukhupi anidado nisqa churay ..media-body
Medios de comunicación nisqap umalliqnin
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.Medios de comunicación nisqap umalliqnin
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.<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>Alineación
Huk willaynikuna imayaypi willaynikuna flexbox yanapakuykunawan tupachisqa kanman pataman (ñawpaqmanta), chawpiman utaq tukukuyman .media-bodywillayniykimanta.
Patamanta chiqanchasqa willay mast’ariqkuna
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa.
<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>Chawpiman chiqanchasqa willay mast’ariqkuna
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa.
<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>Uramanta chiqanchasqa willay mast’ariqkuna
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa.
<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>Ñiqinchay
Willayta imakuna kaqpi imakunap ordenninta tikray kikin HTML kaqmanta tikraspa, utaq wakin sapanchasqa flexbox CSS yapaspa orderpropiedad churanapaq (akllasqayki hunt'asqa yupayman).
Objeto de medios de comunicación
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.<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>Lista de medios de comunicación
Imaraykuchus willaynikuna objeto ancha pisi estructural mañakuyniyuq, kay clasekunata lista HTML elementokunapi llamk'achiy atikunkitaq. Kay <ul>utaq <ol>kaqpi, yapay .list-unstyledmayqin maskaqpa ñawpaqmanta lista estilokuna hurqunapaq, chaymanta sniykiman .mediachuray <li>. Sapa kuti hina, maypipas necesitasqanman hina espaciamiento utilidadkunata llamk’achiy allinta allichanaykipaq.
-
Lista nisqapi ruwasqa willay mast'ariq objeto
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi. -
Lista nisqapi ruwasqa willay mast'ariq objeto
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi. -
Lista nisqapi ruwasqa willay mast'ariq objeto
Cras tiyay amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante sollicitudin nisqa. Cras purus odio, vestibulo en vulputado en, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputado nisqa fringilla nisqa. Donec lacinia congue felis nisqa faucibus nisqapi.
<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>