in English

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 .

Placeholder 64x64
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 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: 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 repyta hag̃ua peteĩ momento-pe. Emoĩ anidado .mediaryepýpe .media-bodypeteĩ mba’e’oka medio túva rehegua.

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

Placeholder 64x64
Umi medio de comunicación alineado yvate gotyo

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.

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 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
Umi medio de comunicación alineado centro-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.

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 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
Umi medio de comunicación alineado inferior-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.

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

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

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