Objeto medios de comunicación rehegua

Kuatiahaipyre ha techapyrã Bootstrap mbaꞌekuaarã medio rehegua omopuꞌa hag̃ua componente ojejapo jey jey hag̃ua haꞌeháicha umi comentario blog rehegua, tuits ha umíchagua.

Tembiecharã

Pe objeto medio rehegua oipytyvõ oñemopuꞌa hag̃ua componente complejo ha ojerepetíva oĩhápe umi medio oñemohendavaꞌekue contenido ykére ndojejokóiva dicho medio rehe. Avei, ojapo kóva mokõi clase oñeikotevẽva reheve añoite gracias a flexbox.

Aguĩve oĩ peteĩ techapyrã peteĩ mbaꞌekuaarã medio rehegua añoite. Mokõi clase añoite oñeikotevẽ —pe envoltura .mediaha pe .media-bodynde contenido jerére. Acolchado ha margen opcional ikatu oñecontrola umi utilidad espaciado rupive .

Rubro de medios de comunicación rehegua

Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante solicitudin rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

<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: Umi elemento línea-pegua ndojeguerekói mba’e’oka flex-icha

Internet Explorer 10-11 ndohechaukái umi elemento línea-pegua haꞌeháicha enlace térã taꞌãngamýi (térã ::beforeha ::afterpseudo-elemento) elemento flex ramo. Peteĩ tembiaporã añoite haꞌehína emohenda peteĩ displaymbaꞌekuaarã ndahaꞌeiva línea-pe (techapyrã, block, inline-block, térã flex). Ro’e reipuru hag̃ua .d-flex, peteĩ ore utilidad jehechaukarã , peteĩ ñemyatyrõ ndahasýiva ramo.

Fuente: Flexbugs GitHub-pe

Nidación rehegua

Umi mba’ekuaarã medio rehegua ikatu oñembohysýi opa’ỹre, jepémo ro’e ndéve rejoko hag̃ua peteĩ momento-pe. Emoĩ anidado .mediaryepýpe .media-bodypeteĩ mba’e’oka medio túva rehegua.

Rubro de medios de comunicación rehegua

<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 rehegua

Umi medio oĩva peteĩ mba’e’oka medio-pe ikatu oñembojoaju flexbox purupyrã ndive nde contenido yvate gotyo (oñemoĩva’ekue), mbytépe térã opakuévo .media-body.

Umi medio de comunicación alineado yvate gotyo

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus.

<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>

Umi medio de comunicación alineado centro-pe

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus.

<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>

Medios de comunicación alineados inferiores rehegua

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo rehegua. Cum sociis natoque penatibus ha magnis umi montes parturiente, nascetur ridiculus mus.

<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>

Hekopete

Emoambue umi mbaꞌekuaarã ñemohenda umi mbaꞌekuaarã medio-pe emoambuévo HTML voi, térã emoĩvo peteĩ CSS flexbox jeporupyre emohenda hag̃ua ordermbaꞌekuaarã (peteĩ papapy entero reiporavóvape).

Objeto medios de comunicación rehegua

<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 rehegua

Pe objeto medio rehegua oguerekógui saꞌieterei mbaꞌe ojejeruréva estructural rehegua, ikatu avei eipuru koꞌã mboꞌepy umi elemento HTML lista rehegua. Nde <ul>térã -pe <ol>, emoĩ pe .list-unstyledeipe’a hag̃ua oimeraẽva kundahára lista estilo ñepyrũrã, ha upéi eipuru .mediande <li>s-pe. Jepiveguáicha, eipuru umi utilidad espaciado rehegua oñeikotevẽhápe reafina hag̃ua.

Objeto medio rehegua oñemopyendáva lista-pe
Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante solicitudin rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.
Objeto medio rehegua oñemopyendáva lista-pe
Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante solicitudin rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.
Objeto medio rehegua oñemopyendáva lista-pe
Cras oguapy amet nibh libero, en gravida nulla. Nulla vel metus escelerisco ante solicitudin rehegua. Cras purus odio, vestibulo en vulputado at, viverra turpis rehegua. Fusce condimentum nunc ac nisi fringilla vulputada rehegua. Donec lacinia congue felis rehegua faucibus-pe.

<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>

Objeto medios de comunicación rehegua

Tembiecharã

Rubro de medios de comunicación rehegua

Flexbug #12: Umi elemento línea-pegua ndojeguerekói mba’e’oka flex-icha

Nidación rehegua

Rubro de medios de comunicación rehegua

Rubro de medios de comunicación rehegua

Alineación rehegua

Umi medio de comunicación alineado yvate gotyo

Umi medio de comunicación alineado centro-pe

Medios de comunicación alineados inferiores rehegua

Hekopete

Objeto medios de comunicación rehegua

Lista de medios de comunicación rehegua

Objeto medio rehegua oñemopyendáva lista-pe

Objeto medio rehegua oñemopyendáva lista-pe

Objeto medio rehegua oñemopyendáva lista-pe