in English

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 .

Placeholder 64x64
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

Placeholder 64x64
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.
Placeholder 64x64
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.

Placeholder 64x64
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>
Placeholder 64x64
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>
Placeholder 64x64
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.
Placeholder 64x64 
<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.

  • Placeholder 64x64
    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.
  • Placeholder 64x64
    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.
  • Placeholder 64x64
    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>