Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Kaarte

Bootstrap se kaarte bied 'n buigsame en uitbreidbare inhoudhouer met veelvuldige variante en opsies.

Oor

'n Kaart is 'n buigsame en uitbreidbare inhoudhouer. Dit bevat opsies vir kop- en voettekste, 'n wye verskeidenheid inhoud, kontekstuele agtergrondkleure en kragtige vertoonopsies. As jy vertroud is met Bootstrap 3, vervang kaarte ons ou panele, putte en duimnaels. Soortgelyke funksionaliteit as daardie komponente is beskikbaar as wysigerklasse vir kaarte.

Voorbeeld

Kaarte word gebou met so min opmaak en style as moontlik, maar slaag steeds daarin om 'n ton beheer en aanpassing te lewer. Gebou met flexbox, bied hulle maklike belyning en meng goed met ander Bootstrap-komponente. Hulle het geen marginby verstek, so gebruik spasiëring nutsprogramme soos nodig.

Hieronder is 'n voorbeeld van 'n basiese kaart met gemengde inhoud en 'n vaste breedte. Kaarte het geen vaste breedte om te begin nie, so hulle sal natuurlik die volle breedte van sy ouerelement vul. Dit is maklik aangepas met ons verskillende grootte opsies .

Placeholder Image cap
Kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Gaan êrens
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>

Inhoud tipes

Kaarte ondersteun 'n wye verskeidenheid inhoud, insluitend beelde, teks, lysgroepe, skakels en meer. Hieronder is voorbeelde van wat ondersteun word.

Liggaam

Die bousteen van 'n kaart is die .card-body. Gebruik dit wanneer jy 'n opgestopte gedeelte binne 'n kaart nodig het.

Dit is 'n paar teks binne 'n kaart liggaam.
html
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Kaarttitels word gebruik deur by .card-title'n <h*>merker te voeg. Op dieselfde manier word skakels bygevoeg en langs mekaar geplaas deur by .card-link'n <a>merker te voeg.

Onderskrifte word gebruik deur 'n .card-subtitleby 'n <h*>merker te voeg. As die .card-titleen die .card-subtitleitems in 'n .card-bodyitem geplaas word, is die kaarttitel en subtitel mooi in lyn.

Kaart titel
Kaart ondertitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Kaartskakel Nog 'n skakel
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>

Beelde

.card-img-topplaas 'n prent bo-op die kaart. Met .card-textkan teks by die kaart gevoeg word. Teks binne .card-textkan ook met die standaard HTML-etikette gestileer word.

Placeholder Image cap

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

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>

Lys groepe

Skep lyste van inhoud in 'n kaart met 'n spoellysgroep.

  • N item
  • 'n Tweede item
  • 'n Derde item
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>
Uitgestalte
  • N item
  • 'n Tweede item
  • 'n Derde item
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>
  • N item
  • 'n Tweede item
  • 'n Derde item
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>

Kombuis wasbak

Meng en pas verskeie inhoudtipes om die kaart te skep wat jy nodig het, of gooi alles daar in. Hieronder is prentstyle, blokke, teksstyle en 'n lysgroep - alles toegedraai in 'n kaart met vaste breedte.

Placeholder Image cap
Kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

  • N item
  • 'n Tweede item
  • 'n Derde item
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>

Voeg 'n opsionele kop- en/of voetskrif by 'n kaart.

Uitgestalte
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>

Kaartopskrifte kan gestileer word deur .card-headerby <h*>elemente by te voeg.

Uitgestalte
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>
Kwotasie

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

Iemand bekend in Brontitel
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>
Uitgestalte
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>

Grootte

Kaarte neem nie spesifiek widthaan om te begin nie, so hulle sal 100% wyd wees, tensy anders vermeld. Jy kan dit verander soos nodig met pasgemaakte CSS, roosterklasse, rooster Sass-mengings of nutsprogramme.

Gebruik roosteropmerking

Gebruik die rooster en draai kaarte in kolomme en rye soos nodig.

Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>

Die gebruik van nutsprogramme

Gebruik ons ​​handvol beskikbare groottehulpmiddels om vinnig 'n kaart se breedte te stel.

Kaart titel

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Knoppie
Kaart titel

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

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

Gebruik pasgemaakte CSS

Gebruik pasgemaakte CSS in jou stylblaaie of as inlynstyle om 'n breedte te stel.

Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>

Teksbelyning

Jy kan vinnig die teksbelyning van enige kaart verander—in sy geheel of spesifieke dele—met ons teksbelyningsklasse .

Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>

Voeg 'n bietjie navigasie by 'n kaart se kopskrif (of blok) met Bootstrap se navigasie- komponente .

Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>
Spesiale titelbehandeling

Met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud.

Gaan êrens
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>

Beelde

Kaarte bevat 'n paar opsies om met beelde te werk. Kies uit die byvoeging van "prentkappies" aan weerskante van 'n kaart, om prente met kaartinhoud te oorlê, of om bloot die prent in 'n kaart in te sluit.

Beeldkappies

Soortgelyk aan kop- en voettekste, kan kaarte bo- en onderste "prentkappies" insluit—prente aan die bo- of onderkant van 'n kaart.

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Laas opgedateer 3 minute gelede

Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Laas opgedateer 3 minute gelede

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

Prentoorleggings

Verander 'n prent in 'n kaartagtergrond en bedek jou kaart se teks. Afhangende van die beeld, het jy dalk bykomende style of nutsprogramme nodig.

Placeholder Card image
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Laas opgedateer 3 minute gelede

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>
Let daarop dat inhoud nie groter as die hoogte van die prent moet wees nie. As inhoud groter as die prent is, sal die inhoud buite die prent vertoon word.

Horisontaal

Deur 'n kombinasie van rooster- en nutsklasse te gebruik, kan kaarte horisontaal gemaak word op 'n selfoonvriendelike en responsiewe manier. In die voorbeeld hieronder verwyder ons die roostergeute met .g-0en gebruik .col-md-*klasse om die kaart horisontaal by die mdbreekpunt te maak. Afhangende van jou kaartinhoud kan verdere aanpassings nodig wees.

Placeholder Image
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Laas opgedateer 3 minute gelede

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>

Kaartstyle

Kaarte bevat verskeie opsies om hul agtergronde, grense en kleur aan te pas.

Agtergrond en kleur

Bygevoeg in v5.2.0

Stel 'n background-colormet kontrasterende voorgrond colorsaam met ons .text-bg-{color}helpers . .text-{color}Voorheen was dit nodig om jou keuse van en hulpmiddels vir stilering handmatig te koppel .bg-{color}, wat jy steeds kan gebruik as jy verkies.

Opskrif
Primêre kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Sekondêre kaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Sukseskaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Gevaarkaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Waarskuwing kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Inligtingskaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Ligte kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Donker kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

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>
Betekenis oordra aan ondersteunende tegnologieë

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Grens

Gebruik grenshulpprogramme om net die border-colorvan 'n kaart te verander. Let daarop dat jy .text-{color}klasse op die ouer .cardof 'n subset van die kaart se inhoud kan plaas soos hieronder getoon.

Opskrif
Primêre kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Sekondêre kaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Sukseskaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Gevaarkaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Waarskuwing kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Inligtingskaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Ligte kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Opskrif
Donker kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

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 nutsprogramme

Jy kan ook die grense op die kaartkop- en voetskrif verander soos nodig, en selfs hulle verwyder background-colormet .bg-transparent.

Opskrif
Sukseskaarttitel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

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>

Kaart uitleg

Benewens die stilering van die inhoud binne kaarte, bevat Bootstrap 'n paar opsies om reekse kaarte uit te lê. Vir eers reageer hierdie uitlegopsies nog nie .

Kaartgroepe

Gebruik kaartgroepe om kaarte as 'n enkele, aangehegte element met gelyke breedte en hoogte kolomme weer te gee. Kaartgroepe begin gestapel en gebruik display: flex;om geheg te raak met eenvormige afmetings wat by die smbreekpunt begin.

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Laas opgedateer 3 minute gelede

Placeholder Image cap
Kaart titel

Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.

Laas opgedateer 3 minute gelede

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.

Laas opgedateer 3 minute gelede

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>

Wanneer kaartgroepe met voetskrif gebruik word, sal hul inhoud outomaties in lyn wees.

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.

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>

Rooster kaarte

Gebruik die Bootstrap-roosterstelsel en sy .row-colsklasse om te beheer hoeveel roosterkolomme (om jou kaarte toegedraai) jy per ry wys. Hier is byvoorbeeld .row-cols-1om die kaarte op een kolom uit te lê en .row-cols-md-2vier kaarte te verdeel tot gelyke breedte oor verskeie rye, vanaf die medium breekpunt na bo.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

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>

Verander dit na .row-cols-3en jy sal die vierde kaart omvou sien.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

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>

Wanneer jy gelyke hoogte nodig het, voeg .h-100by die kaarte. As jy by verstek gelyke hoogtes wil hê, kan jy $card-height: 100%in Sass instel.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Dit is 'n kort kaart.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.

Placeholder Image cap
Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

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>

Net soos met kaartgroepe, sal kaartvoetskrifte outomaties in lyn wees.

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie inhoud is 'n bietjie langer.

Placeholder Image cap
Kaart titel

Hierdie kaart het ondersteunende teks hieronder as 'n natuurlike inleiding tot bykomende inhoud.

Placeholder Image cap
Kaart titel

Dit is 'n wyer kaart met ondersteunende teks hieronder as 'n natuurlike aanloop tot bykomende inhoud. Hierdie kaart het selfs langer inhoud as die eerste om daardie gelyke hoogte-aksie te wys.

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>

Messelwerk

In ons het slegs 'n CSS-tegniek gebruik om die gedrag van messelwerkagtige kolomme v4na te boots , maar hierdie tegniek het baie onaangename newe-effekte gehad . As jy hierdie tipe uitleg in wil hê , kan jy net gebruik maak van Masonry-inprop. Messelwerk is nie by Bootstrap ingesluit nie , maar ons het 'n demo-voorbeeld gemaak om jou te help om aan die gang te kom.v5

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik kaarte nou plaaslike CSS-veranderlikes .cardvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

  --#{$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 veranderlikes

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