Cardiau
Mae cardiau Bootstrap yn darparu cynhwysydd cynnwys hyblyg ac estynadwy gydag amrywiadau ac opsiynau lluosog.
Ynghylch
Mae cerdyn yn gynhwysydd cynnwys hyblyg ac estynadwy. Mae'n cynnwys opsiynau ar gyfer penawdau a throedynnau, amrywiaeth eang o gynnwys, lliwiau cefndir cyd-destunol, ac opsiynau arddangos pwerus. Os ydych chi'n gyfarwydd â Bootstrap 3, mae cardiau'n disodli ein hen baneli, ffynhonnau a mân-luniau. Mae ymarferoldeb tebyg i'r cydrannau hynny ar gael fel dosbarthiadau addasu ar gyfer cardiau.
Enghraifft
Mae cardiau'n cael eu hadeiladu gyda chyn lleied o farcio ac arddulliau â phosibl, ond maent yn dal i lwyddo i ddarparu tunnell o reolaeth ac addasu. Wedi'u hadeiladu gyda flexbox, maent yn cynnig aliniad hawdd ac yn cymysgu'n dda â chydrannau Bootstrap eraill. Nid oes ganddynt unrhyw margin
yn ddiofyn, felly defnyddiwch gyfleustodau bylchu yn ôl yr angen.
Isod mae enghraifft o gerdyn sylfaenol gyda chynnwys cymysg a lled sefydlog. Nid oes gan gardiau unrhyw led sefydlog i ddechrau, felly byddant yn naturiol yn llenwi lled llawn ei riant elfen. Mae hyn yn hawdd ei addasu gyda'n gwahanol opsiynau maint .
Teitl y cerdyn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Ewch i rywle<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Mathau o gynnwys
Mae cardiau yn cefnogi amrywiaeth eang o gynnwys, gan gynnwys delweddau, testun, grwpiau rhestr, dolenni, a mwy. Isod mae enghreifftiau o'r hyn sy'n cael ei gefnogi.
Corff
Bloc adeiladu cerdyn yw'r .card-body
. Defnyddiwch ef pryd bynnag y bydd angen adran wedi'i phadio arnoch o fewn cerdyn.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Teitlau, testun, a chysylltiadau....
Defnyddir teitlau cardiau trwy ychwanegu .card-title
at <h*>
dag. Yn yr un modd, mae dolenni'n cael eu hychwanegu a'u gosod wrth ymyl ei gilydd trwy ychwanegu .card-link
at <a>
dag.
Defnyddir isdeitlau trwy ychwanegu .card-subtitle
at <h*>
dag. Os yw'r .card-title
a'r .card-subtitle
eitemau yn cael eu gosod mewn .card-body
eitem, mae teitl y cerdyn a'r is-deitl wedi'u halinio'n braf.
Teitl y cerdyn
Is-deitl cerdyn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Dolen cerdyn Dolen arall<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Delweddau
.card-img-top
gosod delwedd ar ben y cerdyn. Gyda .card-text
, gellir ychwanegu testun at y cerdyn. Gall testun o fewn .card-text
hefyd gael ei steilio gyda'r tagiau HTML safonol.
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Rhestrwch grwpiau
Creu rhestrau o gynnwys mewn cerdyn gyda grŵp rhestr fflysio.
- Eitem
- Ail eitem
- Trydydd eitem
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Eitem
- Ail eitem
- Trydydd eitem
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Eitem
- Ail eitem
- Trydydd eitem
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Sinc gegin
Cymysgwch a chyfatebwch sawl math o gynnwys i greu'r cerdyn sydd ei angen arnoch, neu taflwch bopeth yno. Isod mae arddulliau delwedd, blociau, arddulliau testun, a grŵp rhestr - i gyd wedi'u lapio mewn cerdyn lled sefydlog.
Teitl y cerdyn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
- Eitem
- Ail eitem
- Trydydd eitem
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Pennawd a throedyn
Ychwanegwch bennyn a/neu droedyn opsiynol o fewn cerdyn.
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Gellir steilio penawdau cardiau trwy ychwanegu .card-header
at <h*>
elfennau.
Sylw
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Maintioli
Mae cardiau'n rhagdybio nad oes unrhyw beth penodol width
i ddechrau, felly byddant yn 100% o led oni nodir yn wahanol. Gallwch chi newid hyn yn ôl yr angen gyda CSS arferol, dosbarthiadau grid, cymysgeddau Sass grid, neu gyfleustodau.
Gan ddefnyddio marcio grid
Gan ddefnyddio'r grid, lapio cardiau mewn colofnau a rhesi yn ôl yr angen.
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywleTriniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
Defnyddio cyfleustodau
Defnyddiwch ein llond llaw o'r cyfleustodau sizing sydd ar gael i osod lled cerdyn yn gyflym.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
Gan ddefnyddio CSS personol
Defnyddiwch CSS personol yn eich dalennau arddull neu fel arddulliau mewnol i osod lled.
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Aliniad testun
Gallwch chi newid aliniad testun unrhyw gerdyn yn gyflym - yn ei gyfanrwydd neu rannau penodol - gyda'n dosbarthiadau alinio testun .
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywleTriniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywleTriniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Llywio
Ychwanegu rhywfaint o lywio i bennawd (neu floc) cerdyn gyda chydrannau llywio Bootstrap .
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Triniaeth teitl arbennig
Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Ewch i rywle<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Delweddau
Mae cardiau'n cynnwys ychydig o opsiynau ar gyfer gweithio gyda delweddau. Dewiswch o atodi “capiau delwedd” ar ddau ben cerdyn, troshaenu delweddau gyda chynnwys cerdyn, neu fewnosod y ddelwedd mewn cerdyn.
Capiau delwedd
Yn debyg i benawdau a throedynnau, gall cardiau gynnwys “capiau delwedd” uchaf a gwaelod - delweddau ar frig neu waelod cerdyn.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Troshaenau delwedd
Trowch ddelwedd yn gefndir cerdyn a throshaenu testun eich cerdyn. Yn dibynnu ar y ddelwedd, efallai y bydd angen arddulliau neu gyfleustodau ychwanegol arnoch chi neu beidio.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
Llorweddol
Gan ddefnyddio cyfuniad o ddosbarthiadau grid a chyfleustodau, gellir gwneud cardiau'n llorweddol mewn ffordd ymatebol sy'n gyfeillgar i ffonau symudol. Yn yr enghraifft isod, rydyn ni'n tynnu'r cwteri grid .no-gutters
ac yn defnyddio .col-md-*
dosbarthiadau i wneud y cerdyn yn llorweddol yn y md
torbwynt. Efallai y bydd angen addasiadau pellach yn dibynnu ar gynnwys eich cerdyn.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Arddulliau cardiau
Mae cardiau'n cynnwys opsiynau amrywiol ar gyfer addasu eu cefndiroedd, eu ffiniau a'u lliw.
Cefndir a lliw
Defnyddiwch gyfleustodau testun a chefndir i newid edrychiad cerdyn.
Prif deitl y cerdyn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn eilaidd
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn llwyddiant
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn perygl
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn rhybudd
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn gwybodaeth
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn ysgafn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn tywyll
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Cyfleu ystyr i dechnolegau cynorthwyol
Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (ee y testun gweladwy), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .sr-only
dosbarth.
Ffin
Defnyddiwch gyfleustodau ffin i newid dim ond border-color
maint cerdyn. Sylwch y gallwch chi roi .text-{color}
dosbarthiadau ar y rhiant .card
neu is-set o gynnwys y cerdyn fel y dangosir isod.
Prif deitl y cerdyn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn eilaidd
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn llwyddiant
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn perygl
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn rhybudd
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn gwybodaeth
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn ysgafn
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
Teitl cerdyn tywyll
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Cyfleustodau Mixins
Gallwch hefyd newid y ffiniau ar bennyn a throedyn y cerdyn yn ôl yr angen, a hyd yn oed eu tynnu background-color
gyda .bg-transparent
.
Teitl cerdyn llwyddiant
Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
Cynllun cerdyn
Yn ogystal â steilio'r cynnwys o fewn cardiau, mae Bootstrap yn cynnwys ychydig o opsiynau ar gyfer gosod cyfres o gardiau. Am y tro, nid yw'r opsiynau cynllun hyn yn ymatebol eto .
Grwpiau cardiau
Defnyddiwch grwpiau cardiau i rendro cardiau fel elfen sengl, ynghlwm gyda cholofnau lled ac uchder cyfartal. Mae grwpiau cardiau yn dechrau wedi'u pentyrru ac yn defnyddio display: flex;
i ddod yn gysylltiedig â dimensiynau unffurf gan ddechrau yn y sm
torbwynt.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Teitl y cerdyn
Mae gan y cerdyn hwn destun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae gan y cerdyn hwn gynnwys hyd yn oed yn hirach na'r cyntaf i ddangos bod gweithredu uchder cyfartal.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Wrth ddefnyddio grwpiau cardiau gyda throedynnau, bydd eu cynnwys yn llinellu'n awtomatig.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Mae gan y cerdyn hwn destun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae gan y cerdyn hwn gynnwys hyd yn oed yn hirach na'r cyntaf i ddangos bod gweithredu uchder cyfartal.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Deciau cardiau
Angen set o gardiau lled ac uchder cyfartal nad ydyn nhw ynghlwm wrth ei gilydd? Defnyddiwch ddeciau cardiau.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Teitl y cerdyn
Mae gan y cerdyn hwn destun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae gan y cerdyn hwn gynnwys hyd yn oed yn hirach na'r cyntaf i ddangos bod gweithredu uchder cyfartal.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Yn union fel gyda grwpiau cardiau, bydd troedynnau cardiau mewn deciau yn cyd-fynd yn awtomatig.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Mae gan y cerdyn hwn destun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Teitl y cerdyn
Mae hwn yn gerdyn ehangach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae gan y cerdyn hwn gynnwys hyd yn oed yn hirach na'r cyntaf i ddangos bod gweithredu uchder cyfartal.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Cardiau grid
Defnyddiwch system grid Bootstrap a'i .row-cols
ddosbarthiadau i reoli faint o golofnau grid (wedi'u lapio o amgylch eich cardiau) rydych chi'n eu dangos fesul rhes. Er enghraifft, dyma .row-cols-1
osod y cardiau ar un golofn, a .row-cols-md-2
rhannu pedwar cerdyn i'r un lled ar draws rhesi lluosog, o'r torbwynt canolig i fyny.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Newidiwch ef i .row-cols-3
ac fe welwch y pedwerydd papur lapio cerdyn.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Pan fydd angen uchder cyfartal arnoch, ychwanegwch .h-100
at y cardiau. Os ydych chi eisiau uchder cyfartal yn ddiofyn, gallwch chi osod $card-height: 100%
yn Sass.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Teitl y cerdyn
Dyma gerdyn byr.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Teitl y cerdyn
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Colofnau cardiau
Gellir trefnu cardiau yn golofnau tebyg i waith maen gyda CSS yn unig trwy eu lapio mewn .card-columns
. Mae cardiau'n cael eu hadeiladu gydag column
eiddo CSS yn lle flexbox i'w halinio'n haws. Mae cardiau'n cael eu harchebu o'r top i'r gwaelod ac o'r chwith i'r dde.
Pennau i fyny! Gall eich milltiredd gyda cholofnau cardiau amrywio. Er mwyn atal cardiau rhag torri ar draws colofnau, mae'n rhaid i ni eu gosod display: inline-block
fel column-break-inside: avoid
nad yw'n ddatrysiad atal bwled eto.
Teitl cerdyn sy'n lapio i linell newydd
Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol. Mae'r cynnwys hwn ychydig yn hirach.
Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.
Teitl y cerdyn
Mae gan y cerdyn hwn destun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.
Teitl y cerdyn
Mae gan y cerdyn hwn deitl rheolaidd a pharagraffau byr o destun oddi tano.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.
Teitl y cerdyn
Dyma gerdyn arall gyda theitl a thestun ategol isod. Mae gan y cerdyn hwn rywfaint o gynnwys ychwanegol i'w wneud ychydig yn uwch yn gyffredinol.
Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Gellir hefyd ymestyn ac addasu colofnau cardiau gyda rhywfaint o god ychwanegol. Isod mae estyniad o'r .card-columns
dosbarth gan ddefnyddio'r un CSS rydyn ni'n ei ddefnyddio - colofnau CSS - i gynhyrchu set o haenau ymatebol ar gyfer newid nifer y colofnau.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}