Gwrthrych cyfryngau
Mae dogfennaeth ac enghreifftiau ar gyfer gwrthrych cyfryngau Bootstrap i adeiladu cydrannau hynod ailadroddus fel sylwadau blog, trydariadau, ac ati.
Enghraifft
Mae gwrthrych y cyfryngau yn helpu i adeiladu cydrannau cymhleth ac ailadroddus lle mae rhai cyfryngau wedi'u lleoli ochr yn ochr â chynnwys nad yw'n cofleidio'r cyfryngau dywededig. Hefyd, mae'n gwneud hyn gyda dim ond dau ddosbarth gofynnol diolch i flexbox.
Isod mae enghraifft o wrthrych cyfrwng unigol. Dim ond dau ddosbarth sydd eu hangen - y lapio .media
ac .media-body
o amgylch eich cynnwys. Gellir rheoli padin ac ymyl dewisol trwy gyfleustodau bylchu .
Pennawd cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.Flexbug #12: Nid yw elfennau mewnol yn cael eu trin fel eitemau hyblyg
Nid yw Internet Explorer 10-11 yn gwneud elfennau mewnol fel dolenni neu ddelweddau (neu ffug-elfennau) yn eitemau hyblyg ::before
. ::after
Yr unig ateb yw gosod display
gwerth an-mewnol (ee, block
, inline-block
, neu flex
). Rydym yn awgrymu defnyddio .d-flex
, un o'n cyfleustodau arddangos , fel ateb hawdd.
Ffynhonnell: Flexbugs ar GitHub
Nythu
Gall gwrthrychau cyfryngau gael eu nythu'n anfeidrol, er ein bod yn awgrymu eich bod yn stopio ar ryw adeg. Lle wedi'i nythu .media
o fewn .media-body
gwrthrych cyfrwng rhiant.
Pennawd cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.Aliniad
Gall cyfryngau mewn gwrthrych cyfryngau gael eu halinio â chyfleustodau flexbox i frig (diofyn), canol, neu ddiwedd eich .media-body
cynnwys.
Cyfryngau wedi'u halinio uchaf
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
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.
Cyfryngau wedi'u halinio yn y canol
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
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.
Cyfryngau wedi'u halinio gwaelod
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.
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.
Gorchymyn
Newidiwch drefn y cynnwys mewn gwrthrychau cyfryngol trwy addasu'r HTML ei hun, neu trwy ychwanegu rhywfaint o flexbox CSS wedi'i deilwra i osod yr order
eiddo (i gyfanrif o'ch dewis).
Gwrthrych cyfryngau
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.Rhestr cyfryngau
Oherwydd bod gan y gwrthrych cyfryngau cyn lleied o ofynion strwythurol, gallwch hefyd ddefnyddio'r dosbarthiadau hyn ar elfennau HTML rhestr. Ar eich <ul>
neu <ol>
, ychwanegwch y .list-unstyled
i gael gwared ar unrhyw steiliau rhestr ddiofyn porwr, ac yna cymhwyso .media
i'ch <li>
s. Fel bob amser, defnyddiwch gyfleustodau bylchu lle bynnag y bo angen i fireinio.
-
Gwrthrych cyfryngau sy'n seiliedig ar restr
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws. -
Gwrthrych cyfryngau sy'n seiliedig ar restr
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws. -
Gwrthrych cyfryngau sy'n seiliedig ar restr
Cras sit amet nibh libero, in gravida nulla. Nulla neu 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 yn faucibws.