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 .

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

html

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

html

<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

html

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

html

<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

html

<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

html

<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

html

<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

Dolen cerdyn Dolen arall

html

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

Sylw

Triniaeth teitl arbennig

Gyda thestun ategol isod fel arweiniad naturiol i gynnwys ychwanegol.

Ewch i rywle

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

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

html

<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

html

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

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

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

html

<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

Ychwanegwyd yn v5.2.0

Gosodwch background-colorflaendir cyferbyniolcolor gyda'n cynorthwywyr . Yn flaenorol roedd yn ofynnol paru eich dewis o a chyfleustodau ar gyfer steilio â llaw, y gallwch eu defnyddio o hyd os yw'n well gennych..text-bg-{color}.text-{color}.bg-{color}

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.

html

<div class="card text-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-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-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-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-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-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-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-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.

html

<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

html

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

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

html

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

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

html

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

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.

html

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

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.

html

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

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.

html

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

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

html

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

CSS

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae cardiau bellach yn defnyddio newidynnau CSS lleol ymlaen ar .cardgyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Newidynnau Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;

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

Llorweddol

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

Cardiau grid

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn

Teitl y cerdyn