Bootstrap 4- kaarten
Kaarten
Een kaart in Bootstrap 4 is een omrande doos met wat opvulling rond de inhoud. Het bevat opties voor kopteksten, voetteksten, inhoud, kleuren, enz.
Basiskaart
Er wordt een basiskaart gemaakt met de .cardklasse en de inhoud van de kaart heeft een .card-bodyklasse:
Voorbeeld
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Als u bekend bent met Bootstrap 3, vervangen kaarten oude panelen, putten en miniaturen.
Koptekst en voettekst
De .card-headerklas voegt een kop toe aan de kaart en de .card-footerklas voegt een voettekst toe aan de kaart:
Voorbeeld
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Contextuele kaarten
Om een achtergrondkleur aan de kaart toe te voegen, gebruikt u contextuele klassen ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darken .bg-light.
Voorbeeld
Titels, tekst en links
Gebruik .card-titleom kaarttitels toe te voegen aan elk kopelement. De .card-textklasse wordt gebruikt om ondermarges voor een <p> -element te verwijderen als dit het laatste kind (of de enige) binnen is .card-body. De .card-linkklasse voegt een blauwe kleur toe aan elke link en een zweefeffect.
Voorbeeld
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Kaartafbeeldingen
Voeg .card-img-topof .card-img-bottomtoe aan een
<img>om de afbeelding bovenaan of onderaan in de kaart te plaatsen. Merk op dat we de afbeelding buiten de afbeelding hebben toegevoegd .card-bodyom de volledige breedte te overspannen:
Voorbeeld
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
uitgerekte link
Voeg de .stretched-linkklasse toe aan een link in de kaart, en het zal de hele kaart klikbaar en zweefbaar maken (de kaart zal fungeren als een link):
Voorbeeld
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Overlays van kaartafbeeldingen
Verander een afbeelding in een kaartachtergrond en gebruik .card-img-overlay
om tekst bovenop de afbeelding toe te voegen:
Voorbeeld
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Kaartkolommen
Wat tekst in de eerste kaart
Wat tekst in de tweede kaart
Wat tekst in de derde kaart
Wat tekst in de vierde kaart
Wat tekst in de vijfde kaart
Wat tekst in de zesde kaart
De .card-columnsklas maakt een metselwerkachtig raster van kaarten (zoals pinterest). De lay-out wordt automatisch aangepast naarmate u meer kaarten plaatst.
Let op: De kaarten worden verticaal weergegeven op kleine schermen (minder dan 576px):
Voorbeeld
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Spel kaarten
Wat tekst in de eerste kaart
Nog wat tekst om de hoogte te vergroten
Nog wat tekst om de hoogte te vergroten
Nog wat tekst om de hoogte te vergroten
Wat tekst in de tweede kaart
Wat tekst in de derde kaart
Wat tekst in de vierde kaart
De .card-deckklas maakt een raster van kaarten die even hoog en breed zijn . De lay-out wordt automatisch aangepast naarmate u meer kaarten plaatst.
Let op: De kaarten worden verticaal weergegeven op kleine schermen (minder dan 576px):
Voorbeeld
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Kaart groep
Wat tekst in de eerste kaart
Nog wat tekst om de hoogte te vergroten
Nog wat tekst om de hoogte te vergroten
Nog wat tekst om de hoogte te vergroten
Wat tekst in de tweede kaart
Wat tekst in de derde kaart
Wat tekst in de vierde kaart
De .card-groupklasse is vergelijkbaar met .card-deck. Het enige verschil is dat de .card-groupklasse de linker- en rechtermarge tussen elke kaart verwijdert.
Let op: De kaarten worden verticaal weergegeven op kleine schermen (minder dan 576px), MET boven- en ondermarge:
Voorbeeld
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>