Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Amakhadi

Amakhadi e-Bootstrap abonelela ngesikhongozeli somxholo esiguquguqukayo kunye nesandisiweyo esinezinto ezininzi ezahlukeneyo kunye neenketho.

Kweli phepha

Malunga

Ikhadi sisikhongozeli somxholo esibhetyebhetye kwaye esandisiweyo . Ibandakanya iinketho zemibhalo engasentla kwekhasi kunye nemibhalo engezantsi, uluhlu olubanzi lomxholo, imibala yangasemva yomxholo, kunye nokhetho olunamandla lokubonisa. Ukuba uqhelene neBootstrap 3, amakhadi athatha indawo yeepaneli zethu ezindala, amaqula, kunye ne-thumbnails. Ukusebenza okufanayo naloo macandelo kuyafumaneka njengeeklasi zesilungisi samakhadi.

Umzekelo

Amakhadi akhiwe ngophawu oluncinci kunye nezitayile kangangoko kunokwenzeka, kodwa asakwazi ukuhambisa itoni yolawulo kunye nokwenza ngokwezifiso. Yakhelwe nge-flexbox, inikezela ngolungelelwaniso olulula kwaye ixube kakuhle namanye amacandelo e-Bootstrap. Abanayo marginngokungagqibekanga, ngoko ke sebenzisa izixhobo zokubeka izithuba njengoko kufuneka.

Ngezantsi umzekelo wekhadi elisisiseko elinomxholo oxubileyo kunye nobubanzi obusisigxina. Amakhadi akanalo ububanzi obumiselweyo ukuqala, ngoko baya kugcwalisa ububanzi obupheleleyo bento yomzali wayo. Oku kulungelelaniswa ngokulula ngeendlela zethu ezahlukeneyo zokulinganisa .

Placeholder Image cap
Isihloko sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Yiya kwenye indawo
html 
<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>

Iintlobo zomxholo

Amakhadi axhasa uluhlu olubanzi lomxholo, kubandakanywa imifanekiso, umbhalo, amaqela oluhlu, amakhonkco, kunye nokunye. Apha ngezantsi kukho imizekelo yezinto ezixhaswayo.

Umzimba

Ibhloko yokwakha yekhadi yi .card-body. Yisebenzise nanini na ufuna icandelo elikhuselweyo ngaphakathi kwekhadi.

Le yenye isicatshulwa ngaphakathi kumzimba wekhadi.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Izihloko, umbhalo, kunye namakhonkco

.card-titleIzihloko zekhadi zisetyenziswa ngokudibanisa <h*>kwithegi. Ngendlela efanayo, amakhonkco ongezwa kwaye abekwe ecaleni komnye nomnye ngokudibanisa .card-linkkwithegi <a>.

Imibhalo engezantsi isetyenziswa ngokongeza .card-subtitleu-a <h*>kwithegi. Ukuba i .card-titlekunye .card-subtitlenezinto zifakwe .card-bodykwinto, isihloko sekhadi kunye nesihlokwana zilungelelaniswe kakuhle.

Isihloko sekhadi
Isihlokwana sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Ikhonkco lekhadi Enye ikhonkco
html 
<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>

Imifanekiso

.card-img-topibeka umfanekiso phezulu ekhadini. Nge .card-text, okubhaliweyo kunokongezwa kwikhadi. Okubhaliweyo ngaphakathi .card-textkungenziwa kwakhona ngeendlela eziqhelekileyo zeethegi zeHTML.

Placeholder Image cap

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

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

Dwelisa amaqela

Yenza uluhlu lwesiqulatho kwikhadi kunye neqela loluhlu olugungxulwayo.

  • Into
  • Into yesibini
  • Into yesithathu
html 
<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>
Ibonisiwe
  • Into
  • Into yesibini
  • Into yesithathu
html 
<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 yesibini
  • Into yesithathu
Ikhasi elisezantsi lekhadi
html 
<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>

Isinki yekhitshi

Hlanganisa kwaye utshatise iintlobo ezininzi zomxholo ukwenza ikhadi olifunayo, okanye ulahle yonke into apho. Kuboniswe ngezantsi izimbo zemifanekiso, iibhloko, izimbo zokubhaliweyo, kunye neqela loluhlu-zonke zisongelwe kwikhadi elinobubanzi obusisigxina.

Placeholder Image cap
Isihloko sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

  • Into
  • Into yesibini
  • Into yesithathu
Ikhonkco lekhadi Enye ikhonkco
html 
<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>

Yongeza iheader ozikhethelayo kunye/okanye ifooter ngaphakathi kwekhadi.

Ibonisiwe
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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>

Iintloko zekhadi zinokubhalwa ngokongeza .card-headerkwizinto <h*>.

Ibonisiwe
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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>
Caphula

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

Umntu odumileyo kwiSihloko soMthombo
html 
<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>
Ibonisiwe
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
kwiintsuku ezi-2 ezidlulileyo
html 
<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>

Ubungakanani

Amakhadi athatheli ngqalelo widthukuba aqale, ngoko ke aya kuba 100% ububanzi ngaphandle kokuba kuchazwe ngenye indlela. Ungatshintsha oku njengoko kufuneka ngeCSS yesiko, iiklasi zegridi, imixube yegridi yeSass, okanye izinto eziluncedo.

Ukusebenzisa uphawu lwegridi

Usebenzisa igridi, songela amakhadi ngokweekholamu kunye nemiqolo njengoko kufuneka.

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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 izinto eziluncedo

Sebenzisa izixhobo zethu ezimbalwa ezifumanekayo zokulinganisa ukuseta ngokukhawuleza ububanzi bekhadi.

Isihloko sekhadi

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Iqhosha
Isihloko sekhadi

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Iqhosha
html 
<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 eqhelekileyo

Sebenzisa i-CSS yesiko kushiti lwakho lwesimbo okanye njengezimbo ezingaphakathi ukuseta ububanzi.

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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>

Ulungelelwaniso lombhalo

Ungatshintsha ngokukhawuleza ulungelelwaniso lombhalo lwalo naliphi na ikhadi—liphelele okanye lilonke okanye iindawo ezithile—kunye neeklasi zethu zokulungelelanisa okubhaliweyo .

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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>

Yongeza ukukhangela kwiheader yekhadi (okanye ibhlokhi) kunye ne-Bootstrap's nav components .

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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>
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
html 
<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>

Imifanekiso

Amakhadi abandakanya iinketho ezimbalwa zokusebenza ngemifanekiso. Khetha ekuhlomeleni "iminqwazi yomfanekiso" nakweyiphi na isiphelo sekhadi, ugqume imifanekiso enomxholo wekhadi, okanye ubethelele nje umfanekiso ekhadini.

Iminqwazi yomfanekiso

Ngokufana neeheader kunye neefooter, amakhadi anokubandakanya phezulu nangaphantsi "ii-image caps" -imifanekiso engaphezulu okanye ephantsi kwekhadi.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
html 
<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>

Ukwaleka kwemifanekiso

Guqula umfanekiso ube ngasemva kwekhadi kwaye waleke isicatshulwa sekhadi lakho. Ngokuxhomekeke kumfanekiso, unokufuna okanye ungadingi izitayile ezongezelelweyo okanye izinto eziluncedo.

Placeholder Card image
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Qaphela ukuba umxholo akufuneki ube mkhulu kunobude bomfanekiso. Ukuba umxholo mkhulu kunomfanekiso umxholo uya kuboniswa ngaphandle komfanekiso.

Ukuthe tye

Ukusebenzisa udibaniso lwegridi kunye neeklasi eziluncedo, amakhadi anokwenziwa axwesileyo ngendlela ehambelana neselula kunye nokuphendula. Kulo mzekelo ungezantsi, sisusa iigutter zegridi kunye .g-0nokusebenzisa .col-md-*iiklasi ukwenza ikhadi lithe tyaba kwindawo mdyokuphumla. Olunye uhlengahlengiso lunokufuneka ngokuxhomekeke kwisiqulatho sekhadi lakho.

Placeholder Image
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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

Izimbo zamakhadi

Amakhadi abandakanya iindlela ezahlukeneyo zokukhetha ukwenza imvelaphi yabo, imida kunye nombala.

Imvelaphi kunye nombala

Ifakwe kwi-v5.2.0

Cwangcisa imvelaphibackground-color echaseneyo colornabancedisi bethu.text-bg-{color} . Ngaphambili bekufuneka udibanise ukhetho lwakho ngesandla .text-{color}kunye .bg-{color}nezinto eziluncedo kwisitayile, onokuzisebenzisa ukuba uyakhetha.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lokuqala

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesibini

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lempumelelo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lengozi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesilumkiso

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lolwazi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elikhanyayo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elimnyama

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

html 
<div class="card text-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-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-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-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-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-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-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-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>
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Umda

Sebenzisa izinto eziluncedo kumda ukutshintsha nje border-colorikhadi. Qaphela ukuba ungabeka .text-{color}iiklasi kumzali .cardokanye iseti esezantsi yeziqulatho zekhadi njengoko kubonisiwe ngezantsi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lokuqala

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesibini

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lempumelelo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lengozi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesilumkiso

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lolwazi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elikhanyayo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elimnyama

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

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

Mixins eziluncedo

Unako kwakhona ukutshintsha imida kwiheader yekhadi kunye ne footer njengoko kufuneka, kwaye nokuba ukususa zabo background-colornge .bg-transparent.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lempumelelo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Umbhalo osemazantsi
html 
<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>

Uyilo lwekhadi

Ukongeza kwisitayile somxholo ngaphakathi kwamakhadi, iBootstrap ibandakanya iinketho ezimbalwa zokubeka uluhlu lwamakhadi. Okwangoku , olu khetho loyilo alukaphenduli .

Amaqela amakhadi

Sebenzisa amaqela amakhadi ukunika amakhadi njengento enye, encanyathiselweyo enobubanzi obulinganayo nobude bekholamu. Amaqela amakhadi aqala ukupakishwa kwaye asebenzise display: flex;ukuncamatheliswa kunye nemilinganiselo efanayo ukusuka kwindawo smyokuphumla.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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

Xa usebenzisa amaqela amakhadi anamazantsi, umxholo wabo uya kufola ngokuzenzekelayo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
html 
<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 inkqubo yegridi yeBootstrap kunye .row-colsneeklasi zayo ukulawula ukuba zingaphi iikholamu zegridi (ezisongelwe kumakhadi akho) oyibonisayo kumqolo ngamnye. Umzekelo, nanku .row-cols-1ukubeka amakhadi kwikholamu enye, kwaye .row-cols-md-2ukwahlula amakhadi amane ukuya kububanzi obulinganayo kwimiqolo emininzi, ukusuka kwindawo ephakathi ukuya phezulu.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

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

Yitshintshe .row-cols-3kwaye uza kubona ikhadi lesine lokusonga.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

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

Xa ufuna ubude obulinganayo, yongeza .h-100kumakhadi. Ukuba ufuna ubude obulinganayo ngokungagqibekanga, ungacwangcisa $card-height: 100%kwiSass.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elifutshane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

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

Njengamaqela amakhadi, iifooter zamakhadi ziya kufola ngokuzenzekelayo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
html 
<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>

IMasonry

Sisebenzise v4ubuchule be-CSS kuphela ukulinganisa indlela yokuziphatha kweMasonry - like columns, kodwa obu buchule beza neziphumo ebezingalindelekanga ezininzi . Ukuba ufuna ukuba nolu hlobo loyilo kwi v5, ungenza nje ukusebenzisa iplagi yeMasonry. I-Masonry ayiqukwanga kwi-Bootstrap , kodwa senze umzekelo wedemo ukukunceda uqalise.

CSS

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, amakhadi ngoku asebenzisa izinto eziguquguqukayo ze-CSS zasekhaya .cardukuze kuphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Iinguqu zeSass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;