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 .

Mutu wakhadi

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

Pitani kwinakwake

html

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

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.

html

<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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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.

html

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

Lembani magulu

Pangani ndandanda wa zinthu mu khadi ndi flush mndandanda gulu.

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Zowonetsedwa

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Khadi pansi

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Khadi ulalo Ulalo wina

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Mutu ndi pansi

Onjezani mutu wamutu ndi/kapena pansi pakhadi.

Zowonetsedwa

Chithandizo chapadera chamutu

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

Pitani kwinakwake

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Mawu

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Zowonetsedwa

Chithandizo chapadera chamutu

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

Pitani kwinakwake

2 masiku apitawo

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

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

html

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

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

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Chithandizo chapadera chamutu

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

Pitani kwinakwake

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

html

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

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

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

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.

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Makadi masitayilo

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

Mbiri ndi mtundu

Yowonjezedwa mu v5.2.0

Khazikitsani background-colorkutsogolo kosiyanitsa colorndi othandizira athu.text-bg-{color} . M'mbuyomu zinkafunika kuti muphatikize pamanja zomwe mwasankha .text-{color}ndi zida .bg-{color}zopangira makongoletsedwe, zomwe mutha kugwiritsabe ntchito ngati mukufuna.

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.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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.

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins 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

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

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.

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 yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

html

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

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

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 yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

html

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

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.

Mutu wakhadi

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

Mutu wakhadi

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

Mutu wakhadi

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

Mutu wakhadi

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

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

Mutu wakhadi

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

Mutu wakhadi

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

Mutu wakhadi

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

Mutu wakhadi

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

Mutu wakhadi

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

Mutu wakhadi

Ili ndi khadi lalifupi.

Mutu wakhadi

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

Mutu wakhadi

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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 yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

html

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

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.

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, makhadi tsopano akugwiritsa ntchito zosintha za CSS zakomweko .cardkuti apititse patsogolo makonda munthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Zosintha za Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

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

Chopingasa

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 Gridi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi

Mutu wakhadi