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 .mediaac .media-bodyo 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.<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
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.
</div>
</div>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. ::afterYr unig ateb yw gosod displaygwerth 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 .mediao fewn .media-bodygwrthrych 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.<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
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.
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." class="mr-3" alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
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.
</div>
</div>
</div>
</div>Aliniad
Gall cyfryngau mewn gwrthrych cyfryngau gael eu halinio â chyfleustodau flexbox i frig (diofyn), canol, neu ddiwedd eich .media-bodycynnwys.
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.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>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.</p>
<p>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.</p>
</div>
</div>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.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>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.</p>
<p class="mb-0">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.</p>
</div>
</div>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.
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>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.</p>
<p class="mb-0">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.</p>
</div>
</div>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 ordereiddo (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.<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
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.
</div>
<img src="..." class="ml-3" alt="...">
</div>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-unstyledi gael gwared ar unrhyw steiliau rhestr ddiofyn porwr, ac yna cymhwyso .mediai'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.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
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.
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
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.
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
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.
</div>
</li>
</ul>