Media object

Dokumentasyon ug mga panig-ingnan alang sa Bootstrap's media object aron makahimo og balik-balik nga mga bahin sama sa mga komentaryo sa blog, tweet, ug uban pa.

Pananglitan

Ang media object nagtabang sa paghimo sa komplikado ug nagbalikbalik nga mga sangkap diin ang pipila nga media gipahimutang tupad sa sulud nga wala giputos sa giingon nga media. Dugang pa, gibuhat kini sa duha ra nga gikinahanglan nga mga klase salamat sa flexbox.

Sa ubos usa ka pananglitan sa usa ka butang sa media. Duha ra ka klase ang gikinahanglan—ang pagputos .mediaug ang .media-bodypalibot sa imong sulod. Ang opsyonal nga padding ug margin mahimong kontrolahon pinaagi sa spacing utilities .

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

<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: Ang mga inline nga elemento dili isipon nga mga butang nga flex

Ang Internet Explorer 10-11 wala maghubad sa mga inline nga elemento sama sa mga link o mga hulagway (o ::beforeug ::afterpseudo-element) isip mga butang nga flexible. Ang bugtong solusyon mao ang pagtakda og dili inline displaynga bili (pananglitan, block, inline-block, o flex). Among gisugyot ang paggamit sa .d-flex, usa sa among mga gamit sa pagpakita , isip sayon nga ayuhon.

Tinubdan: Flexbugs sa GitHub

Nagsalag

Ang mga butang sa media mahimong walay kinutuban nga salag, bisan kung among gisugyot nga mohunong ka sa usa ka punto. Ibutang ang nested .mediasulod .media-bodysa usa ka butang sa ginikanan media.

Ulohan sa media

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

Pag-align

Ang media sa usa ka butang sa media mahimong i-align sa mga flexbox utilities ngadto sa ibabaw (default), tunga-tunga, o katapusan sa imong .media-bodysulod.

Top-aligned nga media

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>

Media nga gipahiangay sa sentro

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>

Ubos nga nahiangay nga media

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>

Pag-order

Usba ang han-ay sa sulod sa media objects pinaagi sa pag-usab sa HTML mismo, o pinaagi sa pagdugang ug custom flexbox CSS aron itakda ang orderproperty (sa integer nga imong pilion).

Media object

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

Listahan sa media

Tungod kay ang butang sa media adunay gamay ra nga kinahanglanon sa istruktura, mahimo usab nimo gamiton kini nga mga klase sa lista nga mga elemento sa HTML. Sa imong <ul>o <ol>, idugang ang .list-unstyledaron tangtangon ang bisan unsang browser default list styles, ug dayon i-apply .mediasa imong <li>s. Sama sa kanunay, gamita ang mga kagamitan sa pag-spacing bisan asa nga gikinahanglan aron mamaayo ang tono.

List-based nga media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
List-based nga media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.
List-based nga media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

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

Media object

Pananglitan

Ulohan sa media

Flexbug #12: Ang mga inline nga elemento dili isipon nga mga butang nga flex

Nagsalag

Ulohan sa media

Ulohan sa media

Pag-align

Top-aligned nga media

Media nga gipahiangay sa sentro

Ubos nga nahiangay nga media

Pag-order

Media object

Listahan sa media

List-based nga media object

List-based nga media object

List-based nga media object