Kaarte

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

Op hierdie bladsy

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 .

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>

Titels, teks en skakels

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.

'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

Kaartvoetskrif

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.

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

Kaartskakel Nog 'n skakel

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>

Kop- en voetskrif

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

2 dae gelede

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.

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

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.

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.

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.

Voetskrif

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.

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

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

Laas opgedateer 3 minute gelede

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.

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

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

Laas opgedateer 3 minute gelede

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

Kaart titel

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

Kaart titel

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

Kaart titel

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

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.

Kaart titel

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

Kaart titel

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

Kaart titel

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

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.

Kaart titel

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

Kaart titel

Dit is 'n kort kaart.

Kaart titel

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

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.

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

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

Laas opgedateer 3 minute gelede

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="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;

Kaarte

Oor

Voorbeeld

Kaart titel

Inhoud tipes

Liggaam

Titels, teks en skakels

Kaart titel

Kaart ondertitel

Beelde

Lys groepe

Kombuis wasbak

Kaart titel

Kop- en voetskrif

Spesiale titelbehandeling

Uitgestalte

Spesiale titelbehandeling

Spesiale titelbehandeling

Grootte

Gebruik roosteropmerking

Spesiale titelbehandeling

Spesiale titelbehandeling

Die gebruik van nutsprogramme

Kaart titel

Kaart titel

Gebruik pasgemaakte CSS

Spesiale titelbehandeling

Teksbelyning

Spesiale titelbehandeling

Spesiale titelbehandeling

Spesiale titelbehandeling

Navigasie

Spesiale titelbehandeling

Spesiale titelbehandeling

Beelde

Beeldkappies

Kaart titel

Kaart titel

Prentoorleggings

Kaart titel

Horisontaal

Kaart titel

Kaartstyle

Agtergrond en kleur

Primêre kaart titel

Sekondêre kaarttitel

Sukseskaarttitel

Gevaarkaarttitel

Waarskuwing kaart titel

Inligtingskaart titel

Ligte kaart titel

Donker kaart titel

Betekenis oordra aan ondersteunende tegnologieë

Grens

Primêre kaart titel

Sekondêre kaarttitel

Sukseskaarttitel

Gevaarkaarttitel

Waarskuwing kaart titel

Inligtingskaart titel

Ligte kaart titel

Donker kaart titel

Mixins nutsprogramme

Sukseskaarttitel

Kaart uitleg

Kaartgroepe

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Rooster kaarte

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel