Source

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-bodycontenidoyki muyuriqpi. Opcional acolchado chaymanta margen controlakunman espaciamiento utilidadkunawan .

64x64 nisqa
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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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

64x64 nisqa
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.
64x64 nisqa
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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </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.

64x64 nisqa
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 class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>
64x64 nisqa
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 class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <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>
64x64 nisqa
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 class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <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.
64x64 nisqa 
<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 class="ml-3" src=".../64x64" alt="Generic placeholder image">
</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.

  • 64x64 nisqa
    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.
  • 64x64 nisqa
    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.
  • 64x64 nisqa
    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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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 class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <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>