Makhadi

Makhadi a Bootstrap amapereka chidebe chosinthika komanso chokulirapo chokhala ndi mitundu ingapo ndi zosankha.

Za

Khadi ndi chotengera chosinthika komanso chowonjezera. Zimaphatikizapo zosankha zapamutu ndi m'munsi, zinthu zosiyanasiyana, mitundu yakumbuyo, ndi zosankha zamphamvu zowonetsera. Ngati mumadziwa Bootstrap 3, makhadi amalowetsa mapanelo athu akale, zitsime, ndi tizithunzi. Zofanana ndi zigawozi zimapezeka ngati makalasi osinthira makadi.

Chitsanzo

Makhadi amapangidwa ndi mawonekedwe ochepa komanso masitayelo momwe angathere, komabe amatha kuwongolera ndikusintha mwamakonda. Omangidwa ndi flexbox, amapereka kuwongolera kosavuta ndikusakanikirana bwino ndi zida zina za Bootstrap. Alibe marginmwachisawawa, choncho gwiritsani ntchito malo ochezera ngati pakufunika.

Pansipa pali chitsanzo cha khadi yoyambira yokhala ndi zinthu zosakanikirana komanso m'lifupi mwake. Makhadi alibe m'lifupi mwake kuti ayambike, kotero amadzaza m'lifupi mwake monse mwamakolo ake. Izi zimasinthidwa mosavuta ndi zosankha zathu zosiyanasiyana .

Mutu wakhadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Pitani kwinakwake

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Mitundu yazinthu

Makhadi amathandiza zinthu zosiyanasiyana, kuphatikizapo zithunzi, malemba, magulu a mndandanda, maulalo, ndi zina. M'munsimu muli zitsanzo za zomwe zimathandizidwa.

Thupi

Chomangira cha khadi ndi .card-body. Igwiritseni ntchito nthawi iliyonse mukafuna gawo lopindika mkati mwa khadi.

Awa ndi mawu ena mkati mwa khadi.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mitu, mawu, ndi maulalo

Mitu yamakhadi imagwiritsidwa ntchito powonjezera .card-titlepa <h*>tag. Momwemonso, maulalo amawonjezeredwa ndikuyikidwa pafupi ndi mnzake powonjezera .card-linkku <a>tag.

.card-subtitleMa subtitles amagwiritsidwa ntchito powonjezera <h*>tag. Ngati .card-titlendi .card-subtitlezinthuzo zayikidwa mu .card-bodychinthu, mutu wa khadi ndi mawu ang'onoang'ono zimagwirizana bwino.

Mutu wakhadi

Mawu omasulira a khadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Khadi ulalo Ulalo wina

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

Zithunzi

.card-img-topamaika chithunzi pamwamba pa khadi. Ndi .card-text, malemba akhoza kuwonjezeredwa ku khadi. Zolemba mkati .card-textzimathanso kulembedwa ndi ma tag amtundu wa HTML.

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Lembani magulu

Pangani ndandanda wa zinthu mu khadi ndi flush mndandanda gulu.

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

Zowonetsedwa

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

Sakanizani ndikugwirizanitsa mitundu ingapo kuti mupange khadi yomwe mukufuna, kapena ponyani chilichonse mmenemo. Pansipa pali masitayelo azithunzi, midadada, masitayelo a zolemba, ndi gulu la mndandanda-zonse zitakulungidwa ndi khadi lofikira.

Mutu wakhadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Cras justo odio
Dapibus ac facilisis in
Vestibulum ndi eros

Khadi ulalo Ulalo wina

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Mutu ndi pansi

Onjezani mutu wamutu ndi/kapena pansi pa khadi.

Zowonetsedwa

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Mitu yamakhadi imatha kusinthidwa powonjezera .card-headerzinthu <h*>.

Zowonetsedwa

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Mawu

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

Wina wotchuka mu 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>

Zowonetsedwa

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

2 masiku apitawo

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

Kukula

Makhadi saganiza widthkuti ayambire, kotero adzakhala 100% m'lifupi pokhapokha atanenedwa mwanjira ina. Mutha kusintha izi ngati pakufunika ndi CSS yokhazikika, makalasi a gridi, zosakaniza za grid Sass, kapena zofunikira.

Kugwiritsa ntchito grid markup

Pogwiritsa ntchito gridi, kulungani makhadi m'mizere ndi mizere ngati pakufunika.

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Kugwiritsa ntchito zida

Gwiritsani ntchito zida zathu zochepa zomwe zilipo kuti mukhazikitse kukula kwa khadi mwachangu.

Mutu wakhadi

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Batani

Mutu wakhadi

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Batani

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

Kugwiritsa ntchito CSS yokhazikika

Gwiritsani ntchito CSS yokhazikika pamapepala anu kapena ngati masitayelo apakatikati kuti mukhazikitse m'lifupi.

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Kuyanjanitsa mawu

Mutha kusintha msanga kamvekedwe ka mawu pa khadi iliyonse—yathunthu kapena mbali zake zenizeni—ndi makalasi athu ogwirizana ndi mawu .

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Onjezani mayendedwe pamutu wa khadi (kapena chipika) chokhala ndi zida za nav za Bootstrap .

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake

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

Zithunzi

Makhadi ali ndi njira zingapo zogwirira ntchito ndi zithunzi. Sankhani kuchokera pa kuwonjezera "zipewa zazithunzi" kumapeto kwa khadi, ndikukuta zithunzi ndi zomwe zili pamakhadi, kapena kungoyika chithunzicho pakhadi.

Makapu azithunzi

Mofanana ndi mitu yamutu ndi m'munsi, makadi akhoza kukhala pamwamba ndi pansi "zipewa zazithunzi" -zithunzi pamwamba kapena pansi pa khadi.

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

Zithunzi zokutira

Sinthani chithunzi kukhala maziko a khadi ndikuphimba mawu a khadi lanu. Kutengera ndi chithunzi, mungafunike kapena simungafune masitayelo owonjezera kapena zofunikira.

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Makadi masitayilo

Makhadi ali ndi zosankha zosiyanasiyana zosinthira makonda awo, malire, ndi mtundu wawo.

Mbiri ndi mtundu

Gwiritsani ntchito zolemba ndi zakumbuyo kuti musinthe mawonekedwe a khadi.

Mutu

Mutu wa kirediti kadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wakhadi lachiwiri

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wamakhadi opambana

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wa khadi langozi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Chenjezo la khadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wakhadi lazidziwitso

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Khadi lowala mutu

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wakhadi lakuda

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

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

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi.

Border

Gwiritsani ntchito zida zam'malire kuti musinthe border-colorkhadi. Dziwani kuti mutha kuyika .text-{color}makalasi pa kholo .cardkapena kagawo kakang'ono ka zomwe zili m'khadi monga momwe zilili pansipa.

Mutu

Mutu wa kirediti kadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wakhadi lachiwiri

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wamakhadi opambana

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wa khadi langozi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Chenjezo la khadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wakhadi lazidziwitso

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Khadi lowala mutu

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu

Mutu wakhadi lakuda

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

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

Mukhozanso kusintha malire pa mutu khadi ndi footer ngati pakufunika, ndipo ngakhale kuchotsa awo background-colorndi .bg-transparent.

Mutu

Mutu wamakhadi opambana

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

M'munsi

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

Kapangidwe ka khadi

Kuphatikiza pa kukongoletsa zomwe zili mkati mwa makhadi, Bootstrap imaphatikizaponso zosankha zingapo zoyika makhadi angapo. Pakadali pano, zosankha za masanjidwewa sizinayankhebe .

Magulu a makadi

Gwiritsani ntchito magulu a makhadi kuti apereke makhadi ngati chinthu chimodzi, chomata ndi mizere yofanana m'lifupi ndi kutalika. Magulu a makadi amagwiritsa ntchito display: flex;kukwaniritsa kukula kwawo kofanana.

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yayitali kuposa yoyamba kusonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Mukamagwiritsa ntchito magulu a makadi okhala ndi pansi, zomwe zili m'munsimu zidzangolumikizana.

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yayitali kuposa yoyamba kusonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Makhadi a makadi

Mukufuna makadi ofanana m'lifupi ndi kutalika omwe samalumikizidwa? Gwiritsani ntchito makadi.

Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yayitali kuposa yoyamba kusonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Monga momwe zilili ndi magulu a makadi, mapepala apansi pa makadi mu decks adzakhala mzere.

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yayitali kuposa yoyamba kusonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Mizati yamakhadi

Makhadi amatha kukonzedwa kukhala mizati ya Masonry -ngati ndi CSS pongowakulunga mu .card-columns. Makhadi amamangidwa ndi CSS columnkatundu m'malo mwa flexbox kuti agwirizane mosavuta. Makhadi amalamulidwa kuchokera pamwamba mpaka pansi ndi kumanzere kupita kumanja.

Mungodziwiratu! Makilomita anu okhala ndi mapepala a makadi akhoza kusiyana. Kuti tipewe makhadi kusweka m'mipingo, tiyenera kuwakhazikitsa display: inline-blockngati column-break-inside: avoidnjira yotsekera zipolopolo.

Mutu wa khadi womwe umafika pamzere watsopano

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

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

Wina wotchuka mu Source Title

Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

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

Wina wotchuka mu Source Title

Mutu wakhadi

Khadi ili ndi mutu wanthawi zonse ndi ndime yaifupi ya mawu pansi pake.

Zasinthidwa komaliza mphindi 3 zapitazo

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

Wina wotchuka mu Source Title

Mutu wakhadi

Ili ndi khadi lina lomwe lili ndi mutu ndi mawu othandizira pansipa. Khadi ili lili ndi zina zowonjezera kuti likhale lalitali pang'ono ponseponse.

Zasinthidwa komaliza mphindi 3 zapitazo

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Mizati yamakhadi imathanso kukulitsidwa ndikusinthidwa makonda ndi ma code ena owonjezera. Zomwe zili pansipa ndizowonjezera .card-columnskalasi pogwiritsa ntchito CSS yomwe timagwiritsa ntchito - CSS columns - kupanga magulu omvera kuti asinthe kuchuluka kwa magawo.

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

Makhadi

Za

Chitsanzo

Mutu wakhadi

Mitundu yazinthu

Thupi

Mitu, mawu, ndi maulalo

Mutu wakhadi

Mawu omasulira a khadi

Zithunzi

Lembani magulu

Kitchen sinki

Mutu wakhadi

Mutu ndi pansi

Chithandizo chapadera chamutu

Zowonetsedwa

Chithandizo chapadera chamutu

Chithandizo chapadera chamutu

Kukula

Kugwiritsa ntchito grid markup

Chithandizo chapadera chamutu

Chithandizo chapadera chamutu

Kugwiritsa ntchito zida

Mutu wakhadi

Mutu wakhadi

Kugwiritsa ntchito CSS yokhazikika

Chithandizo chapadera chamutu

Kuyanjanitsa mawu

Chithandizo chapadera chamutu

Chithandizo chapadera chamutu

Chithandizo chapadera chamutu

Navigation

Chithandizo chapadera chamutu

Chithandizo chapadera chamutu

Zithunzi

Makapu azithunzi

Mutu wakhadi

Mutu wakhadi

Zithunzi zokutira

Mutu wakhadi

Makadi masitayilo

Mbiri ndi mtundu

Mutu wa kirediti kadi

Mutu wakhadi lachiwiri

Mutu wamakhadi opambana

Mutu wa khadi langozi

Chenjezo la khadi

Mutu wakhadi lazidziwitso

Khadi lowala mutu

Mutu wakhadi lakuda

Kupereka tanthauzo ku matekinoloje othandizira

Border

Mutu wa kirediti kadi

Mutu wakhadi lachiwiri

Mutu wamakhadi opambana

Mutu wa khadi langozi

Chenjezo la khadi

Mutu wakhadi lazidziwitso

Khadi lowala mutu

Mutu wakhadi lakuda

Mixins zothandiza

Mutu wamakhadi opambana

Kapangidwe ka khadi

Magulu a makadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Makhadi a makadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mizati yamakhadi

Mutu wa khadi womwe umafika pamzere watsopano

Mutu wakhadi