Source

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 makontrol pinaagi sa spacing utilities .

64x64
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 sa faucibus.
<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: Ang mga inline nga elemento wala isipa nga flex item

Ang Internet Explorer 10-11 wala maghatag ug inline nga mga 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 parent media.

64x64
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 sa faucibus.
64x64
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 sa faucibus.
<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>

Pag-align

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

64x64
Top-aligned nga 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 sa 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="..." 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
Media nga gipahiangay sa sentro

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 sa 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="..." 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
Ubos nga nahiangay nga 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 sa 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="..." 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
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 sa faucibus.
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 class="ml-3" src="..." 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 maayo ang tune.

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