Amakhadi
Amakhadi e-Bootstrap ahlinzeka ngesiqukathi sokuqukethwe esiguqukayo nesinwebekayo esinokuhlukahluka okuningi nezinketho.
Mayelana
Ikhadi liyisitsha sokuqukethwe esiguqukayo nesinwebekayo. Ihlanganisa izinketho zezihloko nonyaweni, inhlobonhlobo yokuqukethwe, imibala yengemuva lengqikithi, nezinketho zokubonisa ezinamandla. Uma ujwayelene ne-Bootstrap 3, amakhadi athatha indawo yamaphaneli ethu amadala, imithombo, nezithonjana. Ukusebenza okufanayo kulezo zingxenye kuyatholakala njengamakilasi okulungisa amakhadi.
Isibonelo
Amakhadi akhiwe anomakha nezitayela ezincane ngangokunokwenzeka, kodwa asakwazi ukuletha ithoni yokulawula nokwenza ngendlela oyifisayo. Akhiwe nge-flexbox, anikeza ukuqondana okulula futhi axube kahle nezinye izingxenye ze-Bootstrap. Azikho margin
ngokuzenzakalelayo, ngakho-ke sebenzisa izinsiza zokuhlukanisa njengoba kudingeka.
Ngezansi kunesibonelo sekhadi eliyisisekelo elinokuqukethwe okuxubile nobubanzi obulungisiwe. Amakhadi akanabo ububanzi obunqunyiwe ukuqalisa, ngakho ngokwemvelo azogcwalisa ububanzi obugcwele bento engumzali. Lokhu kwenziwa ngokwezifiso kalula ngezinketho zethu zokulinganisa ezahlukahlukene .
Isihloko sekhadi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Hamba ndawana thize<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>
Izinhlobo zokuqukethwe
Amakhadi asekela inhlobonhlobo yokuqukethwe, okuhlanganisa izithombe, umbhalo, amaqembu ohlu, izixhumanisi, nokuningi. Ngezansi kunezibonelo zalokho okusekelwayo.
Umzimba
Isakhiwo sekhadi yi- .card-body
. Yisebenzise noma nini lapho udinga isigaba esinamaphedi ngaphakathi kwekhadi.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Izihloko, umbhalo, nezixhumanisi
Izihloko zamakhadi zisetshenziswa ngokwengeza .card-title
kumaka <h*>
. .card-link
Ngendlela efanayo, izixhumanisi ziyengezwa futhi zibekwe eduze komunye nomunye ngokungeza <a>
kumaki.
Imibhalo engezansi isetshenziswa ngokwengeza u- .card-subtitle
a <h*>
kumaka. Uma i- .card-title
kanye .card-subtitle
nezinto zibekwe .card-body
entweni, isihloko sekhadi nesihlokwana siqondaniswe kahle.
Isihloko sekhadi
Umbhalo ongezansi wekhadi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isixhumanisi sekhadi Esinye isixhumanisi<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>
Izithombe
.card-img-top
ubeka isithombe phezulu ekhadini. Nge- .card-text
, umbhalo ungangezwa ekhadini. Umbhalo ongaphakathi .card-text
ungaphinda ufakwe isitayela ngamathegi ajwayelekile e-HTML.
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
<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>
Amaqembu ohlwini
Dala uhlu lokuqukethwe ekhadini neqembu lohlu olushaywayo.
- Into
- Into yesibili
- Into yesithathu
<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>
- Into
- Into yesibili
- Into yesithathu
<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>
- Into
- Into yesibili
- Into yesithathu
<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>
Usinki wekhishi
Hlanganisa futhi ufanise izinhlobo eziningi zokuqukethwe ukuze udale ikhadi olidingayo, noma ujikijele yonke into lapho. Okuboniswe ngezansi izitayela zesithombe, amabhlogo, izitayela zombhalo, neqembu lohlu—konke kusongwe ngekhadi elinobubanzi obugxilile.
Isihloko sekhadi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
- Into
- Into yesibili
- Into yesithathu
<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>
Unhlokweni nonyaweni
Engeza unhlokweni ozikhethela kanye/noma unyaweni ngaphakathi kwekhadi.
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Izihloko zekhadi zingahlelwa ngokungeza .card-header
kuzakhi <h*>
.
Okufakiwe
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Isicaphuna esaziwayo, esiqukethwe kusici se-blockquote.
<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>
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Ukulinganisa
Amakhadi awacabangi width
ukuthi azoqala nini, ngakho azoba nobubanzi obungu-100% ngaphandle uma kushiwo ngenye indlela. Ungakwazi ukushintsha lokhu njengoba kudingeka nge-CSS yangokwezifiso, amakilasi egridi, imiksi yegridi ye-Sass, noma izinsiza.
Ukusebenzisa imakhaphu yegridi
Usebenzisa igridi, goqa amakhadi ngamakholomu nemigqa njengoba kudingeka.
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thizeUkwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Ukusebenzisa izinsiza
Sebenzisa izinsiza zethu ezimbalwa ezitholakalayo zokulinganisa ukuze usethe ngokushesha ububanzi bekhadi.
Isihloko sekhadi
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
InkinobhoIsihloko sekhadi
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Inkinobho<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>
Ukusebenzisa i-CSS yangokwezifiso
Sebenzisa i-CSS yangokwezifiso kumashidi akho esitayela noma njengezitayela ezingaphakathi komugqa ukuze usethe ububanzi.
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Ukuqondanisa umbhalo
Ungakwazi ukushintsha ngokushesha ukuqondana kombhalo kwanoma yiliphi ikhadi—lilonke noma izingxenye ezithile— ngamakilasi ethu okuqondanisa umbhalo .
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thizeUkwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thizeUkwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Ukuzulazula
Engeza ukuzulazula okuthile kunhlokweni yekhadi (noma vimba) ngezinto ze-Bootstrap's nav .
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Ukwelashwa kwesihloko okukhethekile
Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Hamba ndawana thize<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>
Izithombe
Amakhadi afaka izinketho ezimbalwa zokusebenza ngezithombe. Khetha ekwengezeni "amakepisi wesithombe" ekupheleni kwekhadi, ukumboza izithombe ngokuqukethwe kwekhadi, noma ukumane ushumeke isithombe ekhadini.
Amakepisi wesithombe
Ngokufanayo nhlokweni nonyaweni, amakhadi angafaka “amakepisi wesithombe” aphezulu naphansi—izithombe phezulu noma phansi ekhadini.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Igcine ukubuyekezwa emizuzwini engu-3 edlule
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Igcine ukubuyekezwa emizuzwini engu-3 edlule
<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>
Imbondela yesithombe
Guqula isithombe sibe ingemuva lekhadi bese umboza umbhalo wekhadi lakho. Kuye ngesithombe, ungase udinge noma ungadingi izitayela ezengeziwe noma izinsiza.
<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>
Evundlile
Ngokusebenzisa inhlanganisela yamakilasi egridi kanye nezinsiza, amakhadi angenziwa avundlile ngendlela esebenziseka kalula futhi esabelayo. Esibonelweni esingezansi, sisusa ama-gutters egridi .g-0
futhi sisebenzise .col-md-*
amakilasi ukwenza ikhadi livundlile endaweni md
yokuphumula. Ukulungiswa okwengeziwe kungase kudingeke kuye ngokuqukethwe kwekhadi lakho.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Igcine ukubuyekezwa emizuzwini engu-3 edlule
<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>
Izitayela zamakhadi
Amakhadi ahlanganisa izinketho ezihlukahlukene zokwenza isizinda sawo ngokwezifiso, imingcele, nombala.
Ingemuva nombala
Sebenzisa umbala wombhalo nezinsiza zasemuva ukuze uguqule ukubukeka kwekhadi.
Isihloko sekhadi eliyisisekelo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lesibili
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lempumelelo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi eliyingozi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lesixwayiso
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lolwazi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi elikhanyayo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi elimnyama
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
<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-dark 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-dark 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-dark 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>
Ukudlulisa incazelo kubuchwepheshe obusizayo
Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hidden
nekilasi.
Umngcele
Sebenzisa izinsiza zasemngceleni ukuze ushintshe border-color
ikhadi. Qaphela ukuthi ungabeka .text-{color}
amakilasi kumzali .card
noma isethi engaphansi yokuqukethwe kwekhadi njengoba kuboniswe ngezansi.
Isihloko sekhadi eliyisisekelo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lesibili
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lempumelelo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi eliyingozi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lesixwayiso
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi lolwazi
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi elikhanyayo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
Isihloko sekhadi elimnyama
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
<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>
Izinsiza ze-Mixins
Ungakwazi futhi ukushintsha imingcele kunhlokweni nonyaweni wekhadi njengoba kudingeka, futhi ususe ngisho nemingcele yawo background-color
nge- .bg-transparent
.
Isihloko sekhadi lempumelelo
Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.
<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>
Isakhiwo sekhadi
Ngokungeziwe ekwenzeni isitayela okuqukethwe ngaphakathi kwamakhadi, i-Bootstrap ifaka phakathi izinketho ezimbalwa zokubeka uchungechunge lwamakhadi. Okwamanje, lezi zinketho zesakhiwo azikaphenduli .
Amaqembu amakhadi
Sebenzisa amaqembu amakhadi ukuze unikeze amakhadi njengento eyodwa, enamathiselwe enobubanzi obulinganayo namakholomu obude. Amaqembu amakhadi aqala estakiwe futhi asebenzise display: flex;
ukunamathela ngobukhulu obufanayo obuqala endaweni sm
yokuphumula.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Igcine ukubuyekezwa emizuzwini engu-3 edlule
Isihloko sekhadi
Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.
Igcine ukubuyekezwa emizuzwini engu-3 edlule
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.
Igcine ukubuyekezwa emizuzwini engu-3 edlule
<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>
Uma usebenzisa amaqembu amakhadi anamanyaweni, okuqukethwe kwawo kuzolandelana ngokuzenzakalelayo.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.
<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>
Amakhadi egridi
Sebenzisa isistimu yegridi ye-Bootstrap kanye .row-cols
nezigaba zayo ukuze ulawule ukuthi mangaki amakholomu egridi (asongwe emakhadini akho) owabonisa umugqa ngamunye. Isibonelo, nakhu .row-cols-1
ukwendlala amakhadi kukholamu eyodwa, .row-cols-md-2
nokuhlukanisa amakhadi amane abe ububanzi obulinganayo emigqeni eminingi, ukusuka endaweni ephakathi nendawo ukuya phezulu.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
<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>
Lishintshe libe .row-cols-3
futhi uzobona ukugoqa kwekhadi lesine.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
<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>
Uma udinga ubude obulinganayo, engeza .h-100
emakhadini. Uma ufuna ukuphakama okulinganayo ngokuzenzakalela, ungasetha $card-height: 100%
kokuthi Sass.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli yikhadi elifushane.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.
Isihloko sekhadi
Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
<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>
Njengamaqembu ekhadi, onyaweni bekhadi bazomugqa ngokuzenzakalelayo.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.
Isihloko sekhadi
Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.
Isihloko sekhadi
Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.
<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>
I-Masonry
Ngaphakathi v4
sisebenzise indlela ye-CSS kuphela ukulingisa ukuziphatha kwamakholomu afana ne- Masonry , kodwa le nqubo ifike nemithelela eminingi engemihle . Uma ufuna ukuba nalolu hlobo lwesakhiwo ku- v5
, ungavele usebenzise i-plugin ye-Masonry. I-Masonry ayifakiwe ku-Bootstrap , kodwa senze isibonelo sedemo ukukusiza ukuthi uqalise.
Sass
Okuguquguqukayo
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$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;