Kaad ahorow
Bootstrap no kaad ahorow no ma nsɛm a ɛwɔ mu a ɛyɛ mmerɛw na ɛtrɛw a ɛwɔ nsakrae ahorow ne akwan horow pii.
Fa ho
Kaad yɛ nneɛma a wɔde gu mu a ɛyɛ mmerɛw na wotumi trɛw mu. Ɛwɔ nneɛma a wobɛpaw ama atiri ne ase hɔ nsɛm, nsɛm ahorow pii, akyi kɔla ahorow a ɛwɔ nsɛm a ɛfa ho, ne nneɛma a wubetumi apaw a ɛwɔ tumi a wɔde bɛkyerɛ. Sɛ wunim Bootstrap 3 yiye a, kaad besi yɛn panel dedaw, abura, ne mfonini nketewa ananmu. Dwumadi a ɛte sɛ saa afã horow no wɔ hɔ sɛ modifier classes ma cards.
Nhwɛsoɔ
Wɔde markup ne styles kakraa bi na ɛyɛ cards sɛnea ɛbɛyɛ yiye, nanso ɛda so ara tumi de control ne customization tɔn bi ma. Wɔde flexbox na esii, wɔma alignment a ɛnyɛ den na wɔde afra yiye ne Bootstrap afã afoforo. Wɔn nni marginbi default so, enti fa spacing utilities di dwuma sɛnea ɛho hia.
Ase hɔ no yɛ nhwɛso a ɛfa mfitiase kaad a emu nsɛm afrafra ne ne tɛtrɛtɛ a wɔahyɛ da ayɛ ho. Kaad nni ntrɛwmu a wɔahyɛ ato hɔ a wɔde befi ase, enti wɔde awosu bɛhyɛ n’awofo element no ntrɛwmu nyinaa ma. Eyi yɛ mmerɛw sɛ wobɛsakra no denam yɛn kɛseyɛ ahorow ahorow a yɛpaw so .
Kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kɔ baabi<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>Nsɛm a ɛwɔ mu no ahorow
Kaad boa nneɛma ahorow pii, a mfonini, nsɛm, list groups, links, ne nea ɛkeka ho ka ho. Nea wɔboa ho nhwɛso ahorow wɔ ase ha.
Nipadua
Ade a wɔde si kaad bi ne .card-body. Fa di dwuma bere biara a wuhia ɔfã bi a wɔde padded ahyɛ mu wɔ kaad bi mu.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Asɛmti, nsɛm, ne nkitahodi ahorow
Wɔde kaad asɛmti ahorow di dwuma denam nea wɔde ka tag .card-titlebi ho so. <h*>Saa ara nso na wɔde link ahorow ka ho na wɔde si wɔn ho wɔn ho nkyɛn denam tag .card-linkbi a wɔde ka ho no so.<a>
Wɔde subtitles di dwuma denam a a wɔde ka tag .card-subtitlebi ho no so. <h*>Sɛ wɔde nneɛma no .card-titlene .card-subtitlenneɛma no gu .card-bodyade bi mu a, kaad no asɛmti ne asɛmti ketewa no hyia fɛfɛɛfɛ.
Kaad no asɛmti
Kaad no asɛmti ketewaa bi
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Card link Link foforo nso<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>Mfonini ahorow
.card-img-topde mfonini bi si kaad no atifi. Sɛ wode .card-text, di dwuma a, wobetumi de nsɛm aka kaad no ho. Nsɛm a ɛwɔ mu .card-textno nso wobetumi de HTML tag ahorow a ɛwɔ hɔ no ayɛ no sɛnea ɛte.
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
<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>Kyerɛw akuw ahorow din
Yɛ nsɛm a wɔahyehyɛ wɔ kaad bi mu a flush list kuw wom.
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Vestibulum a ɛwɔ eros no
<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>- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Vestibulum a ɛwɔ eros no
<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>Adididan mu sink
Fa nneɛma ahorow pii frafra na fa yɛ kaad a wuhia no, anaa tow biribiara gu hɔ. Wɔakyerɛ mfonini ahorow, block ahorow, nsɛm ahorow, ne list kuw bi wɔ ase hɔ—wɔde ne nyinaa abɔ kaad a ne tɛtrɛtɛ pɔtee bi mu.
Kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
- Cras justo odio na ɔyɛ
- Dapibus ac adwumayɛbea a ɛwɔ
- Vestibulum a ɛwɔ eros no
<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">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>Ti ne ase hɔ asɛm
Fa atiri ne/anaasɛ ase a wopɛ ka ho wɔ kaad bi mu.
Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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>Wobetumi ayɛ card headers no style denam element ahorow a wɔde bɛka ho .card-headerno so .<h*>
Wɔde ahyɛ mu
Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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>Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
<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>Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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>Sizing a wɔde yɛ nneɛma
Cards fa no sɛ biribiara pɔtee biara nni hɔ widtha wobefi ase, enti wɔbɛyɛ 100% wide gye sɛ wɔakyerɛ sɛ ɛnte saa. Wubetumi asesa eyi sɛnea ɛho hia denam CSS a wɔahyɛ da ayɛ, grid adesua ahorow, grid Sass mixins, anaa utilities so.
Grid markup a wode bedi dwuma
Fa grid no di dwuma, kyekyere nkrataa no wɔ nkyerɛwde ne nkyerɛwde ahorow mu sɛnea ɛho hia.
<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>Nneɛma a wɔde di dwuma a wɔde di dwuma
Fa yɛn nsa kakraa bi a ɛwɔ sizing utilities no di dwuma fa hyehyɛ kaad bi trɛw ntɛmntɛm.
<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>CSS a wɔahyɛ da ayɛ a wode bedi dwuma
Fa CSS a wɔahyɛ da ayɛ di dwuma wɔ wo stylesheets mu anaa sɛ inline styles de hyehyɛ ntrɛwmu.
Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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>Nsɛm a wɔakyerɛw no pɛpɛɛpɛ
Wubetumi asesa nsɛm a ɛwɔ kaad biara mu no ntɛmntɛm—wɔ ne nyinaa anaa ne fã pɔtee bi mu—de yɛn nsɛm a wɔahyehyɛ no pɛpɛɛpɛ adesua ahorow no .
Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabiAsɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabiAsɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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>Nsɛm a Wɔka Kyerɛ
Fa akwantuo bi ka kaad no ti (anaasɛ block) ho a Bootstrap no nav components .
Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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="#" tabindex="-1" aria-disabled="true">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>Asɛmti titiriw a wɔde di dwuma
Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.
Kɔ baabi<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="#" tabindex="-1" aria-disabled="true">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>Mfonini ahorow
Kaad ahorow no wɔ nneɛma kakraa bi a wubetumi apaw a wode bɛyɛ mfonini ahorow ho adwuma. Paw fi “mfonini a wɔde akata so” a wode bɛka kaad bi awiei, mfonini ahorow a wode kaad no mu nsɛm bɛkata so, anaasɛ wode mfonini no ahyɛ kaad mu ara kwa mu.
Mfonini a wɔde akata so
Te sɛ atiri ne ase no, kaad betumi de “mfonini a wɔde akata so” a ɛwɔ soro ne ase no ahyɛ mu—mfonini ahorow a ɛwɔ kaad bi atifi anaa ase.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
<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-top" alt="...">
</div>Mfonini ahorow a wɔde kata so
Dane mfonini bi ma ɛnyɛ kaad akyi na fa wo kaad no mu nsɛm kata so. Ɛgyina mfonini no so no, ebia wubehia ntadehyɛ anaa nneɛma foforo a wɔde di dwuma anaasɛ wunhia.
<div class="card bg-dark text-white">
<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">Last updated 3 mins ago</p>
</div>
</div>Hyɛ no nsow sɛ ɛnsɛ sɛ emu nsɛm no yɛ kɛse sen mfonini no sorokɔ. Sɛ emu nsɛm no sõ sen mfonini no a wɔbɛda emu nsɛm no adi wɔ mfonini no akyi.
Kaad ahorow a wɔde yɛ nneɛma
Kaad ahorow no wɔ nneɛma ahorow a wubetumi apaw a wode bɛsesa wɔn akyi mfonini, wɔn ahye, ne wɔn kɔla.
Akyi ne kɔla
Fa nsɛm ne akyi nneɛma sesa sɛnea kaad bi te.
Mfitiase kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kaad a ɛto so abien no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Odi nkonim krataa asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Asiane krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kɔkɔbɔ krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Info kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Hann kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Dark card asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
<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>Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.
Hyeɛ so
Fa border utilities sesa kɛkɛ border-colorof a card. Hyɛ no nsow sɛ wubetumi de .text-{color}adesua ahorow ahyɛ ɔwofo no so .cardanaasɛ kaad no mu nsɛm no fã ketewaa bi sɛnea wɔakyerɛ wɔ ase ha no.
Mfitiase kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kaad a ɛto so abien no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Odi nkonim krataa asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Asiane krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Kɔkɔbɔ krataa no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Info kaad no asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Hann kaad asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
Dark card asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
<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 nneɛma a wɔde di dwuma
Wubetumi nso asesa borders a ɛwɔ card header ne footer no so sɛnea ɛho hia, na mpo ayi wɔn background-colorne .bg-transparent.
Odi nkonim krataa asɛmti
Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.
<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>Kaad nhyehyɛe
Wɔ nsɛm a ɛwɔ kaad mu a wobɛhyehyɛ no akyi no, Bootstrap no de nneɛma kakraa bi a wubetumi apaw a wode bɛhyehyɛ kaad ahorow a ɛtoatoa so no ka ho. Mprempren de, saa nhyehyɛe ahorow yi nnya nyɛɛ adwuma .
Kaad akuw ahorow
Fa kaad akuw ahorow kyerɛ kaad ahorow ase sɛ ade biako a wɔde abata ho a ɛwɔ adum a ne tɛtrɛtɛ ne ne sorokɔ yɛ pɛ. Kaad akuw de di dwuma display: flex;de nya wɔn kɛseyɛ a ɛyɛ pɛ.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
<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>Sɛ wode kaad akuw a ɛwɔ ase hɔ redi dwuma a, emu nsɛm no bɛhyehyɛ ne ho.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
<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>Kaad a wɔde ahyɛ mu
Wohia nkrataa a ne tɛtrɛtɛ ne ne sorokɔ yɛ pɛ a wɔmfa nkata ho? Fa kaad decks di dwuma.
Kaad no asɛmti
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
<div class="card-deck">
<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>
<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>Sɛnea ɛte wɔ kaad akuw ho no, kaad ase nsɛm a ɛwɔ decks mu no bɛhyehyɛ ne ho.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Kaad no asɛmti
Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.
<div class="card-deck">
<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>Kaad nkyerɛwde ahorow
Wobetumi ahyehyɛ nkrataa no ayɛ no nkyerɛwde a ɛte sɛ Masonry a CSS nkutoo na ɛwɔ mu denam .card-columns. Wɔde CSS columnagyapade na ɛkyekyere kaad sen sɛ wɔde flexbox bɛyɛ ma ɛyɛ mmerɛw sɛ wɔbɛhyehyɛ no. Wɔkra nkrataa fi soro kosi ase ne benkum kɔ nifa.
Ti a ɛwɔ soro! Ebia akwansin a wobɛfa a wode kaad adum ayɛ no bɛsono. Sɛnea ɛbɛyɛ a kaad ahorow no bebubu wɔ adum ahorow so no, ɛsɛ sɛ yɛde si hɔ display: inline-blocksɛnea column-break-inside: avoidɛnyɛ ano aduru a atuo ntumi nkɔ mu de besi nnɛ.
Kaad asɛmti a ɛkyekyere nsɛm foforo
Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.
Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
Kaad no asɛmti
Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat.
Kaad no asɛmti
Saa kratasin yi wɔ asɛmti a wɔde di dwuma daa ne nsɛm a wɔakyerɛw no nkyekyem tiawa wɔ n’ase.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
Kaad no asɛmti
Eyi yɛ kaad foforo a asɛmti ne nsɛm a ɛfoa so wɔ ase hɔ. Saa kaad yi wɔ nneɛma foforo bi a ɛbɛma ne nyinaa ayɛ tenten kakra.
Wɔyɛɛ no foforo koraa 3 mins a atwam ni
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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 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 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 text-white">
<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 src="..." class="card-img-top" alt="...">
</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>Wobetumi nso atrɛw kaad nkyerɛwde ahorow mu na wɔayɛ no sɛnea wopɛ denam koodu foforo bi so. Wɔakyerɛ wɔ aseɛ ha yi yɛ adesua no ntrɛmu a .card-columnswɔde CSS korɔ no ara a yɛde di dwuma—CSS nkorabata— de yɛ mmuaeɛ tiers a wɔde sesa nkorabata dodoɔ no.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}