Ohun elo media
Iwe ati awọn apẹẹrẹ fun ohun elo media Bootstrap lati ṣe agbero awọn ohun elo atunwi giga bii awọn asọye bulọọgi, awọn tweets, ati bii.
Apeere
Ohun media n ṣe iranlọwọ lati kọ idiju ati awọn paati atunwi nibiti diẹ ninu awọn media wa ni ipo lẹgbẹẹ akoonu ti ko yika ni ayika media wi. Pẹlupẹlu, o ṣe eyi pẹlu awọn kilasi meji nikan ti o nilo ọpẹ si flexbox.
Ni isalẹ jẹ apẹẹrẹ ti ohun elo media kan. Awọn kilasi meji nikan ni o nilo — murasilẹ .media
ati agbegbe .media-body
akoonu rẹ. Padding iyan ati ala le jẹ iṣakoso nipasẹ awọn ohun elo aye .
Media akori
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.Flexbug #12: Awọn eroja inline ko ṣe itọju bi awọn ohun kan rọ
Internet Explorer 10-11 ko ṣe awọn eroja inline gẹgẹbi awọn ọna asopọ tabi awọn aworan (tabi ::before
ati ::after
awọn eroja-ara-ara) bi awọn ohun kan rọ. Iṣeduro nikan ni lati ṣeto iye ti kii ṣe inline display
(fun apẹẹrẹ, block
, inline-block
, tabi flex
). A daba lilo .d-flex
, ọkan ninu awọn ohun elo ifihan wa , bi atunṣe irọrun.
Orisun: Flexbugs lori GitHub
Itẹle
Awọn nkan media le jẹ itẹ-ẹiyẹ ailopin, botilẹjẹpe a daba pe o duro ni aaye kan. Gbe iteeye .media
laarin awọn .media-body
ti a obi ohun media.
Media akori
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.Titete
Media ni ohun media kan le ni ibamu pẹlu awọn ohun elo flexbox si oke (aiyipada), aarin, tabi opin .media-body
akoonu rẹ.
Top-aligned media
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.
Media ti o ni ibamu si aarin
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.
Awọn media ibamu-isalẹ
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus.
Bere fun
Yi aṣẹ akoonu pada ninu awọn nkan media nipa yiyipada HTML funrararẹ, tabi nipa fifi diẹ ninu apoti flexbox CSS lati ṣeto ohun- order
ini naa (si odidi ti yiyan rẹ).
Ohun elo media
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.Media akojọ
Nitoripe ohun elo media ni awọn ibeere igbekalẹ diẹ, o tun le lo awọn kilasi wọnyi lori atokọ awọn eroja HTML. Lori rẹ <ul>
tabi <ol>
, ṣafikun .list-unstyled
lati yọ eyikeyi awọn aṣa atokọ aiyipada aṣawakiri kuro, lẹhinna kan .media
si awọn <li>
s rẹ. Gẹgẹbi nigbagbogbo, lo awọn ohun elo aye nibikibi ti o nilo lati tune.
-
Atokọ-orisun media nkan
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus. -
Atokọ-orisun media nkan
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus. -
Atokọ-orisun media nkan
Cras sit amet nibh libero, ni gravida nulla. Nulla vel metus sclerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ni faucibus.