Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
in English

Likarete

Likarete tsa Bootstrap li fana ka setshelo sa litaba se feto-fetohang le se atolositsoeng se nang le mefuta e mengata le likhetho.

Leqepheng lena

About

Karete ke sets'oants'o se tenyetsehang le se ka atolosoang. E kenyelletsa likhetho bakeng sa lihlooho le botlaaseng, mefuta e mengata e fapaneng ea litaba, mebala ea bokamorao, le likhetho tse matla tsa ponts'o. Haeba u tloaelane le Bootstrap 3, likarete li nka sebaka sa liphanele tsa rona tsa khale, liliba le li-thumbnails. Ts'ebetso e ts'oanang le likarolo tseo e fumaneha joalo ka litlelase tsa ho fetola likarete.

Mohlala

Likarete li hahiloe ka li-markup le setaele tse nyane kamoo ho ka khonehang, empa li ntse li khona ho fana ka taolo e ngata le ho e etsa. E hahiloe ka flexbox, e fana ka tlhophiso e bonolo 'me e tsoakane hantle le likarolo tse ling tsa Bootstrap. Ha ba na marginka ho sa feleng, kahoo sebelisa lisebelisoa tsa sebaka ha ho hlokahala.

Ka tlase ke mohlala oa karete ea motheo e nang le dikahare tse tsoakiloeng le bophara bo tsitsitseng. Likarete ha li na bophara bo tsitsitseng ba ho qala, kahoo ka tlhaho li tla tlatsa bophara bo felletseng ba karolo ea motsoali. Sena se etsoa habonolo ka likhetho tsa rona tse fapaneng tsa boholo .

Placeholder Image cap
Sehlooho sa karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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

Mefuta ea litaba

Likarete li tšehetsa mefuta e mengata ea litaba, ho kenyeletsoa litšoantšo, mongolo, lihlopha tsa lenane, lihokelo, le tse ling. Ka tlase ke mehlala ea tse tšehelitsoeng.

'Mele

Sebaka sa mohaho oa karete ke .card-body. E sebelise neng kapa neng ha u hloka karolo e kentsoeng ka har'a karete.

Ena ke mongolo o mong ka har'a sehlopha sa karete.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Lihlooho, mongolo, le lihokelo

Litlotla tsa likarete li sebelisoa ka ho kenyelletsa .card-titletag <h*>. Ka mokhoa o ts'oanang, lihokelo li eketsoa le ho beoa haufi le tse ling ka ho kenyelletsa .card-linktag <a>.

Li-subtitles li sebelisoa ka ho kenyelletsa a .card-subtitleho <h*>tag. Haeba the .card-titlele .card-subtitlelintho li behiloe .card-bodynthong, sehlooho sa karete le subtitle li tsamaisana hantle.

Sehlooho sa karete
Subtitle ea karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Sehokelo sa karete Sehokelo se seng
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>

Litšoantšo

.card-img-tope beha setšoantšo hodimo ho karete. Ka .card-text, mongolo o ka eketsoa kareteng. Mongolo o ka hare .card-texto ka boela oa ngoloa ka li-tag tse tloaelehileng tsa HTML.

Placeholder Image cap

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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>

Etsa lethathamo la lihlopha

Theha manane a litaba ka kareteng ka sehlopha sa lenane la flush.

  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
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>
Featured
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
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>
  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
Botlaaseng ba karete
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>

Sink ea kichineng

Kopanya 'me u bapise mefuta e mengata ea litaba ho theha karete eo u e hlokang, kapa u lahlele ntho e ngoe le e ngoe moo. Ka tlase ho bonts'itsoe mekhoa ea litšoantšo, li-blocks, mokhoa oa mongolo, le sehlopha sa lenane-tsohle li phuthetsoe ka karete ea bophara bo tsitsitseng.

Placeholder Image cap
Sehlooho sa karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

  • Ntho
  • Ntho ea bobeli
  • Ntho ea boraro
Sehokelo sa karete Sehokelo se seng
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>

Kenya hlooho le/kapa botlaaseng ba hau ka har'a karete.

Featured
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Lihlooho tsa likarete li ka hlophisoa ka ho kenyelletsa .card-headerlikarolo <h*>.

Featured
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
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>
Qotsa

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

Motho ea tummeng ho Mohloli Title
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>
Featured
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Matsatsi a 2 a fetileng
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>

Boholo

Likarete ha li na taba e tobileng widthea ho qala, kahoo li tla ba bophara ba 100% ntle le ha ho boletsoe ka tsela e 'ngoe. U ka fetola sena kamoo ho hlokahalang ka CSS e tloaelehileng, lihlopha tsa marang-rang, li-mixins tsa grid Sass, kapa lisebelisoa.

Ho sebelisa grid markup

U sebelisa marang-rang, phuthela likarete ka likholomo le mela ha ho hlokahala.

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Ho sebelisa lisebelisoa

Sebelisa lisebelisoa tsa rona tse seng kae tse fumanehang ho etsa boholo ba karete kapele.

Sehlooho sa karete

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Konopo
Sehlooho sa karete

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Ho sebelisa CSS e tloaelehileng

Sebelisa CSS ea tloaelo ho li-stylesheets tsa hau kapa joalo ka litaele tse ka har'a mela ho beha bophara.

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Ho tsamaisana le mongolo

U ka fetola kapele tekano ea mongolo ea karete efe kapa efe—ka kakaretso kapa likarolo tse itseng—ka litlelase tsa rona tsa ho ikamahanya le mongolo .

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Eketsa ho tsamaea ho itseng hloohong ea karete (kapa thibela) e nang le likarolo tsa nav tsa Bootstrap .

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
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>
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Litšoantšo

Likarete li kenyelletsa likhetho tse 'maloa tsa ho sebetsa ka litšoantšo. Khetha ho kenya "li-caps" tsa setšoantšo qetellong ea karete, ho koahela litšoantšo ka dikahare tsa karete, kapa ho kenya setšoantšo ka har'a karete.

Likatiba tsa litšoantšo

Ho tšoana le lihlooho le botlaaseng, likarete li ka kenyelletsa holimo le tlaase "li-caps" tsa setšoantšo - litšoantšo tse ka holimo kapa ka tlaase ho karete.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

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>

Likoahelo tsa setšoantšo

Fetolela setšoantšo bokamorao ba karete 'me u koahele mongolo oa karete ea hau. Ho itšetlehile ka setšoantšo, u ka 'na ua hloka kapa u se ke ua hloka mekhoa e meng kapa lisebelisoa tse ling.

Placeholder Card image
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

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>
Hlokomela hore litaba ha lia lokela ho ba kholo ho feta bolelele ba setšoantšo. Haeba litaba li le kholo ho feta setšoantšo, litaba li tla hlahisoa ka ntle ho setšoantšo.

E tshekaletseng

U sebelisa motsoako oa lihlopha tsa marang-rang le tsa lisebelisoa, likarete li ka etsoa ka mokhoa o ts'oanang ka mokhoa o bonolo le o arabelang. Mohlaleng o ka tlase, re tlosa li-gutters tsa grid .g-0le ho sebelisa .col-md-*litlelase ho etsa hore karete e rapame sebakeng sa mdkhefu. Litokiso tse ling li ka hlokahala ho ipapisitse le litaba tsa karete ea hau.

Placeholder Image
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

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>

Mekhoa ea likarete

Likarete li na le likhetho tse fapaneng tsa ho khetha semelo sa bona, meeli le mebala.

Bokamorago le mmala

E kentsoe ho v5.2.0

Beha selelekela se nang background-colorle phapang colorle bathusi ba rona.text-bg-{color} . Pele ho ne ho hlokahala hore u kopanye khetho ea hau .text-{color}le .bg-{color}lisebelisoa tsa setaele, tseo u ntseng u ka li sebelisa haeba u rata.

Hlooho
Sehlooho sa karete ea mantlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea bobeli

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea katleho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea kotsi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea temoso

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea lintlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e khanyang

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e lefifi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hiddensehlopha.

Moeli

Sebelisa lisebelisoa tsa moeli ho fetola border-colorkarete feela. Hlokomela hore o ka beha .text-{color}litlelase ho motsoali .cardkapa karoloana ea litaba tsa karete joalo ka ha ho bonts'itsoe ka tlase.

Hlooho
Sehlooho sa karete ea mantlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea bobeli

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea katleho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea kotsi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea temoso

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea lintlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e khanyang

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e lefifi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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>

Lisebelisoa tsa motsoako

U ka boela ua fetola meeli ho hlooho ea karete le botlaaseng ha ho hlokahala, esita le ho tlosa bona background-colorka .bg-transparent.

Hlooho
Sehlooho sa karete ea katleho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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

Sebopeho sa karete

Ntle le ho hlophisa litaba ka har'a likarete, Bootstrap e kenyelletsa likhetho tse 'maloa tsa ho beha letoto la likarete. Hajoale, likhetho tsena tsa moralo ha li so arabele .

Lihlopha tsa likarete

Sebelisa lihlopha tsa likarete ho fana ka likarete e le ntho e le 'ngoe, e khomaretsoeng ka bophara bo lekanang le likholomo tsa bophahamo. Lihlopha tsa likarete li qala ka ho bokellana 'me li sebelisoa display: flex;ho hokahana le litekanyo tse tšoanang ho qala sebakeng sa smphomolo.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

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>

Ha u sebelisa lihlopha tsa likarete tse nang le botlaaseng, litaba tsa tsona li tla ikamahanya le maemo.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
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>

Likarete tsa grid

Sebelisa sistimi ea grid ea Bootstrap le .row-colslitlelase tsa eona ho laola hore na ke likholomo tse kae (tse phuthetsoeng likareteng tsa hau) tseo u li bonts'ang mola ka mong. Mohlala, mona ho .row-cols-1ala likarete kholomong e le 'ngoe, le ho .row-cols-md-2arola likarete tse 'ne ka bophara bo lekanang ho pholletsa le mela e mengata, ho tloha sebakeng se mahareng ho ea holimo.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

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>

E fetole .row-cols-3'me u tla bona karete ea bone e phuthetsoe.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

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>

Ha o hloka bophahamo bo lekanang, eketsa .h-100likareteng. Haeba u batla bophahamo bo lekanang ka ho sa feleng, u ka beha $card-height: 100%Sass.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e khuts'oane.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

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>

Joalo ka lihlopha tsa likarete, botlaaseng ba likarete bo tla ikamahanya le maemo.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
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>

Masonry

Ho v4rona re sebelisitse mokhoa oa CSS-feela ho etsisa boitšoaro ba litšiea tse kang Masonry , empa mokhoa ona o ile oa tla le litla-morao tse ngata tse sa thabiseng . Haeba u batla ho ba le sebopeho sa mofuta ona v5, u ka sebelisa plugin ea Masonry. Masonry ha e kenyelelitsoe ho Bootstrap , empa re entse mohlala oa demo ho o thusa ho qala.

CSS

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, likarete joale li sebelisa mefuta-futa ea CSS ea lehae .cardbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

  --#{$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};

Mefuta e fapaneng ea Sass

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