Meedia objekt
Bootstrapi meediumiobjekti dokumentatsioon ja näited, et luua väga korduvaid komponente, nagu ajaveebi kommentaarid, säutsud ja muu sarnane.
Näide
Meediumiobjekt aitab luua keerulisi ja korduvaid komponente, kus osa meediast on paigutatud kõrvuti sisuga, mis ei ümbritse seda meediat. Lisaks teeb see tänu flexboxile seda vaid kahe nõutava klassiga.
Allpool on näide üksikust meediumiobjektist. Nõutavad on ainult kaks klassi – pakkimine .media
ja .media-body
sisu ümbritsemine. Valikulist polsterdust ja veerist saab juhtida vaheutiliitide abil .
Meedia pealkiri
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: tekstisiseseid elemente ei käsitleta paindlike üksustena
Internet Explorer 10–11 ei renderda sisemisi elemente, nagu linke või pilte (või ::before
ja ::after
pseudoelemente) paindlike üksustena. Ainus lahendus on seada mitterealine display
väärtus (nt , block
, inline-block
või flex
). Soovitame lihtsa lahendusena kasutada .d-flex
üht meie kuvari utiliiti .
Allikas: Flexbugs GitHubis
Pesitsemine
Meediumiobjekte saab lõputult pesastada, kuigi soovitame mingil hetkel peatuda. Koht pesastatud emameediumiobjekti .media
sisse .media-body
.
Meedia pealkiri
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.Joondamine
Meediumiobjekti meediumi saab flexboxi utiliitidega joondada sisu ülaossa (vaikimisi), keskele või lõppu .media-body
.
Ülevalt joondatud kandja
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.
Keskele joondatud kandja
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.
Alt joondatud kandja
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.
Telli
Muutke meediaobjektide sisu järjekorda, muutes HTML-i ennast või lisades atribuudi määramiseks kohandatud flexbox-CSS-i order
(teie valitud täisarvuni).
Meedia objekt
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.Meedia nimekiri
Kuna meediumiobjektil on nii vähe struktuurinõudeid, saate neid klasse kasutada ka loendi HTML-elementidel. Lisage oma brauseri vaikeloendi stiilide eemaldamiseks või valikule ja seejärel rakendage <ul>
oma s . Nagu alati, kasutage peenhäälestamiseks vajalikke utiliite.<ol>
.list-unstyled
.media
<li>
-
Loendipõhine meediaobjekt
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. -
Loendipõhine meediaobjekt
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. -
Loendipõhine meediaobjekt
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.