Source

Media chinthu

Zolemba ndi zitsanzo zama media a Bootstrap kuti apange zinthu zobwerezabwereza monga ndemanga zamabulogu, ma tweets, ndi zina zotero.

Chitsanzo

Chinthu chawayilesi chimathandizira kupanga zida zovuta komanso zobwerezabwereza pomwe media zina zimayikidwa pambali zomwe sizimazungulira media. Kuphatikiza apo, imachita izi ndi makalasi awiri okha ofunikira chifukwa cha flexbox.

Pansipa pali chitsanzo cha chinthu chimodzi chapa media. Magulu awiri okha ndi omwe amafunikira - kukulunga .mediandi .media-bodykuzungulira zomwe zili. Posankha padding ndi malire amatha kuwongoleredwa pogwiritsa ntchito masitayilo .

64x64 pa
Mutu wa media
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus. 
<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: Zinthu zamkati sizimatengedwa ngati zinthu zosinthika

Internet Explorer 10-11 sapereka zinthu zam'kati monga maulalo kapena zithunzi (kapena ::beforendi ::afterzinthu zabodza) ngati zinthu zosinthika. Njira yokhayo ndiyo kukhazikitsa mtengo wosakhala pamzere display(mwachitsanzo, block, inline-block, kapena flex). Tikukulangizani kuti mugwiritse ntchito .d-flexchimodzi mwazinthu zowonetsera , ngati kukonza kosavuta.

Gwero: Flexbugs pa GitHub

Nesting

Zinthu zapa media zitha kukhazikitsidwa mosalekeza, ngakhale tikukupemphani kuti muyime nthawi ina. Malo omwe ali .mediamkati .media-bodymwa chinthu chapa media.

64x64 pa
Mutu wa media
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
64x64 pa
Mutu wa media
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus. 
<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>

Kuyanjanitsa

Media mu media media imatha kulumikizidwa ndi zida za flexbox pamwamba (zosakhazikika), pakati, kapena kumapeto kwa .media-bodyzomwe muli.

64x64 pa
Ma media ogwirizana kwambiri

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.

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.

<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 pa
Media zolumikizidwa pakati

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.

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.

<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 pa
Media yolunjika pansi

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.

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.

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

Order

Sinthani dongosolo la zomwe zili muzinthu zapa media posintha HTML yokha, kapena powonjezera CSS flexbox kuti muyike orderkatunduyo (kuchuluka komwe mwasankha).

Media chinthu
Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
64x64 pa 
<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>

Media list

Chifukwa cha media media chili ndi zofunikira zochepa zamapangidwe, mutha kugwiritsanso ntchito makalasi awa pamndandanda wazinthu za HTML. Pa anu <ul>kapena <ol>, onjezani .list-unstyledkuti muchotse masitaelo a msakatuli aliwonse, ndiyeno gwiritsani ntchito .mediaku <li>s. Monga nthawi zonse, gwiritsani ntchito zida zotalikirana paliponse pomwe pakufunika kuti muyimbe bwino.

  • 64x64 pa
    Zotengera mndandanda wazofalitsa
    Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
  • 64x64 pa
    Zotengera mndandanda wazofalitsa
    Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.
  • 64x64 pa
    Zotengera mndandanda wazofalitsa
    Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus. 
<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>