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 .

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

<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

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum by eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Uitgestalte

Cras justo odio
Dapibus ac facilisis in
Vestibulum by eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum by eros

Kaartskakel Nog 'n skakel

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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

<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

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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

<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

<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

<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

<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

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

<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" 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" href="#">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

<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" href="#">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

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

Prentoorleggings

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Kaartstyle

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

Agtergrond en kleur

Gebruik teks- en agtergrondhulpmiddels om die voorkoms van 'n kaart te verander.

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.

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

Dra betekenis aan ondersteunende tegnologieë oor

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 .sr-onlyklas 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.

<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 text-warning">
    <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 text-info">
    <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

<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 gebruik display: flex;om hul eenvormige grootte te bereik.

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Kaart dekke

Het jy 'n stel gelyke breedte- en hoogtekaarte nodig wat nie aan mekaar geheg is nie? Gebruik kaartdekke.

Kaart titel

Dit is 'n langer kaart met ondersteunende teks hieronder as 'n natuurlike inleiding 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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Net soos met kaartgroepe, sal kaartvoetskrifte in dekke 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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Kaartkolomme

Kaarte kan georganiseer word in messelwerk -agtige kolomme met net CSS deur dit in te draai .card-columns. Kaarte is gebou met CSS column-eienskappe in plaas van flexbox vir makliker belyning. Kaarte word van bo na onder en van links na regs gerangskik.

Let op! Jou kilometers met kaartkolomme kan verskil. Om te verhoed dat kaarte oor kolomme breek, moet ons dit stel display: inline-blockas column-break-inside: avoiddit nog nie 'n koeëlvaste oplossing is nie.

Kaarttitel wat na 'n nuwe reël toevou

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

Kaart titel

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

Laas opgedateer 3 minute gelede

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere tydperk.

Iemand bekend in Brontitel

Kaart titel

Hierdie kaart het 'n gereelde titel en kort teksparagraaf daaronder.

Laas opgedateer 3 minute gelede

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

Kaart titel

Dit is nog 'n kaart met titel en ondersteunende teks hieronder. Hierdie kaart het bykomende inhoud om dit in die algemeen effens groter te maak.

Laas opgedateer 3 minute gelede

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kaartkolomme kan ook uitgebrei en aangepas word met 'n paar bykomende kode. Hieronder is 'n uitbreiding van die .card-columnsklas wat dieselfde CSS gebruik wat ons gebruik - CSS kolomme - om 'n stel responsiewe vlakke te genereer om die aantal kolomme te verander.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 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

Kaartstyle

Agtergrond en kleur

Primêre kaart titel

Sekondêre kaarttitel

Sukseskaarttitel

Gevaarkaarttitel

Waarskuwing kaart titel

Inligtingskaart titel

Ligte kaart titel

Donker kaart titel

Dra betekenis aan ondersteunende tegnologieë oor

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

Kaart dekke

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaartkolomme

Kaarttitel wat na 'n nuwe reël toevou

Kaart titel