Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

Makhadi

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

Patsamba ili

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 mwamakolo ake. Izi zimasinthidwa mosavuta ndi zosankha zathu zosiyanasiyana .

Placeholder Image cap
Mutu wakhadi

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

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

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.

Placeholder Image cap

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

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

Lembani magulu

Pangani ndandanda wa zinthu mu khadi ndi flush mndandanda gulu.

  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
<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>
Zowonetsedwa
  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
<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>
  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
Khadi pansi 
<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 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.

Placeholder Image cap
Mutu wakhadi

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

  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
Khadi ulalo Ulalo wina 
<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>

Onjezani mutu wamutu ndi/kapena pansi pakhadi.

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

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title 
<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>
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 pakhadi 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-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>

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" 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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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.

Placeholder Image cap
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

Placeholder Image cap 
<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>

Zithunzi zokutira

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

Placeholder Card image
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 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">Last updated 3 mins ago</p>
  </div>
</div>
Zindikirani kuti zomwe zili siziyenera kukhala zazikulu kuposa kutalika kwa chithunzi. Ngati zomwe zili ndi zazikulu kuposa chithunzicho, zomwe zikuwonetsedwa zidzawonetsedwa kunja kwa chithunzicho.

Chopingasa

Pogwiritsa ntchito magulu ophatikizika a gridi ndi zofunikira, makhadi amatha kupangidwa kukhala opingasa m'njira yosavuta komanso yomvera. Muchitsanzo chomwe chili pansipa, timachotsa ma gutters a gridi .g-0ndikugwiritsa ntchito .col-md-*makalasi kuti khadiyo ikhale yopingasa panthawi mdyopuma. Kusintha kwina kungafunike kutengera zomwe zili pakhadi lanu.

Placeholder Image
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" 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>

Makadi masitayilo

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

Mbiri ndi mtundu

Gwiritsani ntchito mtundu wa mawu ndi zida 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-dark 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-dark 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-dark 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 .visually-hiddenkalasi.

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">
    <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 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 amayamba ataunikidwa ndikugwiritsidwa ntchito display: flex;kuti agwirizane ndi miyeso yofanana kuyambira pa smbreakpoint.

Placeholder Image cap
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

Placeholder Image cap
Mutu wakhadi

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

Zasinthidwa komaliza mphindi 3 zapitazo

Placeholder Image cap
Mutu wakhadi

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

Zasinthidwa komaliza mphindi 3 zapitazo

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

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

Placeholder Image cap
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
Placeholder Image cap
Mutu wakhadi

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

Zasinthidwa komaliza mphindi 3 zapitazo
Placeholder Image cap
Mutu wakhadi

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

Zasinthidwa komaliza mphindi 3 zapitazo 
<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>

Makhadi a Gridi

Gwiritsani ntchito gridi ya Bootstrap ndi .row-colsmakalasi ake kuti muzitha kuwongolera kuchuluka kwa mizere ya gridi (yokulungidwa mozungulira makhadi anu) yomwe mumawonetsa pamzere uliwonse. Mwachitsanzo, apa .row-cols-1ndikuyala makhadi pa ndime imodzi, .row-cols-md-2ndikugawa makadi anayi m'lifupi mwake molingana ndi mizere ingapo, kuyambira pomwe pali pakati.

Placeholder Image cap
Mutu wakhadi

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

Placeholder Image cap
Mutu wakhadi

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

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Placeholder Image cap
Mutu wakhadi

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

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

Kusintha kwa .row-cols-3ndipo inu muwona chachinayi khadi kukulunga.

Placeholder Image cap
Mutu wakhadi

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

Placeholder Image cap
Mutu wakhadi

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

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Placeholder Image cap
Mutu wakhadi

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

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

Mukafuna kutalika kofanana, onjezerani .h-100makhadi. Ngati mukufuna kutalika kofanana mwachisawawa, mutha kukhala $card-height: 100%mu Sass.

Placeholder Image cap
Mutu wakhadi

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

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalifupi.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Placeholder Image cap
Mutu wakhadi

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

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

Monga momwe zilili ndi magulu a makadi, zolemba zapansi za makhadi zidzakhazikika.

Placeholder Image cap
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
Placeholder Image cap
Mutu wakhadi

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

Zasinthidwa komaliza mphindi 3 zapitazo
Placeholder Image cap
Mutu wakhadi

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

Zasinthidwa komaliza mphindi 3 zapitazo 
<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>

Zojambulajambula

Mu v4tidagwiritsa ntchito njira ya CSS yokha kutsanzira machitidwe a Masonry -like columns, koma njira iyi idabwera ndi zovuta zoyipa zambiri . Ngati mukufuna kukhala ndi mawonekedwe amtunduwu v5, mutha kungogwiritsa ntchito pulogalamu yowonjezera ya Masonry. Masonry sanaphatikizidwe mu Bootstrap , koma tapanga chitsanzo chothandizira kuti muyambe.

Sass

Zosintha

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;