Makadhi

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

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 .

Kadhi zita

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

Enda kune imwe nzvimbo

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

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.

<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

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

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

Nyora mapoka

Gadzira zvinyorwa zvemukati mukadhi ine flush list group.

Cras justo odio
Dapibus ac facilisis in
Vestibulum uye 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>

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum uye 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>

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.

Kadhi zita

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum uye eros

Kadhi link Imwe link

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

Musoro uye tsoka

Wedzera zvingasarudzwa musoro uye/kana tsoka mukati mekadhi.

Featured

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo

<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

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source Title

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

Featured

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo

2 mazuva apfuura

<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

<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

<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

<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

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

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

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

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo

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

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.

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

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

Mifananidzo yakavharwa

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

Kadhi zita

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

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

<div class="card bg-dark text-white">
  <img class="card-img" src="..." 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>

Zvitaera zvekadhi

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

Background uye ruvara

Shandisa zvinyorwa uye zvemashure zvinoshandiswa kuti uchinje kutaridzika kwekadhi.

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.

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

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

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.

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

<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 anoshandisa display: flex;kuzadzisa saizi yavo yakafanana.

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 kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

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

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 kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Kadhi dhizaini

Unoda seti yehupamhi hwakaenzana uye makadhi akareba asina kubatanidzwa kune mumwe? Shandisa mapepa emakadhi.

Kadhi zita

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

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Kadhi zita

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

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Sezvakangoita nemapoka emakadhi, ma footer emakadhi mumadhishi anozongoerekana asimuka.

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 kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Makadhi columns

Makadhi anogona kurongeka kuita Masonry -senge makoramu ane CSS chete nekuaputira mu .card-columns. Makadhi anovakwa ane CSS columnzvivakwa panzvimbo yeflexbox kuitira kurongeka kuri nyore. Makadhi anoodha kubva kumusoro kusvika pasi uye kuruboshwe kuenda kurudyi.

Musoro! Mileage yako nemakoramu emakadhi inogona kusiyana. Kuti makadhi asatyoke pamakoramu, tinofanira kuamisa kuti display: inline-blockave sezvo column-break-inside: avoidasati apedza bulletproof.

Musoro wekadhi unopeta kumutsara mutsva

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source Title

Kadhi zita

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

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Mumwe ane mukurumbira muna Source Title

Kadhi zita

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

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source Title

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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 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" src="..." 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 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>

Makolamu emakadhi anogonawo kuwedzerwa uye kugadziridzwa neimwe kodhi yekuwedzera. Inoratidzwa pazasi ndeyekuwedzera .card-columnskwekirasi tichishandisa iyo yakafanana CSS yatinoshandisa-CSS makolamu- kugadzira seti yeanoteerera tiers yekushandura nhamba yemakoramu.

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

Makadhi

About

Muenzaniso

Kadhi zita

Mhando dzemukati

Muviri

Mazita, zvinyorwa, uye zvinongedzo

Kadhi zita

Kadhi subtitle

Images

Nyora mapoka

Kitchen sink

Kadhi zita

Musoro uye tsoka

Special title treatment

Featured

Special title treatment

Special title treatment

Kukura

Kushandisa grid markup

Special title treatment

Special title treatment

Kushandisa zvishandiso

Kadhi zita

Kadhi zita

Kushandisa tsika CSS

Special title treatment

Kurongeka kwemavara

Special title treatment

Special title treatment

Special title treatment

Navigation

Special title treatment

Special title treatment

Images

Image caps

Kadhi zita

Kadhi zita

Mifananidzo yakavharwa

Kadhi zita

Zvitaera zvekadhi

Background uye ruvara

Musoro wekadhi rekutanga

Sekondari kadhi zita

Kubudirira kadhi zita

Danger card title

Yambiro kadhi zita

Info kadhi zita

Chiedza kadhi zita

Musoro wekadhi rakasviba

Kuendesa zvinoreva kunobatsira matekinoroji

Border

Musoro wekadhi rekutanga

Sekondari kadhi zita

Kubudirira kadhi zita

Danger card title

Yambiro kadhi zita

Info kadhi zita

Chiedza kadhi zita

Musoro wekadhi rakasviba

Mixins zvishandiso

Kubudirira kadhi zita

Kadhi marongerwo

Mapoka emakadhi

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi dhizaini

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi zita

Kadhi zita

Makadhi columns

Musoro wekadhi unopeta kumutsara mutsva

Kadhi zita