Source

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 .

64x64 rehegua
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="..." 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.

64x64 rehegua
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.
64x64 rehegua
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="..." 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="..." 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.

64x64 rehegua
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 class="align-self-start mr-3" src="..." 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 rehegua
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 class="align-self-center mr-3" src="..." 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 rehegua
Medios de comunicación alineados inferiores 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.

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="..." 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
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.
64x64 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="..." 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.

  • 64x64 rehegua
    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.
  • 64x64 rehegua
    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.
  • 64x64 rehegua
    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="..." 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="..." 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="..." 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>