Media object
Dokumentasyon at mga halimbawa para sa media object ng Bootstrap na bumuo ng mga paulit-ulit na bahagi tulad ng mga komento sa blog, tweet, at iba pa.
Ang media object ay tumutulong sa pagbuo ng mga kumplikado at paulit-ulit na bahagi kung saan ang ilang media ay nakaposisyon sa tabi ng nilalaman na hindi bumabalot sa nasabing media. Dagdag pa, ginagawa nito ito sa dalawang kinakailangang klase lamang salamat sa flexbox.
Nasa ibaba ang isang halimbawa ng isang bagay ng media. Dalawang klase lang ang kailangan—ang pagbabalot .media
at ang .media-body
paligid ng iyong nilalaman. Maaaring kontrolin ang opsyonal na padding at margin sa pamamagitan ng mga spacing utilities .
Media heading
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 sa faucibus.Flexbug #12: Ang mga inline na elemento ay hindi itinuturing bilang mga flex na item
Ang Internet Explorer 10-11 ay hindi nagre-render ng mga inline na elemento tulad ng mga link o larawan (o ::before
at ::after
mga pseudo-element) bilang mga flex na item. Ang tanging solusyon ay ang magtakda ng hindi inline na display
halaga (hal., block
, inline-block
, o flex
). Iminumungkahi namin ang paggamit .d-flex
ng , isa sa aming mga kagamitan sa pagpapakita , bilang isang madaling pag-aayos.
Pinagmulan: Flexbugs sa GitHub
Ang mga bagay sa media ay maaaring walang katapusan na naka-nest, kahit na iminumungkahi naming huminto ka sa isang punto. Lugar na naka-nest .media
sa loob .media-body
ng isang parent media object.
Media heading
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 sa faucibus.Maaaring ihanay ang media sa isang media object sa mga flexbox utility sa itaas (default), gitna, o dulo ng iyong .media-body
content.
Top-aligned na media
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 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.
Media na nakahanay sa gitna
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 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.
Bottom-aligned na media
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 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.
Baguhin ang pagkakasunud-sunod ng nilalaman sa mga media object sa pamamagitan ng pagbabago sa mismong HTML, o sa pamamagitan ng pagdaragdag ng ilang custom na flexbox CSS upang itakda ang order
property (sa isang integer na iyong pinili).
Media object
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 sa faucibus.Dahil ang media object ay may napakakaunting mga kinakailangan sa istruktura, maaari mo ring gamitin ang mga klase sa listahan ng mga elemento ng HTML. Sa iyong <ul>
o <ol>
, idagdag ang .list-unstyled
upang alisin ang anumang mga default na istilo ng listahan ng browser, at pagkatapos ay ilapat .media
sa iyong <li>
s. Gaya ng nakasanayan, gumamit ng mga spacing utilities kung saan man kailangan para maayos.
-
Media object na nakabatay sa listahan
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 sa faucibus. -
Media object na nakabatay sa listahan
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 sa faucibus. -
Media object na nakabatay sa listahan
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 sa faucibus.