Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

Cártaí

Soláthraíonn cártaí Bootstrap coimeádán ábhair solúbtha agus insínte le roghanna agus roghanna iolracha.

Ar an leathanach seo

Faoi

Is coimeádán ábhar solúbtha agus insínte é cárta . Áiríonn sé roghanna le haghaidh ceanntásca agus buntásca, raon leathan ábhar, dathanna cúlra comhthéacsúla, agus roghanna taispeána cumhachtacha. Má tá cur amach agat ar Bootstrap 3, cuirtear cártaí in áit ár seanphainéal, toibreacha agus mionsamhlacha. Tá feidhmiúlacht cosúil leis na comhpháirteanna sin ar fáil mar ranganna mionathraithe do chártaí.

Sampla

Tógtar cártaí le chomh beag marcáil agus stíleanna agus is féidir, ach fós bainistíonn siad tonna rialaithe agus saincheaptha a sheachadadh. Tógtha le flexbox, cuireann siad ailíniú éasca ar fáil agus meascann siad go maith le comhpháirteanna Bootstrap eile. Níl aon acu marginde réir réamhshocraithe, mar sin bain úsáid as fóntais spásála de réir mar is gá.

Anseo thíos tá sampla de chárta bunúsach le hábhar measctha agus leithead seasta. Níl aon leithead seasta ag cártaí le tosú, mar sin líonfaidh siad go nádúrtha leithead iomlán a máthaireiliminte. Tá sé seo saincheaptha go héasca lenár roghanna sizing éagsúla .

Placeholder Image cap
Teideal an chárta

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Téigh áit éigin 
<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>

Cineálacha ábhair

Tacaíonn cártaí le raon leathan ábhar, lena n-áirítear íomhánna, téacs, liostaí grúpaí, naisc, agus go leor eile. Seo thíos samplaí de na rudaí a dtacaítear leo.

Corp

Is é bloc tógála cárta an .card-body. Bain úsáid as é aon uair is gá duit alt padded laistigh de chárta.

Seo roinnt téacs laistigh de chorp cárta. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Teidil, téacs, agus naisc....

Úsáidtear teidil cártaí trí chur .card-titlele <h*>clib. Ar an mbealach céanna, cuirtear naisc leis agus cuirtear iad in aice lena chéile trí chlib .card-linka chur leis.<a>

Úsáidtear fotheidil trí chlib .card-subtitlea chur leis. <h*>Má chuirtear na míreanna .card-titleagus na .card-subtitlemíreanna i .card-bodymír, tá teideal an chárta agus an fotheideal ailínithe go deas.

Teideal an chárta
Fotheideal cárta

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Nasc cárta Nasc 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>

Íomhánna

.card-img-topcuireann sé íomhá ar bharr an chárta. Le .card-text, is féidir téacs a chur leis an gcárta. Is féidir téacs laistigh .card-texta styled leis na clibeanna caighdeánacha HTML freisin.

Placeholder Image cap

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta 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>

Liostaigh na grúpaí

Cruthaigh liostaí ábhar i gcárta le grúpa liosta sruthlaithe.

  • Mír
  • An dara mír
  • An tríú mír
<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>
Réadmhaoin
  • Mír
  • An dara mír
  • An tríú mír
<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>
  • Mír
  • An dara mír
  • An tríú mír
Buntásc cárta 
<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>

Doirteal Cistine

Measc agus meaitseáil cineálacha éagsúla ábhair chun an cárta atá uait a chruthú, nó caith gach rud ann. Taispeántar thíos stíleanna íomhá, bloic, stíleanna téacs, agus grúpa liosta - iad go léir fillte i gcárta le leithead seasta.

Placeholder Image cap
Teideal an chárta

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

  • Mír
  • An dara mír
  • An tríú mír
Nasc cárta Nasc 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 ceanntásc roghnach agus/nó buntásc laistigh de chárta.

Réadmhaoin
Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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>

Is féidir ceanntásca cártaí a styled trí chur .card-headerle <h*>heilimintí.

Réadmhaoin
Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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>
Athfhriotail

Sleachta mór le rá, atá in eilimint bhlocquote.

Duine a bhfuil cáil air in 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>
Réadmhaoin
Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin
2 lá ó shin 
<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>

Sizing

Glactar leis nach bhfuil aon rud sonrach widthle tosú ar chártaí, mar sin beidh siad 100% ar leithead mura luaitear a mhalairt. Is féidir leat é seo a athrú de réir mar is gá le CSS saincheaptha, ranganna greille, meascáin ghreille Sass, nó fóntais.

Ag baint úsáide as marcáil greille

Ag baint úsáide as an eangach, fillte na cártaí i gcolúin agus i sraitheanna de réir mar is gá.

Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin
Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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>

Ag baint úsáide as fóntais

Bain úsáid as ár dornán de na fóntais sizing atá ar fáil chun leithead cárta a shocrú go tapa.

Teideal an chárta

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Cnaipe
Teideal an chárta

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

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

Ag baint úsáide as CSS saincheaptha

Úsáid CSS saincheaptha i do stílbhileoga nó mar stíleanna inlíne chun leithead a shocrú.

Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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>

Ailíniú téacs

Is féidir leat ailíniú téacs aon chárta a athrú go tapa - ina iomláine nó i gcodanna sonracha - lenár ranganna ailínithe téacs .

Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin
Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin
Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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 roinnt nascleanúint le ceanntásc (nó bloc) cárta le comhpháirteanna nascleanúna Bootstrap .

Láimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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áimhseáil speisialta teidil

Agus an téacs tacaíochta thíos mar threoir nádúrtha chuig ábhar breise.

Téigh áit éigin 
<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>

Íomhánna

I measc na gcártaí tá roinnt roghanna chun oibriú le híomhánna. Roghnaigh ó “teipeanna íomhá” a chur i gceangal le ceachtar taobh den chárta, íomhánna a fhorleagan le hábhar an chárta, nó an íomhá a neadú i gcárta.

Caipíní íomhá

Cosúil le ceanntásca agus buntásca, is féidir “caipíní íomhá” ar bharr agus ar bhun a bheith ar na cártaí—íomhánna ag barr nó ag bun cárta.

Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin

Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin

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>

Forleagan íomhá

Cas íomhá ina chúlra cárta agus forleagan téacs do chárta. Ag brath ar an íomhá, b'fhéidir go mbeadh stíleanna nó fóntais bhreise ag teastáil uait nó nach bhfuil.

Placeholder Card image
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin

<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>
Tabhair faoi deara nár chóir go mbeadh ábhar níos mó ná airde na híomhá. Má tá an t-ábhar níos mó ná an íomhá taispeánfar an t-ábhar lasmuigh den íomhá.

Cothrománach

Trí úsáid a bhaint as meascán de ranganna greille agus fóntais, is féidir cártaí a dhéanamh cothrománach ar bhealach atá sofhreagrach do ghutháin phóca. Sa sampla thíos, bainimid na gáitéir ghreille .g-0agus úsáidimid .col-md-*ranganna chun an cárta a dhéanamh cothrománach ag an mdbriseadhphointe. Seans go mbeidh gá le tuilleadh coigeartuithe ag brath ar ábhar do chárta.

Placeholder Image
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin

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

Stíleanna cártaí

I measc na gcártaí tá roghanna éagsúla chun a gcúlra, teorainneacha agus dath a shaincheapadh.

Cúlra agus dath

Úsáid dath an téacs agus fóntais chúlra chun cuma chárta a athrú.

Ceanntásc
Teideal príomhchárta

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta tánaisteach

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal an chárta ratha

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta contúirte

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta rabhaidh

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta faisnéise

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta éadrom

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta dorcha

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta 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>
Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.

Teorainn

Bain úsáid as fóntais teorann chun méid an border-colorchárta a athrú. Tabhair faoi deara gur féidir leat .text-{color}ranganna a chur ar an tuismitheoir .cardnó ar fho-thacar d'ábhar an chárta mar a thaispeántar thíos.

Ceanntásc
Teideal príomhchárta

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta tánaisteach

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal an chárta ratha

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta contúirte

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta rabhaidh

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta faisnéise

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta éadrom

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Ceanntásc
Teideal cárta dorcha

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta 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>

fóntais Mixins

Is féidir leat freisin na teorainneacha ar cheanntásc agus buntásc an chárta a athrú de réir mar is gá, agus fiú a gcuid a bhaint background-colorle .bg-transparent.

Ceanntásc
Teideal an chárta ratha

Roinnt téacs samplach tapa chun cur le teideal an chárta agus an chuid is mó d'ábhar an chárta a dhéanamh.

Buntásc 
<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>

Leagan amach cártaí

Chomh maith leis an ábhar laistigh de chártaí a stíliú, cuimsíonn Bootstrap roinnt roghanna chun sraith cártaí a leagan amach. De thuras na huaire, níl na roghanna leagan amach seo sofhreagrach fós .

Grúpaí cártaí

Bain úsáid as grúpaí cártaí chun cártaí a sholáthar mar eilimint shingil ceangailte le colúin leithead agus airde comhionann. Tosaíonn grúpaí cártaí cruachta agus úsáideann display: flex;siad chun a bheith ceangailte le toisí aonfhoirmeacha ag tosú ag an smbrisphointe.

Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin

Placeholder Image cap
Teideal an chárta

Tá téacs tacaíochta ag an gcárta seo thíos mar threoir nádúrtha d’inneachar breise.

Nuashonraithe is déanaí 3 nóiméad ó shin

Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá ábhar fiú níos faide ag an gcárta seo ná an chéad cheann a léirigh an gníomh sin airde comhionann.

Nuashonraithe is déanaí 3 nóiméad ó shin

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

Agus grúpaí cártaí á n-úsáid le buntásca, beidh a n-ábhar i líne suas go huathoibríoch.

Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin
Placeholder Image cap
Teideal an chárta

Tá téacs tacaíochta ag an gcárta seo thíos mar threoir nádúrtha d’inneachar breise.

Nuashonraithe is déanaí 3 nóiméad ó shin
Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá ábhar fiú níos faide ag an gcárta seo ná an chéad cheann a léirigh an gníomh sin airde comhionann.

Nuashonraithe is déanaí 3 nóiméad ó shin 
<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>

Cártaí greille

Bain úsáid as córas eangaí Bootstrap agus a chuid .row-colsranganna le rialú a dhéanamh ar cé mhéad colún greille (fillte thart ar do chártaí) a thaispeánann tú in aghaidh an tsraith. Mar shampla, tá anseo .row-cols-1na cártaí a leagan amach ar cholún amháin, agus .row-cols-md-2ceithre chárta a roinnt go dtí an leithead céanna trasna sraitheanna iolracha, ón meánbhriseadh suas.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

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

Athraigh go dtí .row-cols-3agus feicfidh tú an ceathrú wrap cárta.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

<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 is gá duit an airde chéanna, cuir .h-100leis na cártaí. Más mian leat airde comhionann de réir réamhshocraithe, is féidir leat a shocrú $card-height: 100%i Sass.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Placeholder Image cap
Teideal an chárta

Is cárta gearr é seo.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise.

Placeholder Image cap
Teideal an chárta

Is cárta níos faide é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

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

Cosúil le grúpaí cártaí, beidh buntásca cártaí líne suas go huathoibríoch.

Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá an t-ábhar seo beagán níos faide.

Nuashonraithe is déanaí 3 nóiméad ó shin
Placeholder Image cap
Teideal an chárta

Tá téacs tacaíochta ag an gcárta seo thíos mar threoir nádúrtha d’inneachar breise.

Nuashonraithe is déanaí 3 nóiméad ó shin
Placeholder Image cap
Teideal an chárta

Is cárta níos leithne é seo le téacs tacaíochta thíos mar threoir nádúrtha d’ábhar breise. Tá ábhar fiú níos faide ag an gcárta seo ná an chéad cheann a léirigh an gníomh sin airde comhionann.

Nuashonraithe is déanaí 3 nóiméad ó shin 
<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>

Saoirseacht

In v4úsáideamar teicníc CSS-amháin chun aithris a dhéanamh ar iompar na gcolún cosúil le Saoirseacht , ach tháinig go leor fo-iarmhairtí míthaitneamhach leis an teicníc seo . Más mian leat leagan amach den chineál seo a bheith agat i v5, is féidir leat úsáid a bhaint as an mbreiseán Saoirseachta. Níl saoirseacht san áireamh i Bootstrap , ach tá sampla taispeána déanta againn chun cabhrú leat tosú.

Sass

Athróga

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;