Source

Cairtean

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

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 .

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

Ceap dealbh [100%x180]

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 class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Dèan liosta de bhuidhnean

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

  • Dìreach odio
  • Dapibus agus facilisis ann an
  • Vestbulum aig Eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
A' nochdadh
  • Dìreach odio
  • Dapibus agus facilisis ann an
  • Vestbulum aig Eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

Ceap dealbh [100%x180]
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.

  • Dìreach odio
  • Dapibus agus facilisis ann an
  • Vestbulum aig Eros
Ceangal cairt Ceangal eile 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
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="#">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.

100%x180
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

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

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

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

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

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 cairt a’ cleachdadh display: flex;gus am meud èideadh a choileanadh.

100%x180
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

100%x180
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

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

100%x180
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
100%x180
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
100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Deic cairt

A bheil feum agad air seata de chairtean leud is àirde co-ionann nach eil ceangailte ri chèile? Cleachd clàran cairt.

100%x200
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.

Air ùrachadh mu dheireadh 3 mionaidean air ais

100%x200
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

100%x200
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

100%x180
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
100%x180
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
100%x180
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Colbhan cairt

Faodar cairtean a chuir air dòigh ann an colbhan coltach ri clachaireachd le dìreach CSS le bhith gan pasgadh a-steach .card-columns. Tha cairtean air an togail le columnfeartan CSS an àite flexbox airson co-thaobhadh nas fhasa. Tha cairtean air an òrdachadh bho mhullach gu bonn agus clì gu deas.

Cinn suas! Faodaidh do mhìltean le colbhan cairt atharrachadh. Gus casg a chuir air cairtean bho bhith a’ briseadh thairis air colbhan, feumaidh sinn an suidheachadh display: inline-blockmar column-break-inside: avoidnach eil fuasgladh bulletproof fhathast.

100%x160
Tiotal cairt a tha a 'dol gu loidhne ùr

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title
100%x160
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suidheachadh iomlan iomlan.

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

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

Faodar colbhan cairt a leudachadh agus a ghnàthachadh le còd a bharrachd. Gu h-ìosal tha leudachadh den .card-columnschlas a ’cleachdadh an aon CSS a bhios sinn a’ cleachdadh - colbhan CSS - gus seata de shreathan freagairteach a ghineadh airson an àireamh de cholbhan atharrachadh.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}