Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Cardiau

Mae cardiau Bootstrap yn darparu cynhwysydd cynnwys hyblyg ac estynadwy gydag amrywiadau ac opsiynau lluosog.

Ar y dudalen hon

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 marginyn 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 .

Placeholder Image cap
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.

Dyma rywfaint o destun o fewn corff 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-titleat <h*>dag. Yn yr un modd, mae dolenni'n cael eu hychwanegu a'u gosod wrth ymyl ei gilydd trwy ychwanegu .card-linkat <a>dag.

Defnyddir isdeitlau trwy ychwanegu .card-subtitleat <h*>dag. Os yw'r .card-titlea'r .card-subtitleeitemau yn cael eu gosod mewn .card-bodyeitem, 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-topgosod delwedd ar ben y cerdyn. Gyda .card-text, gellir ychwanegu testun at y cerdyn. Gall testun o fewn .card-texthefyd gael ei steilio gyda'r tagiau HTML safonol.

Placeholder Image cap

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>
Sylw
  • 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
Troedyn cerdyn 
<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.

Placeholder Image cap
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
Dolen cerdyn Dolen arall 
<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>

Ychwanegwch bennyn a/neu droedyn opsiynol o fewn cerdyn.

Sylw
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-headerat <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

Dyfyniad adnabyddus, wedi'i gynnwys mewn elfen blockquote.

Rhywun enwog yn Source Title 
<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>
Sylw
Triniaeth teitl arbennig

Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Ewch i rywle
2 ddiwrnod yn ôl 
<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 widthi 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 rywle
Triniaeth 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.

Teitl y cerdyn

Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Botwm
Teitl y cerdyn

Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Botwm 
<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 rywle
Triniaeth teitl arbennig

Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Ewch i rywle
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>

<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-end" 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>

Ychwanegwch rywfaint 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" aria-current="true" 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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.

Placeholder Image cap
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

Placeholder Image cap 
<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.

Placeholder Card image
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 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>
Sylwch na ddylai'r cynnwys fod yn fwy nag uchder y ddelwedd. Os yw'r cynnwys yn fwy na'r ddelwedd bydd y cynnwys yn cael ei arddangos y tu allan i'r ddelwedd.

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 .g-0ac yn defnyddio .col-md-*dosbarthiadau i wneud y cerdyn yn llorweddol yn y mdtorbwynt. Efallai y bydd angen addasiadau pellach yn dibynnu ar gynnwys eich cerdyn.

Placeholder Image
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 g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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 liw testun a chyfleustodau cefndir i newid edrychiad cerdyn.

Pennawd
Prif deitl y cerdyn

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn eilaidd

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn llwyddiant

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn perygl

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn rhybudd

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn gwybodaeth

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn ysgafn

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
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-dark 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-dark 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 text-dark 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 .visually-hiddendosbarth.

Ffin

Defnyddiwch gyfleustodau ffin i newid dim ond border-colormaint cerdyn. Sylwch y gallwch chi roi .text-{color}dosbarthiadau ar y rhiant .cardneu is-set o gynnwys y cerdyn fel y dangosir isod.

Pennawd
Prif deitl y cerdyn

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn eilaidd

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn llwyddiant

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn perygl

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn rhybudd

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn gwybodaeth

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
Teitl cerdyn ysgafn

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Pennawd
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">
    <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">
    <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-colorgyda .bg-transparent.

Pennawd
Teitl cerdyn llwyddiant

Ychydig o destun enghreifftiol cyflym i adeiladu ar deitl y cerdyn a gwneud y rhan fwyaf o gynnwys y cerdyn.

Troedyn 
<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 smtorbwynt.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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.

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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>
    </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-colsddosbarthiadau 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-1osod y cardiau ar un golofn, a .row-cols-md-2rhannu pedwar cerdyn i'r un lled ar draws rhesi lluosog, o'r torbwynt canolig i fyny.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
Teitl y cerdyn

Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Placeholder Image cap
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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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-3ac fe welwch y pedwerydd papur lapio cerdyn.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
Teitl y cerdyn

Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Placeholder Image cap
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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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-100at y cardiau. Os ydych chi eisiau uchder cyfartal yn ddiofyn, gallwch chi osod $card-height: 100%yn Sass.

Placeholder Image cap
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.

Placeholder Image cap
Teitl y cerdyn

Dyma gerdyn byr.

Placeholder Image cap
Teitl y cerdyn

Mae hwn yn gerdyn hirach gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Placeholder Image cap
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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Yn union fel gyda grwpiau cardiau, bydd troedynnau cardiau yn cyd-fynd yn awtomatig.

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Gwaith maen

v4Defnyddiwyd techneg CSS yn unig i ddynwared ymddygiad colofnau tebyg i waith maen , ond daeth y dechneg hon â llawer o sgîl-effeithiau annymunol . Os ydych chi am gael y math hwn o gynllun yn v5, gallwch chi ddefnyddio'r ategyn Masonry yn unig. Nid yw gwaith maen wedi'i gynnwys yn Bootstrap , ond rydym wedi gwneud enghraifft arddangos i'ch helpu i ddechrau arni.

Sass

Newidynnau

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;