Bootstrap 4 kaarte
Kaarte
'n Kaart in Bootstrap 4 is 'n boks met 'n rand met 'n bietjie opvulling rondom die inhoud. Dit bevat opsies vir koptekste, voettekste, inhoud, kleure, ens.
John Doe
Sommige voorbeeld teks sommige voorbeeld teks. John Doe is 'n argitek en ingenieur
Sien ProfielBasiese kaart
'n Basiese kaart word saam met die .cardklas geskep, en inhoud binne die kaart het 'n .card-bodyklas:
Voorbeeld
<div class="card">
<div class="card-body">Basic
card</div>
</div>
As jy vertroud is met Bootstrap 3, vervang kaarte ou panele, putte en duimnaels.
Kop- en voetskrif
Die .card-headerklas voeg 'n opskrif by die kaart en die .card-footerklas voeg 'n voetskrif by die kaart:
Voorbeeld
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Kontekstuele kaarte
Om 'n agtergrondkleur die kaart by te voeg, gebruik kontekstuele klasse ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darken .bg-light.
Voorbeeld
Titels, teks en skakels
Gebruik .card-titleom kaarttitels by enige opskrifelement te voeg. Die .card-textklas word gebruik om onderste kantlyne vir 'n <p>-element te verwyder as dit die laaste kind (of die enigste een) binne .card-body. Die .card-linkklas voeg 'n blou kleur by enige skakel, en 'n sweef-effek.
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>
Kaart beelde
John Doe
Sommige voorbeeld teks sommige voorbeeld teks. John Doe is 'n argitek en ingenieur
Sien Profiel
Voeg .card-img-topof .card-img-bottomby 'n
<img>om die prent bo of onder binne die kaart te plaas. Let daarop dat ons die prent buite die bygevoeg het .card-bodyom oor die hele breedte te strek:
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>
Gestrekte skakel
Voeg die .stretched-linkklas by 'n skakel binne die kaart, en dit sal die hele kaart klikbaar en beweegbaar maak (die kaart sal as 'n skakel dien):
John Doe
Sommige voorbeeld teks sommige voorbeeld teks. John Doe is 'n argitek en ingenieur
Sien ProfielVoorbeeld
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Kaartbeeld-oorlegsels
Verander 'n prent in 'n kaartagtergrond en gebruik .card-img-overlay
om teks bo-op die prent by te voeg:
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>
Kaartkolomme
Sommige teks binne die eerste kaart
Sommige teks binne die tweede kaart
Sommige teks binne die derde kaart
Sommige teks binne die vierde kaart
Sommige teks binne die vyfde kaart
Sommige teks binne die sesde kaart
Die .card-columnsklas skep 'n messelwerk-agtige rooster van kaarte (soos pinterest). Die uitleg sal outomaties aanpas soos jy meer kaarte insit.
Let wel: Die kaarte word vertikaal op klein skerms vertoon (minder as 576 px):
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>
Kaart Dek
Sommige teks binne die eerste kaart
Nog teks om die hoogte te verhoog
Nog teks om die hoogte te verhoog
Nog teks om die hoogte te verhoog
Sommige teks binne die tweede kaart
Sommige teks binne die derde kaart
Sommige teks binne die vierde kaart
Die .card-deckklas skep 'n rooster van kaarte wat van gelyke hoogte en breedte is . Die uitleg sal outomaties aanpas soos jy meer kaarte insit.
Let wel: Die kaarte word vertikaal op klein skerms vertoon (minder as 576 px):
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>
Kaartgroep
Sommige teks binne die eerste kaart
Nog teks om die hoogte te verhoog
Nog teks om die hoogte te verhoog
Nog teks om die hoogte te verhoog
Sommige teks binne die tweede kaart
Sommige teks binne die derde kaart
Sommige teks binne die vierde kaart
Die .card-groupklas is soortgelyk aan .card-deck. Die enigste verskil is dat die .card-groupklas linker- en regterkantlyne tussen elke kaart verwyder.
Let wel: Die kaarte word vertikaal op klein skerms vertoon (minder as 576 px), MET boonste en onderste kantlyn:
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>