Spil

Bootstrap kortin bjóða upp á sveigjanlegt og stækkanlegt efnisílát með mörgum afbrigðum og valkostum.

Á þessari síðu

Um

Kort er sveigjanlegt og teygjanlegt efnisílát . Það felur í sér valkosti fyrir hausa og fætur, fjölbreytt úrval af efni, samhengislitum bakgrunni og öfluga skjávalkosti. Ef þú þekkir Bootstrap 3, koma spil í stað gömlu spjaldanna okkar, brunna og smámynda. Svipuð virkni og þessir íhlutir eru fáanlegir sem breytingaflokkar fyrir kort.

Dæmi

Kort eru smíðuð með eins litlu álagi og stílum og mögulegt er, en ná samt að skila miklu af stjórn og sérsniðnum. Þeir eru smíðaðir með flexbox og bjóða upp á auðvelda röðun og blandast vel við aðra Bootstrap íhluti. Þeir hafa engin marginsjálfgefið, svo notaðu biltól eftir þörfum.

Hér að neðan er dæmi um grunnkort með blönduðu efni og fastri breidd. Spjöld hafa enga fasta breidd til að byrja, þannig að þau fylla náttúrulega alla breidd móðureiningarinnar. Þetta er auðvelt að aðlaga með ýmsum stærðarmöguleikum okkar .

Titill korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Farðu eitthvert

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>

Efnistegundir

Kort styðja margs konar efni, þar á meðal myndir, texta, listahópa, tengla og fleira. Hér að neðan eru dæmi um það sem er stutt.

Líkami

Byggingarreitur korts er .card-body. Notaðu það hvenær sem þú þarft bólstraðan hluta á kortinu.

Þetta er einhver texti í meginmáli korts.

html

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

Titlar, texti og tenglar

Kortaheiti eru notaðir með því að bæta .card-titlevið <h*>merki. Á sama hátt er hlekkjum bætt við og settir við hliðina á hvern annan með því að bæta .card-linkvið <a>merki.

Texti er notaður með því að bæta a .card-subtitlevið <h*>merki. Ef .card-titleog .card-subtitlehlutirnir eru settir í .card-bodyhlut, eru nafnspjaldið og undirtitillinn samræmdur vel.

Titill korts

Texti korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Kortatengill Annar hlekkur

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>

Myndir

.card-img-topsetur mynd efst á kortinu. Með .card-text, er hægt að bæta texta við kortið. Texta innan .card-texter einnig hægt að stíla með venjulegum HTML merkjum.

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

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>

Listaðu hópa

Búðu til lista yfir efni á spjaldi með sléttlistahópi.

Atriði
Annað atriði
Þriðja atriðið

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>

Valið

Atriði
Annað atriði
Þriðja atriðið

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>

Atriði
Annað atriði
Þriðja atriðið

Kortafótur

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>

Eldhúsvaskur

Blandaðu saman mörgum efnistegundum til að búa til kortið sem þú þarft, eða hentu öllu þar inn. Sýnd hér að neðan eru myndstíll, kubbar, textastíll og listahópur - allt vafið inn í spjald með fastri breidd.

Titill korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Atriði
Annað atriði
Þriðja atriðið

Kortatengill Annar hlekkur

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>

Haus og fótur

Bættu við valfrjálsum haus og/eða fót á korti.

Valið

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

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>

Hægt er að stilla kortahausa með því að bæta .card-headervið <h*>þætti.

Valið

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

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>

Tilvitnun

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

Einhver frægur í 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>

Valið

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

fyrir 2 dögum

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>

Stærð

Spilin gera ráð fyrir að ekkert sé ákveðið widthtil að byrja, þannig að þau verða 100% breið nema annað sé tekið fram. Þú getur breytt þessu eftir þörfum með sérsniðnum CSS, grid classes, grid Sass mixins eða tólum.

Nota rist merkingu

Notaðu ristina til að vefja spilum í dálka og raðir eftir þörfum.

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

html

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

Að nota tól

Notaðu handfylli af tiltækum stærðartólum okkar til að stilla fljótt breidd korts.

Titill korts

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Takki

Titill korts

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Takki

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>

Notar sérsniðna CSS

Notaðu sérsniðna CSS í stílblöðunum þínum eða sem innbyggða stíla til að stilla breidd.

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

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>

Textajöfnun

Þú getur fljótt breytt textajöfnun hvaða spjalda sem er — í heild sinni eða ákveðnum hlutum — með textajöfnunarflokkunum okkar .

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

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>

Bættu smá leiðsögn við haus (eða blokk) korts með stýrihlutum Bootstrap .

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

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>

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert

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>

Myndir

Kort innihalda nokkra möguleika til að vinna með myndir. Veldu á milli þess að setja „myndahúfur“ á hvorum enda kortsins, leggja myndir yfir efni kortsins eða einfaldlega fella myndina inn á kort.

Myndahúfur

Líkt og hausar og síðufætur geta spjöld innihaldið efri og neðri „myndahúfur“—myndir efst eða neðst á korti.

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

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>

Myndyfirlag

Breyttu mynd í kortabakgrunn og leggðu texta kortsins yfir. Það fer eftir myndinni, þú gætir þurft viðbótarstíl eða tól eða ekki.

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

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>

Athugaðu að innihald ætti ekki að vera stærra en hæð myndarinnar. Ef efnið er stærra en myndin birtist efnið utan myndarinnar.

Lárétt

Með því að nota blöndu af rist og gagnsemi flokkum er hægt að gera kort lárétt á farsímavænan og móttækilegan hátt. Í dæminu hér að neðan fjarlægjum við ristrennurnar með .g-0og notum .col-md-*flokka til að gera kortið lárétt við mdbrotpunktinn. Frekari lagfæringar gætu verið nauðsynlegar eftir innihaldi kortsins.

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

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>

Kortastíll

Kort innihalda ýmsa möguleika til að sérsníða bakgrunn þeirra, ramma og lit.

Bakgrunnur og litur

Bætt við í v5.2.0

Settu background-colorandstæðan forgrunn colormeð aðstoðarmönnum okkar.text-bg-{color} . Áður var nauðsynlegt að para handvirkt val þitt á .text-{color}og .bg-{color}tólum fyrir stíl, sem þú getur samt notað ef þú vilt.

Fyrirsögn

Titill aðalkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Heiti aukaspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill árangurskorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Heiti hættukorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill viðvörunarkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill upplýsingakorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill ljósspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Dökkur nafnspjald

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

html

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

Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .visually-hiddenbekknum.

Landamæri

Notaðu landamæraforrit til að breyta aðeins border-colorkorti. Athugaðu að þú getur sett .text-{color}námskeið á foreldri .cardeða hlutmengi af innihaldi kortsins eins og sýnt er hér að neðan.

Fyrirsögn

Titill aðalkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Heiti aukaspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill árangurskorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Heiti hættukorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill viðvörunarkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill upplýsingakorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Titill ljósspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn

Dökkur nafnspjald

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

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>

Mixins veitur

Þú getur líka breytt rammanum á haus- og fæti kortsins eftir þörfum og jafnvel fjarlægt þau background-colormeð .bg-transparent.

Fyrirsögn

Titill árangurskorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fótur

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>

Uppsetning korta

Auk þess að stíla innihaldið á kortum, inniheldur Bootstrap nokkra möguleika til að setja upp röð af kortum. Í bili eru þessir útlitsvalkostir ekki móttækilegir enn .

Kortahópar

Notaðu kortahópa til að birta spilin sem einn, festan þátt með jafnbreiðum og hæðardálkum. Kortahópar byrja staflað og nota display: flex;til að festast með samræmdum víddum sem byrja á smbrotastað.

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

Titill korts

Þetta spjald er með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Síðast uppfært fyrir 3 mínútum

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta kort hefur jafnvel lengra innihald en það fyrsta sem sýnir sömu hæðaraðgerðina.

Síðast uppfært fyrir 3 mínútum

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>

Þegar kortahópar eru notaðir með fótum mun innihald þeirra sjálfkrafa vera í röð.

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

Titill korts

Þetta spjald er með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Síðast uppfært fyrir 3 mínútum

Titill korts

Síðast uppfært fyrir 3 mínútum

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>

Ratkort

Notaðu Bootstrap grid kerfið og .row-colsflokka þess til að stjórna því hversu marga grid dálka (vafinn utan um spilin þín) þú sýnir í hverri röð. Til dæmis, hér er .row-cols-1að setja spilin út á einn dálk og .row-cols-md-2skipta fjórum spilum í jafn breidd yfir margar raðir, frá miðlungs broti og upp.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

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>

Breyttu því í .row-cols-3og þú munt sjá fjórða spilið.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

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>

Þegar þú þarft jafna hæð skaltu bæta .h-100við spilin. Ef þú vilt jafna hæð sjálfgefið geturðu stillt $card-height: 100%í Sass.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Titill korts

Þetta er stutt kort.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni.

Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

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>

Rétt eins og með kortahópa munu fætur korta sjálfkrafa raðast upp.

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

Titill korts

Þetta spjald er með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Síðast uppfært fyrir 3 mínútum

Titill korts

Síðast uppfært fyrir 3 mínútum

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>

Múrverk

Í v4við notuðum aðeins CSS tækni til að líkja eftir hegðun múrsteinslíkra dálka, en þessari tækni fylgdi fullt af óþægilegum aukaverkunum . Ef þú vilt hafa þessa tegund af skipulagi í v5, geturðu bara notað Masonry viðbótina. Múrverk er ekki innifalið í Bootstrap , en við höfum gert sýnidæmi til að hjálpa þér að byrja.

CSS

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap, nota kort nú staðbundnar CSS breytur á .cardtil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

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

Sass breytur

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

Spil

Um

Dæmi

Titill korts

Efnistegundir

Líkami

Titlar, texti og tenglar

Titill korts

Texti korts

Myndir

Listaðu hópa

Eldhúsvaskur

Titill korts

Haus og fótur

Sérstök titlameðferð

Valið

Sérstök titlameðferð

Sérstök titlameðferð

Stærð

Nota rist merkingu

Sérstök titlameðferð

Sérstök titlameðferð

Að nota tól

Titill korts

Titill korts

Notar sérsniðna CSS

Sérstök titlameðferð

Textajöfnun

Sérstök titlameðferð

Sérstök titlameðferð

Sérstök titlameðferð

Leiðsögn

Sérstök titlameðferð

Sérstök titlameðferð

Myndir

Myndahúfur

Titill korts

Titill korts

Myndyfirlag

Titill korts

Lárétt

Titill korts

Kortastíll

Bakgrunnur og litur

Titill aðalkorts

Heiti aukaspjalds

Titill árangurskorts

Heiti hættukorts

Titill viðvörunarkorts

Titill upplýsingakorts

Titill ljósspjalds

Dökkur nafnspjald

Að miðla merkingu til hjálpartækja

Landamæri

Titill aðalkorts

Heiti aukaspjalds

Titill árangurskorts

Heiti hættukorts

Titill viðvörunarkorts

Titill upplýsingakorts

Titill ljósspjalds

Dökkur nafnspjald

Mixins veitur

Titill árangurskorts

Uppsetning korta

Kortahópar

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Ratkort

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts