Rach gu prìomh shusbaint Air adhart gu seòladh docs
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 .

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

Placeholder Image cap

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

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

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

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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<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 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Làimhseachadh tiotal sònraichte

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

Rach àiteigin 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

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

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

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.

Placeholder Card image
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

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
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.

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

<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

Cleachd dath teacsa agus goireasan cùl -fhiosrachaidh gus coltas cairt atharrachadh.

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.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Placeholder Image cap
Tiotal na cairt

Is e cairt ghoirid a tha seo.

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

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

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

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

Sass

Caochlaidhean

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