Amakhadi

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

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 .

Isihloko sekhadi

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

Yiya kwenye indawo

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

<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

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

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum kunye eros

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

Ibonisiwe

Cras justo odio
Dapibus ac facilisis in
Vestibulum kunye eros

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

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.

Isihloko sekhadi

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum kunye eros

Ikhonkco lekhadi Enye ikhonkco

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Okubhalwe ngasentla kunye nasezantsi

Yongeza iheader ozikhethelayo kunye/okanye ifooter ngaphakathi kwekhadi.

Ibonisiwe

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo

<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

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

Umntu odumileyo kwiSihloko soMthombo

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

Ibonisiwe

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo

kwiintsuku ezi-2 ezidlulileyo

<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

<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

<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

<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

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

Yongeza ukukhangela kwiheda yekhadi (okanye ibhlokhi) enezixhobo ze-Bootstrap ze- nav .

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo

<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="#">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

<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="#">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.

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

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

Ukwaleka kwemifanekiso

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

Isihloko sekhadi

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

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

Izimbo zamakhadi

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

Imvelaphi kunye nombala

Sebenzisa okubhaliweyo kunye nezinto ezingasemva ukuze utshintshe inkangeleko yekhadi.

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.

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

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 .sr-onlyeklasini.

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.

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

<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 asebenzisa display: flex;ukuphumeza ubungakanani bawo obufanayo.

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 khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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 khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Isihloko sekhadi

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Iidekhi zekhadi

Ngaba ufuna isethi yobubanzi obulinganayo kunye namakhadi obude angadityaniswanga enye kwenye? Sebenzisa iidekhi zamakhadi.

Isihloko sekhadi

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

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Isihloko sekhadi

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Njengamaqela amakhadi, iifooter zamakhadi kwidesika ziya kufola ngokuzenzekelayo.

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 khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Isihloko sekhadi

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Iikholamu zekhadi

Amakhadi anokuthi alungelelaniswe kwiikholamu zeMasonry -ezifana neCSS nje ngokuzisonga .card-columns. Amakhadi akhiwe ngeempawu ze-CSS columnendaweni ye-flexbox ukwenzela ukulungelelaniswa okulula. Amakhadi a-odolwe ukusuka phezulu ukuya ezantsi kwaye ukusuka ekhohlo ukuya ekunene.

Iintloko phezulu! Imayile yakho eneentsika zekhadi isenokwahluka. Ukunqanda ukuba amakhadi aqhawuke kwiikholamu, kufuneka siwasethe display: inline-blocknjengengekasisisombululo column-break-inside: avoidsokukhusela iimbumbulu.

Isihloko sekhadi esonga kumgca omtsha

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

Umntu odumileyo kwiSihloko soMthombo

Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat.

Umntu odumileyo kwiSihloko soMthombo

Isihloko sekhadi

Eli khadi linesihloko esiqhelekileyo kunye nomhlathi omfutshane wesicatshulwa ngaphantsi kwayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

Umntu odumileyo kwiSihloko soMthombo

Isihloko sekhadi

Eli lelinye ikhadi elinesihloko kunye nesicatshulwa esixhasayo ngezantsi. Eli khadi linomxholo owongezelelweyo wokulenza libe lide kancinane xa lilonke.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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>

Iikholomu zekhadi nazo zingandiswa kwaye zenziwe ngokwezifiso kunye nekhowudi eyongezelelweyo. Okuboniswe ngezantsi kukwandiswa .card-columnskweklasi kusetyenziswa i-CSS efanayo esiyisebenzisayo-iikholamu ze-CSS-ukuvelisa iseti yamanqanaba aphendulayo okutshintsha inani leekholomu.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Amakhadi

Malunga

Umzekelo

Isihloko sekhadi

Iintlobo zomxholo

Umzimba

Izihloko, umbhalo, kunye namakhonkco

Isihloko sekhadi

Isihlokwana sekhadi

Imifanekiso

Dwelisa amaqela

Isinki yekhitshi

Isihloko sekhadi

Okubhalwe ngasentla kunye nasezantsi

Unyango lwesihloko esikhethekileyo

Ibonisiwe

Unyango lwesihloko esikhethekileyo

Unyango lwesihloko esikhethekileyo

Ubungakanani

Ukusebenzisa uphawu lwegridi

Unyango lwesihloko esikhethekileyo

Unyango lwesihloko esikhethekileyo

Ukusebenzisa izinto eziluncedo

Isihloko sekhadi

Isihloko sekhadi

Ukusebenzisa i-CSS eqhelekileyo

Unyango lwesihloko esikhethekileyo

Ulungelelwaniso lombhalo

Unyango lwesihloko esikhethekileyo

Unyango lwesihloko esikhethekileyo

Unyango lwesihloko esikhethekileyo

Ukukhangela

Unyango lwesihloko esikhethekileyo

Unyango lwesihloko esikhethekileyo

Imifanekiso

Iminqwazi yomfanekiso

Isihloko sekhadi

Isihloko sekhadi

Ukwaleka kwemifanekiso

Isihloko sekhadi

Izimbo zamakhadi

Imvelaphi kunye nombala

Isihloko sekhadi lokuqala

Isihloko sekhadi lesibini

Isihloko sekhadi lempumelelo

Isihloko sekhadi lengozi

Isihloko sekhadi lesilumkiso

Isihloko sekhadi lolwazi

Isihloko sekhadi elikhanyayo

Isihloko sekhadi elimnyama

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Umda

Isihloko sekhadi lokuqala

Isihloko sekhadi lesibini

Isihloko sekhadi lempumelelo

Isihloko sekhadi lengozi

Isihloko sekhadi lesilumkiso

Isihloko sekhadi lolwazi

Isihloko sekhadi elikhanyayo

Isihloko sekhadi elimnyama

Mixins eziluncedo

Isihloko sekhadi lempumelelo

Uyilo lwekhadi

Amaqela amakhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Iidekhi zekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Iikholamu zekhadi

Isihloko sekhadi esonga kumgca omtsha

Isihloko sekhadi