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 .

Placeholder 64x64
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 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: 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 yothetsera ndikukhazikitsa 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 tikupangira kuti muyime nthawi ina. Malo omwe ali .mediamkati .media-bodymwa chinthu chapa media.

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

Kuyanjanitsa

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

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

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

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.

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