Media ade a wɔde di dwuma
Nwoma ne nhwɛsoɔ ma Bootstrap media adeɛ no sɛ ɛbɛkyekyere nneɛma a wɔsan yɛ no mpɛn pii te sɛ blog nsɛm, tweets, ne nea ɛtete saa.
Media adeɛ no boa ma wɔkyekyere nneɛma a ɛyɛ den na wɔtaa yɛ no mpɛn pii wɔ baabi a wɔde media binom si nsɛm a ɛnkata nsɛm ho amanneɛbɔ a wɔaka ho asɛm no nkyɛn. Plus, ɛyɛ eyi ne adesua abien pɛ a wɔhwehwɛ aseda flexbox.
Ase hɔ no yɛ media ade biako ho nhwɛso. Adesua abien pɛ na ɛho hia—nea wɔde kyekyere wo nsɛm no ho .media
ne nea wɔde .media-body
twa ho hyia. Wobetumi adi padding ne margin a wopɛ so denam spacing utilities so .
Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.Flexbug #12: Wɔnfa inline elements no sɛ flex nneɛma
Internet Explorer 10-11 nkyerɛ inline elements te sɛ links anaa mfonini (anaasɛ ::before
ne ::after
pseudo-elements) sɛ flex nneɛma. Adeyɛ biako pɛ ne sɛ wobɛhyehyɛ botae a ɛnyɛ inline display
(sɛ nhwɛso no, block
, inline-block
, anaa flex
). Yɛhyɛ nyansa sɛ fa .d-flex
, yɛn display utilities no mu biako , di dwuma sɛ ano aduru a ɛnyɛ den.
Faako a wonyae: Flexbugs wɔ GitHub so
Media nneɛma betumi ayɛ nested a enni ano, ɛwom sɛ yɛhyɛ nyansa sɛ gyae wɔ bere bi mu de. Fa nested .media
wɔ .media-body
of a ɔwofo media ade no mu.
Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.Nsɛm ho amanneɛbɔfo asɛmti
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.Media a ɛwɔ media ade bi mu no betumi ne flexbox utilities ahyia akɔ wo nsɛm no atifi (default), mfinimfini, anaa awiei .media-body
.
Nsɛm ho amanneɛbɔ a ɛwɔ soro
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Donec sed odio dui. Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus.
Nsɛm ho amanneɛbɔ a ɛfa mfinimfini ho
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Donec sed odio dui. Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus.
Nsɛm ho amanneɛbɔ a ɛwɔ ase hɔ
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.
Donec sed odio dui. Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus.
Sesa nsɛm a ɛwɔ media nneɛma mu no nnidiso nnidiso denam HTML no ankasa a wobɛsakra no so, anaasɛ wode custom flexbox CSS bi bɛka ho de ahyɛ order
agyapade no (kɔ integer a wopɛ so).
Media ade a wɔde di dwuma
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.Esiane sɛ media ade no wɔ nhyehyɛe ahwehwɛde kakraa bi nti, wubetumi nso de saa adesua ahorow yi adi dwuma wɔ list HTML elements so. Wɔ wo <ul>
anaa <ol>
, fa ka ho na .list-unstyled
yi browser default list styles biara, na afei fa di dwuma .media
wɔ wo <li>
s no so. Sɛnea ɛte daa no, fa spacing utilities di dwuma wɔ baabiara a ɛho hia na ama woatumi ayɛ no yiye.
-
Nsɛm ho amanneɛbɔ ade a egyina list so
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu. -
Nsɛm ho amanneɛbɔ ade a egyina list so
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu. -
Nsɛm ho amanneɛbɔ ade a egyina list so
Cras tena amet nibh libero, wɔ gravida nulla mu. Nulla vel metus scelerisque a wɔde di dwuma wɔ ɔkwan a ɛyɛ hu so. Cras purus odio, ahurututu a ɛwɔ ahurututu mu wɔ, tempus viverra turpis. Fusce condimentum nunc ac nisi akyi berɛmo a ɛyɛ mmerɛw. Donec lacinia congue felis a ɛwɔ faucibus mu.