Svetuka kune chikuru content Svetuka kuenda kudocs navigation
Check
in English

Makadhi

Makadhi eBootstrap anopa chinochinjika uye chinowedzera chemukati chigadziko chine akawanda akasiyana uye sarudzo.

Pa peji ino

About

Kadhi igaba rinochinjika uye rinowedzerwa. Inosanganisira sarudzo dzemusoro uye tsoka, zvakasiyana siyana zvemukati, mamiriro emukati mavara, uye ane simba ekuratidzira sarudzo. Kana iwe uchijairana neBootstrap 3, makadhi anotsiva edu ekare mapaneru, matsime, uye zvigunwe. Kuita kwakafanana kune izvo zvikamu zvinowanikwa semakirasi ekugadzirisa emakadhi.

Muenzaniso

Makadhi anovakwa ane madiki markup uye masitaera sezvinobvira, asi achiri kugona kuendesa toni yekutonga uye kugadzirisa. Yakavakwa neflexbox, ivo vanopa kurongeka kuri nyore uye kusanganisa zvakanaka nezvimwe zvinhu zveBootstrap. Ivo havana marginnekusarudzika, saka shandisa nzvimbo dzekushandisa sezvinodiwa.

Pazasi pane muenzaniso wekadhi yekutanga ine zvakasanganiswa zvemukati uye yakasarudzika hupamhi. Makadhi haana hupamhi hwakatarwa kuti atange, saka ivo vanongozadza hupamhi hwakazara hwemubereki chinhu. Izvi zvinogadziriswa zviri nyore nemaitiro edu akasiyana-siyana ekuyera saizi .

Placeholder Image cap
Kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Enda kune imwe nzvimbo
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>

Mhando dzemukati

Makadhi anotsigira zvakasiyana-siyana zvemukati, zvinosanganisira mifananidzo, zvinyorwa, rondedzero mapoka, zvinongedzo, nezvimwe. Pazasi pane mienzaniso yezvinotsigirwa.

Muviri

Nzvimbo yekuvaka yekadhi ndiyo .card-body. Ishandise pese paunenge uchida chikamu chakaputirwa mukati mekadhi.

Aya mamwe mavara mukati meboka remakadhi.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mazita, zvinyorwa, uye zvinongedzo

Mazita emakadhi anoshandiswa nekuwedzera .card-titlekune <h*>tag. Nenzira imwecheteyo, zvinongedzo zvinowedzerwa uye zvinoiswa padivi peumwe nekuwedzera .card-linkkune <a>tag.

Subtitles anoshandiswa nekuwedzera a .card-subtitlekune <h*>tag. Kana iyo .card-titleuye .card-subtitlezvinhu zvakaiswa .card-bodymuchimwe chinhu, zita rekadhi uye subtitle inowirirana zvakanaka.

Kadhi zita
Kadhi subtitle

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Kadhi link Imwe link
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>

Images

.card-img-topinoisa mufananidzo kumusoro kwekadhi. Ne .card-text, mavara anogona kuwedzerwa pakadhi. Mavara ari mukati .card-textanogona zvakare kunyorwa neakajairwa HTML tag.

Placeholder Image cap

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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>

Nyora mapoka

Gadzira zvinyorwa zvemukati mukadhi ine flush list group.

  • Chinhu
  • Chinhu chechipiri
  • Chinhu chechitatu
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
  • Chinhu
  • Chinhu chechipiri
  • Chinhu chechitatu
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>
  • Chinhu
  • Chinhu chechipiri
  • Chinhu chechitatu
Kadhi footer
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>

Kitchen sink

Sanganisa uye sanganisa akawanda emukati mhando kugadzira kadhi raunoda, kana kukanda zvese imomo. Pazasi panoratidzwa masitaera emifananidzo, mabhuroko, masitaera emavara, neboka rerondedzero — zvese zvakaputirwa mukadhi rakafara.

Placeholder Image cap
Kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

  • Chinhu
  • Chinhu chechipiri
  • Chinhu chechitatu
Kadhi link Imwe link
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>

Wedzera zvingasarudzwa musoro uye/kana tsoka mukati mekadhi.

Featured
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>

Misoro yemakadhi inogona kunyorwa nekuwedzera .card-headerkune <h*>zvinhu.

Featured
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>
Quote

Chirevo chinozivikanwa, chiri mu blockquote element.

Mumwe ane mukurumbira muna Source 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
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
2 mazuva apfuura
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>

Kukura

Makadhi haafungi nezvekutanga width, saka anozove akafara 100% kunze kwekunge zvataurwa neimwe nzira. Unogona kushandura izvi sezvinodiwa netsika CSS, makirasi egidhi, grid Sass musanganiswa, kana zvishandiso.

Kushandisa grid markup

Uchishandisa gidhi, putira makadhi mumakoramu nemitsara sezvinodiwa.

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>

Kushandisa zvishandiso

Shandisa edu mashoma ezvishandiso zvemasaji kuti akurumidze kuseta hupamhi hwekadhi.

Kadhi zita

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Bhatani
Kadhi zita

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

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

Kushandisa tsika CSS

Shandisa CSS yakajairwa mumashiti ako kana se inline masitaera kuseta hupamhi.

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>

Kurongeka kwemavara

Unogona kukurumidza kushandura kurongeka kwemavara echero kadhi-rikazara kana zvikamu zvakati- nemakirasi edu ekugadzirisa zvinyorwa .

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>

Wedzera kumwe kufamba kune musoro wekadhi (kana block) neBootstrap's nav components .

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
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>

Images

Makadhi anosanganisira mashoma sarudzo dzekushanda nemifananidzo. Sarudza kubva pakuwedzera "makepisi emifananidzo" kune chero kumagumo kwekadhi, kuvhara mifananidzo ine kadhi zvirimo, kana kungoisa mufananidzo wacho mukadhi.

Image caps

Zvakafanana nemusoro uye tsoka, makadhi anogona kusanganisira kumusoro uye pasi "mapikicha emifananidzo" - mifananidzo iri kumusoro kana pasi pekadhi.

Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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>

Mifananidzo yakavharwa

Shandura mufananidzo kuseri kwekadhi uye wovharira zvinyorwa zvekadhi rako. Zvichienderana nemufananidzo, unogona kana kusada mamwe masitaera kana zvishandiso.

Placeholder Card image
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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>
Ziva kuti zvirimo hazvifanirwe kunge zvakakura kupfuura kureba kwemufananidzo. Kana zvirimo zvakakura pane mufananidzo izvo zvirimo zvicharatidzwa kunze kwemufananidzo.

Horizontal

Uchishandisa musanganiswa wegidhi uye utility makirasi, makadhi anogona kuitwa akachinjika nenzira inoshamwaridzana uye inopindura. Mumuenzaniso uri pazasi, tinobvisa magita egidhi uye .g-0uye tinoshandisa .col-md-*makirasi kuita kadhi rakachinjika pane mdbreakpoint. Zvimwe zvigadziriso zvinogona kudiwa zvinoenderana nezviri mukati mekadhi rako.

Placeholder Image
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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>

Zvitaera zvekadhi

Makadhi anosanganisira akasiyana sarudzo dzekugadzirisa mabviro avo, miganhu, uye ruvara.

Background uye ruvara

Yakawedzerwa mu v5.2.0

Seta kumberi background-colorkwakasiyana colornevabatsiri vedu .text-bg-{color}. Pakutanga zvaidiwa kuti ubatanidze nemaoko sarudzo yako .text-{color}uye .bg-{color}zvishandiso zvesitayera, izvo zvauchiri kushandisa kana uchida.

Header
Musoro wekadhi rekutanga

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Sekondari kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Kubudirira kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Danger card title

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Yambiro kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Info kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Chiedza kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Musoro wekadhi rakasviba

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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>
Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .visually-hiddennekirasi.

Border

Shandisa bhodha utilities kuchinja chete border-colorkadhi. Ziva kuti unogona kuisa .text-{color}makirasi kumubereki .cardkana chikamu chidiki chezviri mukati mekadhi sezvakaratidzwa pasi apa.

Header
Musoro wekadhi rekutanga

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Sekondari kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Kubudirira kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Danger card title

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Yambiro kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Info kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Chiedza kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Musoro wekadhi rakasviba

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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 zvishandiso

Iwe unogona zvakare kushandura miganhu pane kadhi musoro uye tsoka sezvinodiwa, uye kunyange kubvisa yavo background-colorne .bg-transparent.

Header
Kubudirira kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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

Kadhi marongerwo

Pamusoro pekugadzira zviri mukati memakadhi, Bootstrap inosanganisira mashoma sarudzo yekuisa kunze nhevedzano yemakadhi. Parizvino, sarudzo dzemarongerwo idzi hadzisati dzapindura .

Mapoka emakadhi

Shandisa mapoka emakadhi kupa makadhi sechinhu chimwe chete, chakabatanidzwa chine hupamhi hwakaenzana uye kureba kwembiru. Mapoka emakadhi anotanga akaturikidzana uye anoshandiswa display: flex;kuti abatanidzwe nehukuru hwemayunifomu kutanga smpabreakpoint.

Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Placeholder Image cap
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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>

Paunenge uchishandisa mapoka emakadhi ane tsoka, izvo zvirimo zvinongoerekana zvamira.

Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Placeholder Image cap
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura
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>

Grid makadhi

Shandisa iyo Bootstrap gidhi system uye .row-colsmakirasi ayo kudzora kuti mangani magidhi makoramu (akapeterwa nemakadhi ako) aunoratidza pamutsara. Semuenzaniso, heino .row-cols-1kuisa makadhi pane imwe mbiru, uye .row-cols-md-2kupatsanura makadhi mana kusvika kuhupamhi hwakaenzana mumitsara yakawanda, kubva papakati breakpoint kumusoro.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

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>

Chinja kuti .row-cols-3uye iwe uchaona yechina kadhi kuputira.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

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>

Paunenge uchida urefu hwakaenzana, wedzera .h-100kumakadhi. Kana iwe uchida kukwirira kwakaenzana nekukasira, unogona $card-height: 100%kuseta muSass.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Placeholder Image cap
Kadhi zita

Iri ipfupi kadhi.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Placeholder Image cap
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

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>

Sezvakangoita nemapoka emakadhi, makadhi epasi anozongoerekana amira.

Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Placeholder Image cap
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Placeholder Image cap
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura
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

Mune v4isu takashandisa CSS-chete nzira yekutevedzera maitiro eMasonry -senge makoramu, asi nzira iyi yakauya nezvakawanda zvisingafadzi mhedzisiro . Kana iwe uchida kuve nerudzi urwu rwekurongeka mukati v5, unogona kungoshandisa Masonry plugin. Masonry haina kubatanidzwa muBootstrap , asi isu takaita demo muenzaniso kuti ikubatsire kutanga.

CSS

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, makadhi ikozvino anoshandisa emunharaunda CSS madhizaini .cardpakusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

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

Sass zvakasiyana

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