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 .

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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 chomhlacht cárta.

html

<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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

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.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Réadmhaoin

Mír
An dara mír
An tríú mír

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Mír
An dara mír
An tríú mír

Buntásc cárta

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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.

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Ceanntásc agus buntásc

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

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Athfhriotail

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

Duine a bhfuil cáil air in Source Title

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

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

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

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

html

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

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

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Cuir 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

html

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

Láimhseáil speisialta teidil

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

Téigh áit éigin

html

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

Í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 cá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 chárta – íomhánna ag barr nó ag bun cárta.

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

html

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

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.

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

html

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

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.

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

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

Curtha leis in v5.2.0

Socraigh background-colortulra codarsnachtacolor lenár gcúntóirí.text-bg-{color} . Roimhe seo bhí sé riachtanach do rogha .text-{color}agus .bg-{color}fóntais do stílithe a phéireáil de láimh, ar féidir leat iad a úsáid fós más fearr leat.

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.

html

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

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.

html

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

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

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

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.

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

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

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

html

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

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

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

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

Teideal an chárta

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

html

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

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 leithead comhionann trasna sraitheanna iolracha, ón meánbhriseadh suas.

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.

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.

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.

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.

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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.

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.

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.

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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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.

Teideal an chárta

Is cárta gearr é seo.

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.

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.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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

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

Teideal an chárta

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Saoirseacht

In v4úsáideamar teicníc CSS-amháin chun aithris a dhéanamh ar iompar colú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ú.

CSS

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann cártaí athróga áitiúla CSS anois le .cardhaghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

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

Athróga Sass

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

Cártaí

Faoi

Sampla

Teideal an chárta

Cineálacha ábhair

Corp

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

Teideal an chárta

Fotheideal cárta

Íomhánna

Liostaigh na grúpaí

Doirteal Cistine

Teideal an chárta

Ceanntásc agus buntásc

Láimhseáil speisialta teidil

Réadmhaoin

Láimhseáil speisialta teidil

Láimhseáil speisialta teidil

Sizing

Ag baint úsáide as marcáil greille

Láimhseáil speisialta teidil

Láimhseáil speisialta teidil

Ag baint úsáide as fóntais

Teideal an chárta

Teideal an chárta

Ag baint úsáide as CSS saincheaptha

Láimhseáil speisialta teidil

Ailíniú téacs

Láimhseáil speisialta teidil

Láimhseáil speisialta teidil

Láimhseáil speisialta teidil

Loingseoireacht

Láimhseáil speisialta teidil

Láimhseáil speisialta teidil

Íomhánna

Caipíní íomhá

Teideal an chárta

Teideal an chárta

Forleagan íomhá

Teideal an chárta

Cothrománach

Teideal an chárta

Stíleanna cártaí

Cúlra agus dath

Teideal príomhchárta

Teideal cárta tánaisteach

Teideal an chárta ratha

Teideal cárta contúirte

Teideal cárta rabhaidh

Teideal cárta faisnéise

Teideal cárta éadrom

Teideal cárta dorcha

Brí a chur in iúl do theicneolaíochtaí cúnta

Teorainn

Teideal príomhchárta

Teideal cárta tánaisteach

Teideal an chárta ratha

Teideal cárta contúirte

Teideal cárta rabhaidh

Teideal cárta faisnéise

Teideal cárta éadrom

Teideal cárta dorcha

fóntais Mixins

Teideal an chárta ratha

Leagan amach cártaí

Grúpaí cártaí

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta

Cártaí greille

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta

Teideal an chárta