Réad meáin
Déanann doiciméadú agus samplaí le haghaidh meáin Bootstrap comhpháirteanna an-athchleachtach a thógáil cosúil le tuairimí blag, tweets, agus a leithéidí.
Sampla
Cuidíonn réad na meán le comhpháirteanna casta agus athchleachtach a thógáil ina bhfuil roinnt meáin suite taobh le hábhar nach gcuimsítear sna meáin sin. Ina theannta sin, déanann sé é seo gan ach dhá rang riachtanach a bhuíochas le flexbox.
Seo thíos sampla de réad meán amháin. Níl ach dhá rang ag teastáil - an clúdach .media
agus an .media-body
t-ábhar timpeall ort. Is féidir stuáil agus corrlach roghnach a rialú trí fhóntais spásála .
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.Flexbug #12: Ní láimhseáiltear eilimintí inlíne mar mhíreanna solúbtha
Ní fhágann Internet Explorer 10-11 gnéithe inlíne cosúil le naisc nó íomhánna (nó ::before
eilimintí ::after
bréagacha) mar mhíreanna solúbtha. Is é an t-aon réiteach oibre ná luach neamh-inlíne a shocrú display
(m.sh., block
, inline-block
, nó flex
). Molaimid úsáid a bhaint as .d-flex
, ceann dár bhfóntais taispeána , mar shocrú éasca.
Foinse: Flexbugs ar GitHub
Neadaithe
Is féidir rudaí meán a neadú gan teorainn, cé go molaimid duit stopadh ag pointe éigin. Áit neadaithe .media
laistigh .media-body
de réad meán tuismitheora.
Ceannteideal meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.Ailíniú
Is féidir meáin i réad meán a ailíniú le fóntais flexbox go barr (réamhshocraithe), lár, nó deireadh d' .media-body
ábhar.
Meáin bharr-ailínithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Meáin lár-ailínithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Meáin bun-ailínithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Ordú
Athraigh ord an ábhair i réada meán tríd an HTML féin a mhodhnú, nó trí roinnt flexbox CSS saincheaptha a chur leis chun an t- order
airí a shocrú (go slánuimhir de do rogha féin).
Réad meáin
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.Liosta meáin
Toisc gur beag riachtanas struchtúrach atá ag réad na meán, is féidir leat na haicmí seo a úsáid freisin ar eilimintí liosta HTML. Ar do <ul>
nó <ol>
, cuir an .list-unstyled
chun aon stíleanna liosta réamhshocraithe brabhsálaí a bhaint, agus ansin cuir i bhfeidhm .media
ar do <li>
s. Mar is gnáth, bain úsáid as fóntais spásála nuair is gá chun mionchoigeartú a dhéanamh.
-
Réad meáin liosta-bhunaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus. -
Réad meáin liosta-bhunaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus. -
Réad meáin liosta-bhunaithe
Cras sit amet nibh libero, in gravida nulla. Nulla nó metus scelerisque roimh sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i bhfaucibus.