in English

Cairtean

Tha cairtean Bootstrap a’ toirt seachad inneal susbaint sùbailte is leudachail le grunn atharrachaidhean agus roghainnean.

Air an duilleig seo

Mu dheidhinn

Tha cairt na inneal susbaint sùbailte agus leudachail. Tha e a’ toirt a-steach roghainnean airson bann-cinn is bonn-coise, measgachadh farsaing de shusbaint, dathan cùl-raoin co-theacsach, agus roghainnean taisbeanaidh cumhachdach. Ma tha thu eòlach air Bootstrap 3, bidh cairtean a’ dol an àite ar seann phannalan, tobraichean, agus òrdagan. Tha comas-gnìomh coltach ris na co-phàirtean sin ri fhaighinn mar chlasaichean atharrachaidh airson cairtean.

eisimpleir

Tha cairtean air an togail le cho beag de chomharradh agus stoidhlichean sa ghabhas, ach bidh iad fhathast a’ lìbhrigeadh tunna de smachd agus gnàthachadh. Air an togail le flexbox, bidh iad a ’tabhann co-thaobhadh furasta agus a’ measgachadh gu math le co-phàirtean Bootstrap eile. Chan eil gin aca margingu bunaiteach, mar sin cleachd goireasan eadar-dhealaichte mar a dh’ fheumar.

Gu h-ìosal tha eisimpleir de chairt bunaiteach le susbaint measgaichte agus leud stèidhichte. Chan eil leud stèidhichte aig cairtean airson tòiseachadh, agus mar sin lìonaidh iad gu nàdarra leud an eileamaid phàrant aca. Tha seo furasta a ghnàthachadh leis na diofar roghainnean meudachaidh againn .

Tiotal na cairt

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Rach àiteigin

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>

Seòrsaichean susbaint

Bidh cairtean a 'toirt taic do raon farsaing de shusbaint, a' gabhail a-steach ìomhaighean, teacsa, buidhnean liosta, ceanglaichean, agus barrachd. Gu h-ìosal tha eisimpleirean de na tha a’ faighinn taic.

Corp

Is e bloc togail cairt am faidhle .card-body. Cleachd e uair sam bith a bhios feum agad air earrann padded taobh a-staigh cairt.

Seo beagan teacsa taobh a-staigh corp cairt.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tiotalan, teacsa, agus ceanglaichean

Bithear a’ cleachdadh tiotalan chairtean le bhith a’ cur .card-titleri <h*>taga. San aon dòigh, thèid ceanglaichean a chur ris agus a chuir ri taobh a chèile le bhith a’ cur .card-linkri <a>tag.

Bithear a’ cleachdadh fo-thiotalan le bhith a’ cur .card-subtitleri <h*>taga. Ma thèid na .card-titleagus na .card-subtitlenithean a chuir ann an .card-bodyrud, tha tiotal na cairt agus fo-thiotal air an co-thaobhadh gu snog.

Tiotal na cairt

Fo-thiotal cairt

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceangal cairt Ceangal eile

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>

Dealbhan

.card-img-topcuir ìomhaigh gu mullach na cairt. Le .card-text, faodar teacsa a chuir ris a’ chairt. Faodar teacsa a-staigh .card-texta stialladh cuideachd leis na tagaichean HTML àbhaisteach.

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

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>

Dèan liosta de bhuidhnean

Cruthaich liostaichean de shusbaint ann an cairt le buidheann liosta sruthadh.

Nì
An dàrna nì
An treas nì

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>

A' nochdadh

Nì
An dàrna nì
An treas nì

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>

Nì
An dàrna nì
An treas nì

Bun-stèidh cairt

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 cidsin

Measgaich agus maids iomadh seòrsa susbaint gus a’ chairt a tha a dhìth ort a chruthachadh, no tilg a h-uile càil a-steach an sin. Gu h-ìosal tha stoidhlichean ìomhaigh, blocaichean, stoidhlichean teacsa, agus buidheann liosta - uile air am pasgadh ann an cairt le leud stèidhichte.

Tiotal na cairt

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Nì
An dàrna nì
An treas nì

Ceangal cairt Ceangal eile

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>

Ceann-cinnidh agus bonn-coise

Cuir bann-cinn roghainneil agus/no bonn-coise taobh a-staigh cairt.

A' nochdadh

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

Faodar cinn-cinn cairt a stialladh le bhith a’ cur .card-headerri <h*>eileamaidean.

A' nochdadh

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

Quote

Aithris ainmeil, ann an eileamaid blockquote.

Cuideigin ainmeil ann an 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>

A' nochdadh

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

2 latha air ais

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>

Meudachadh

Chan eil cairtean a’ gabhail ris nach eil iad sònraichte widthairson tòiseachadh, agus mar sin bidh iad 100% de leud mura h-eilear ag ràdh a chaochladh. Faodaidh tu seo atharrachadh mar a dh ’fheumar le CSS àbhaisteach, clasaichean clèithe, measgachadh clèithe Sass, no goireasan.

A 'cleachdadh comharra-clèithe

A’ cleachdadh a’ ghriod, paisg na cairtean ann an colbhan is sreathan mar a dh’ fheumar.

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

A 'cleachdadh goireasan

Cleachd an dòrlach againn de ghoireasan sizing a tha rim faighinn gus leud cairt a shuidheachadh gu sgiobalta.

Tiotal na cairt

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Putan

Tiotal na cairt

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Putan

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>

A 'cleachdadh CSS àbhaisteach

Cleachd CSS àbhaisteach anns na duilleagan stoidhle agad no mar stoidhlichean in-loidhne gus leud a shuidheachadh.

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

Co-thaobhadh teacsa

Faodaidh tu co-thaobhadh teacsa cairt sam bith atharrachadh gu sgiobalta - gu h-iomlan no ann am pàirtean sònraichte - leis na clasaichean co-thaobhadh teacsa againn .

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

Cuir beagan seòladh ri bann-cinn (no bloc) cairt le co- phàirtean seòlaidh Bootstrap .

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

Làimhseachadh tiotal sònraichte

Le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Rach àiteigin

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>

Dealbhan

Tha cairtean a’ toirt a-steach beagan roghainnean airson obrachadh le ìomhaighean. Tagh bho bhith a’ cur “bonaidean ìomhaigh” aig gach ceann de chairt, a’ cur thairis ìomhaighean le susbaint cairt, no dìreach a’ cur an ìomhaigh ann an cairt.

Ceapan ìomhaigh

Coltach ri cinn-cinn is bonn-coise, faodaidh cairtean “bonaidean ìomhaigh” gu h-àrd is gu h-ìosal a ghabhail a-steach - ìomhaighean aig mullach no bonn cairt.

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

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>

Ath-chòmhdach ìomhaigh

Tionndaidh ìomhaigh gu cùl-raon cairt agus còmhdaich teacsa do chairt. A rèir an ìomhaigh, is dòcha gu bheil no nach eil feum agad air stoidhlichean no goireasan a bharrachd.

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

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>

Thoir an aire nach bu chòir susbaint a bhith nas motha na àirde an ìomhaigh. Ma tha susbaint nas motha na an ìomhaigh, thèid an susbaint a thaisbeanadh taobh a-muigh an deilbh.

Cothromach

Le bhith a’ cleachdadh measgachadh de chlasaichean clèithe agus goireasan, faodar cairtean a dhèanamh còmhnard ann an dòigh a tha furasta a chleachdadh airson gluasad-a-steach agus freagairteach. Anns an eisimpleir gu h-ìosal, bidh sinn a 'toirt air falbh na cutairean clèithe le .g-0agus a' cleachdadh .col-md-*chlasaichean gus a 'chairt a dhèanamh còmhnard aig a' mdphuing briseadh. Dh’ fhaodadh gum bi feum air tuilleadh atharrachaidhean a rèir susbaint na cairt agad.

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

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>

Stoidhlichean cairt

Tha cairtean a’ toirt a-steach grunn roghainnean airson an cùl-fhiosrachadh, na crìochan agus an dath a ghnàthachadh.

Cùl-fhiosrachadh agus dath

Air a chur ris ann an v5.2.0

Suidhich background-coloraghaidh aghaidh eadar-dhealaichte colorleis an luchd- cuideachaidh againn.text-bg-{color} . Roimhe sin bha e riatanach do roghainn .text-{color}agus .bg-{color}goireasan airson stoidhle a chàradh le làimh, a dh’ fhaodadh tu fhathast a chleachdadh mas fheàrr leat.

Ceann-cinnidh

Prìomh tiotal na cairt

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt àrd-sgoile

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt soirbheachais

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Tiotal cairt cunnart

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt rabhaidh

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt fiosrachaidh

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Tiotal cairt aotrom

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt dorcha

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

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>

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .visually-hiddenchlas.

Crìochan

Cleachd goireasan crìche gus dìreach border-colormeud cairt atharrachadh. Thoir an aire gum faod thu .text-{color}clasaichean a chuir air a’ phàrant .cardno fo-sheata de shusbaint a’ chairt mar a chithear gu h-ìosal.

Ceann-cinnidh

Prìomh tiotal na cairt

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt àrd-sgoile

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt soirbheachais

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Tiotal cairt cunnart

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt rabhaidh

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt fiosrachaidh

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Tiotal cairt aotrom

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

Ceann-cinnidh

Ainm cairt dorcha

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

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>

A’ measgachadh goireasan

Faodaidh tu cuideachd na crìochan air bann-cinn is bonn-coise na cairt atharrachadh mar a dh’ fheumar, agus eadhon an toirt air falbh background-colorle .bg-transparent.

Ceann-cinnidh

Ainm cairt soirbheachais

Cuid de theacs eisimpleir sgiobalta gus togail air tiotal na cairt agus a’ mhòr-chuid de shusbaint na cairt a dhèanamh.

bonn-coise

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>

Cruth cairt

A bharrachd air a bhith a’ dealbhadh an t-susbaint taobh a-staigh chairtean, tha Bootstrap a’ toirt a-steach beagan roghainnean airson sreath de chairtean a chuir a-mach. Aig an àm seo, chan eil na roghainnean cruth sin fhathast freagairteach .

Buidhnean cairt

Cleachd buidhnean cairt gus cairtean a thoirt seachad mar aon eileamaid ceangailte le colbhan leud is àirde co-ionann. Bidh buidhnean chairtean a’ tòiseachadh air an càrnadh agus gan cleachdadh display: flex;gus an ceangal le tomhasan èideadh a’ tòiseachadh aig a’ phuing- smbhriseadh.

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Tha teacsa taiceil air a’ chairt seo gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha susbaint eadhon nas fhaide air a’ chairt seo na a’ chiad fhear a sheallas an gnìomh sin aig an aon àirde.

Air ùrachadh mu dheireadh 3 mionaidean air ais

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>

Nuair a bhios tu a’ cleachdadh buidhnean cairt le bonn-coise, bidh an susbaint aca a’ dol suas gu fèin-ghluasadach.

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Tha teacsa taiceil air a’ chairt seo gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Air ùrachadh mu dheireadh 3 mionaidean air ais

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>

Cairtean-clèithe

Cleachd siostam clèithe Bootstrap agus na .row-colsclasaichean aige gus smachd a chumail air cia mheud colbh clèithe (còmhdaichte timcheall do chairtean) a sheallas tu gach sreath. Mar eisimpleir, seo .row-cols-1na cairtean a chuir a-mach air aon cholbh, agus .row-cols-md-2a’ roinn ceithir cairtean gu leud co-ionann thairis air grunn shreathan, bhon àite brisidh meadhanach suas.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

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>

Atharraich gu .row-cols-3agus chì thu an ceathramh còmhdach cairt.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

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>

Nuair a bhios feum agad air àirde co-ionann, cuir .h-100ris na cairtean. Ma tha thu ag iarraidh àirdean co-ionann gu bunaiteach, faodaidh tu suidheachadh $card-height: 100%ann an Sass.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Tiotal na cairt

Is e cairt ghoirid a tha seo.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Tiotal na cairt

Is e cairt nas fhaide a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

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>

Dìreach mar le buidhnean cairt, bidh bonn-coise chairtean a’ dol suas gu fèin-ghluasadach.

Tiotal na cairt

Is e cairt nas fharsainge a tha seo le teacsa taic gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd. Tha an susbaint seo beagan nas fhaide.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Tha teacsa taiceil air a’ chairt seo gu h-ìosal mar stiùireadh nàdarrach gu susbaint a bharrachd.

Air ùrachadh mu dheireadh 3 mionaidean air ais

Tiotal na cairt

Air ùrachadh mu dheireadh 3 mionaidean air ais

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>

clachaireachd

Ann an v4cleachdadh chleachd sinn dòigh CSS a-mhàin gus atharrais air giùlan cholbhan coltach ri clachaireachd , ach thàinig an dòigh seo le mòran de bhuaidhean mì-thlachdmhor . Ma tha thu airson an seòrsa cruth seo a bhith agad ann an v5, faodaidh tu dìreach feum a dhèanamh den plugan Clachaireachd. Chan eil clachaireachd air a ghabhail a-steach ann am Bootstrap , ach tha sinn air eisimpleir demo a dhèanamh gus do chuideachadh gus tòiseachadh.

CSS

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha cairtean a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .cardairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

  --#{$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};

caochladairean 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;

Cairtean

Mu dheidhinn

eisimpleir

Tiotal na cairt

Seòrsaichean susbaint

Corp

Tiotalan, teacsa, agus ceanglaichean

Tiotal na cairt

Fo-thiotal cairt

Dealbhan

Dèan liosta de bhuidhnean

Sinc cidsin

Tiotal na cairt

Ceann-cinnidh agus bonn-coise

Làimhseachadh tiotal sònraichte

A' nochdadh

Làimhseachadh tiotal sònraichte

Làimhseachadh tiotal sònraichte

Meudachadh

A 'cleachdadh comharra-clèithe

Làimhseachadh tiotal sònraichte

Làimhseachadh tiotal sònraichte

A 'cleachdadh goireasan

Tiotal na cairt

Tiotal na cairt

A 'cleachdadh CSS àbhaisteach

Làimhseachadh tiotal sònraichte

Co-thaobhadh teacsa

Làimhseachadh tiotal sònraichte

Làimhseachadh tiotal sònraichte

Làimhseachadh tiotal sònraichte

Seòladh

Làimhseachadh tiotal sònraichte

Làimhseachadh tiotal sònraichte

Dealbhan

Ceapan ìomhaigh

Tiotal na cairt

Tiotal na cairt

Ath-chòmhdach ìomhaigh

Tiotal na cairt

Cothromach

Tiotal na cairt

Stoidhlichean cairt

Cùl-fhiosrachadh agus dath

Prìomh tiotal na cairt

Ainm cairt àrd-sgoile

Ainm cairt soirbheachais

Tiotal cairt cunnart

Ainm cairt rabhaidh

Ainm cairt fiosrachaidh

Tiotal cairt aotrom

Ainm cairt dorcha

A’ toirt brìgh do theicneòlasan cuideachail

Crìochan

Prìomh tiotal na cairt

Ainm cairt àrd-sgoile

Ainm cairt soirbheachais

Tiotal cairt cunnart

Ainm cairt rabhaidh

Ainm cairt fiosrachaidh

Tiotal cairt aotrom

Ainm cairt dorcha

A’ measgachadh goireasan

Ainm cairt soirbheachais

Cruth cairt

Buidhnean cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Cairtean-clèithe

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt

Tiotal na cairt