Medijski objekat
Dokumentacija i primjeri za Bootstrapov medijski objekt za konstruiranje komponenti koje se vrlo ponavljaju kao što su komentari na blogu, tweetovi i slično.
Primjer
Objekat medija pomaže u izgradnji složenih i ponavljajućih komponenti gdje su neki mediji pozicionirani uz sadržaj koji se ne obavija oko spomenutog medija. Osim toga, to radi sa samo dvije potrebne klase zahvaljujući flexboxu.
Ispod je primjer jednog medijskog objekta. Potrebne su samo dvije klase — omotavanje .media
i .media-body
oko vašeg sadržaja. Opcioni padding i margine mogu se kontrolisati preko uslužnih programa za razmak .
Naslov medija
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.Flexbug #12: Inline elementi se ne tretiraju kao flex stavke
Internet Explorer 10-11 ne prikazuje ugrađene elemente kao što su veze ili slike (ili ::before
i ::after
pseudoelementi) kao flex stavke. Jedino zaobilazno rješenje je postavljanje ne-inline display
vrijednosti (npr. block
, inline-block
, ili flex
). Predlažemo korištenje .d-flex
, jednog od naših uslužnih programa za prikaz , kao lako rješenje.
Izvor: Flexbugs na GitHubu
Nesting
Medijski objekti mogu biti beskonačno ugniježđeni, iako predlažemo da prestanete u nekom trenutku. Mjesto ugniježđeno .media
unutar .media-body
roditeljskog medijskog objekta.
Naslov medija
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.Poravnanje
Mediji u medijskom objektu mogu se poravnati pomoću flexbox uslužnih programa na vrh (podrazumevano), sredinu ili kraj vašeg .media-body
sadržaja.
Vrhunski raspoređeni mediji
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.
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.
Centrirani mediji
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.
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.
Mediji poravnati prema dnu
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.
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.
Red
Promijenite redoslijed sadržaja u medijskim objektima modifikacijom samog HTML-a ili dodavanjem nekog prilagođenog flexbox CSS-a za postavljanje order
svojstva (na cijeli broj po vašem izboru).
Medijski objekat
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.Lista medija
Budući da medijski objekat ima tako malo strukturnih zahtjeva, možete koristiti i ove klase na HTML elementima liste. Na vašem <ul>
ili <ol>
, dodajte da .list-unstyled
biste uklonili sve zadane stilove liste pretraživača, a zatim primenite .media
na svoj <li>
s. Kao i uvijek, koristite uslužne programe za razmak gdje god je potrebno za fino podešavanje.
-
Medijski objekt zasnovan na listi
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. -
Medijski objekt zasnovan na listi
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. -
Medijski objekt zasnovan na listi
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.