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 yn marginddiofyn, 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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

Cras justo odio
Dapibus ac facilisis yn
Vestibulum yn eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Sylw

Cras justo odio
Dapibus ac facilisis yn
Vestibulum yn eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Cras justo odio
Dapibus ac facilisis yn
Vestibulum yn eros

Dolen cerdyn Dolen arall

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.

Rhywun enwog yn Source Title

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-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>

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" href="#">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="#">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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</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.

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

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 golwg 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-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-onlydosbarth.

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 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-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 defnyddio display: flex;i gyflawni eu maint gwisg ysgol.

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 y weithred uchder cyfartal hwnnw.

Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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

Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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.

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

Wedi'i ddiweddaru ddiwethaf 3 munud yn ôl

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

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 columneiddo 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-blockfel column-break-inside: avoidnad 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.

Rhywun enwog yn Source Title

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat.

Rhywun enwog yn Source Title

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.

Rhywun enwog yn Source Title

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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-columnsdosbarth 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;
  }
}

Cardiau

Ynghylch

Enghraifft

Teitl y cerdyn

Mathau o gynnwys

Corff

Teitlau, testun, a chysylltiadau....

Teitl y cerdyn

Is-deitl cerdyn

Delweddau

Rhestrwch grwpiau

Sinc gegin

Teitl y cerdyn

Pennawd a throedyn

Triniaeth teitl arbennig

Sylw

Triniaeth teitl arbennig

Triniaeth teitl arbennig

Maintioli

Gan ddefnyddio marcio grid

Triniaeth teitl arbennig

Triniaeth teitl arbennig

Defnyddio cyfleustodau

Teitl y cerdyn

Teitl y cerdyn

Gan ddefnyddio CSS personol

Triniaeth teitl arbennig

Aliniad testun

Triniaeth teitl arbennig

Triniaeth teitl arbennig

Triniaeth teitl arbennig

Llywio

Triniaeth teitl arbennig

Triniaeth teitl arbennig

Delweddau

Capiau delwedd

Teitl y cerdyn

Teitl y cerdyn

Troshaenau delwedd

Teitl y cerdyn

Arddulliau cardiau

Cefndir a lliw

Prif deitl y cerdyn

Teitl cerdyn eilaidd

Teitl cerdyn llwyddiant

Teitl cerdyn perygl

Teitl cerdyn rhybudd

Teitl cerdyn gwybodaeth

Teitl cerdyn ysgafn

Teitl cerdyn tywyll

Cyfleu ystyr i dechnolegau cynorthwyol

Ffin

Prif deitl y cerdyn

Teitl cerdyn eilaidd

Teitl cerdyn llwyddiant

Teitl cerdyn perygl

Teitl cerdyn rhybudd

Teitl cerdyn gwybodaeth

Teitl cerdyn ysgafn

Teitl cerdyn tywyll

Cyfleustodau Mixins

Teitl cerdyn llwyddiant

Cynllun cerdyn

Grwpiau cardiau

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Deciau cardiau

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Colofnau cardiau

Teitl cerdyn sy'n lapio i linell newydd

Teitl y cerdyn