Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
Check
in English

Kartat

Kartat e Bootstrap ofrojnë një enë përmbajtjeje fleksibël dhe të zgjerueshme me variante dhe opsione të shumta.

Në këtë faqe

Rreth

Një kartë është një kontejner përmbajtje fleksibël dhe i zgjerueshëm. Ai përfshin opsione për titujt dhe fundet, një shumëllojshmëri të gjerë të përmbajtjes, ngjyrat kontekstuale të sfondit dhe opsionet e fuqishme të ekranit. Nëse jeni njohur me Bootstrap 3, kartat zëvendësojnë panelet, pusetat dhe miniaturat tona të vjetra. Funksionalitet i ngjashëm me këta komponentë është i disponueshëm si klasa modifikuese për kartat.

Shembull

Kartat janë ndërtuar me sa më pak shënime dhe stile të jetë e mundur, por megjithatë arrijnë të ofrojnë një ton kontrolli dhe personalizimi. Të ndërtuara me flexbox, ato ofrojnë shtrirje të lehtë dhe përzihen mirë me komponentët e tjerë të Bootstrap. Ata nuk kanë marginsi parazgjedhje, kështu që përdorni shërbimet e ndarjes sipas nevojës.

Më poshtë është një shembull i një karte bazë me përmbajtje të përzier dhe një gjerësi fikse. Kartat nuk kanë gjerësi fikse për të filluar, kështu që ato do të mbushin natyrshëm gjerësinë e plotë të elementit të tyre prind. Kjo përshtatet lehtësisht me opsionet tona të ndryshme të përmasave .

Placeholder Image cap
Titulli i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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

Llojet e përmbajtjes

Kartat mbështesin një shumëllojshmëri të gjerë të përmbajtjes, duke përfshirë imazhet, tekstin, grupet e listave, lidhjet dhe më shumë. Më poshtë janë shembuj të asaj që mbështetet.

Trupi

Blloku i ndërtimit të një karte është .card-body. Përdoreni sa herë që keni nevojë për një seksion të mbushur brenda një karte.

Ky është një tekst brenda trupit të kartës.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titujt, teksti dhe lidhjet

Titujt e kartave përdoren duke shtuar .card-titlenë një <h*>etiketë. Në të njëjtën mënyrë, lidhjet shtohen dhe vendosen pranë njëra-tjetrës duke shtuar .card-linknë një <a>etiketë.

Titrat përdoren duke shtuar një .card-subtitlenë një <h*>etiketë. Nëse .card-titledhe .card-subtitleartikujt vendosen në një .card-bodyartikull, titulli dhe titrat e kartës janë të rreshtuara mirë.

Titulli i kartës
Titrat e kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Lidhja e kartës Një lidhje tjetër
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>

Imazhet

.card-img-topvendos një imazh në krye të kartës. Me .card-text, teksti mund të shtohet në kartë. Teksti brenda .card-textmund të stilohet edhe me etiketat standarde HTML.

Placeholder Image cap

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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>

Listoni grupet

Krijoni lista të përmbajtjes në një kartë me një grup të listave të rrafshuara.

  • Një artikull
  • Një artikull i dytë
  • Një artikull i tretë
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>
Të paraqitura
  • Një artikull
  • Një artikull i dytë
  • Një artikull i tretë
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>
  • Një artikull
  • Një artikull i dytë
  • Një artikull i tretë
Fundi i kartës
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>

Lavaman kuzhine

Përzieni dhe përputhni shumë lloje të përmbajtjes për të krijuar kartën që ju nevojitet, ose hidhni gjithçka aty. Më poshtë tregohen stilet e imazhit, blloqet, stilet e tekstit dhe një grup liste—të gjitha të mbështjella në një kartë me gjerësi fikse.

Placeholder Image cap
Titulli i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

  • Një artikull
  • Një artikull i dytë
  • Një artikull i tretë
Lidhja e kartës Një lidhje tjetër
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>

Shtoni një kokë dhe/ose fund të faqes opsionale brenda një karte.

Të paraqitura
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

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

Titujt e kartave mund të stilohen duke i shtuar .card-headerelementeve <h*>.

Të paraqitura
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku
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>
Citim

Një citat i njohur, i përfshirë në një element blloku.

Dikush i famshëm në Titullin e Burimit
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>
Të paraqitura
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku
2 dite me pare
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>

Përmasat

Kartat nuk supozojnë se nuk janë të veçanta widthpër të filluar, kështu që ato do të jenë 100% të gjera nëse nuk përcaktohet ndryshe. Ju mund ta ndryshoni këtë sipas nevojës me CSS të personalizuar, klasat e rrjetit, përzierjet e rrjetit Sass ose shërbimet.

Përdorimi i shënjimit në rrjet

Duke përdorur rrjetën, mbështillni kartat në kolona dhe rreshta sipas nevojës.

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

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

Përdorimi i shërbimeve

Përdorni një pjesë të vogël të shërbimeve tona të disponueshme për madhësinë për të vendosur shpejt gjerësinë e një karte.

Titulli i kartës

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Butoni
Titulli i kartës

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

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

Duke përdorur CSS të personalizuar

Përdorni CSS të personalizuar në fletët e stilit tuaj ose si stile të brendshme për të vendosur një gjerësi.

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

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

Rreshtimi i tekstit

Mund të ndryshoni shpejt shtrirjen e tekstit të çdo karte—në tërësinë e saj ose pjesë të veçanta—me klasat tona të rreshtimit të tekstit .

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

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

Shtoni pak navigim në kokën (ose bllokun) e një karte me komponentët navigues të Bootstrap .

Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

Shko diku
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>
Trajtim special i titullit

Me tekstin mbështetës më poshtë si një udhëzues natyral për përmbajtje shtesë.

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

Imazhet

Kartat përfshijnë disa opsione për të punuar me imazhe. Zgjidhni nga shtimi i "tapave të imazhit" në të dy skajet e një karte, duke mbivendosur imazhet me përmbajtjen e kartës ose thjesht duke futur imazhin në një kartë.

Kapelet e imazhit

Ngjashëm me titujt dhe fundet, kartat mund të përfshijnë "kapakët e imazhit" të sipërm dhe të poshtëm - imazhe në krye ose në fund të një karte.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

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

Mbivendosjet e imazhit

Kthejeni një imazh në një sfond karte dhe mbivendosni tekstin e kartës suaj. Në varësi të imazhit, mund ose nuk mund të keni nevojë për stile ose shërbime shtesë.

Placeholder Card image
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

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>
Vini re se përmbajtja nuk duhet të jetë më e madhe se lartësia e imazhit. Nëse përmbajtja është më e madhe se imazhi, përmbajtja do të shfaqet jashtë imazhit.

Horizontale

Duke përdorur një kombinim të klasave të rrjetit dhe shërbimeve, kartat mund të bëhen horizontale në një mënyrë miqësore dhe të përgjegjshme për celularin. Në shembullin e mëposhtëm, ne heqim ulluqet e rrjetës me .g-0dhe përdorim .col-md-*klasat për ta bërë kartën horizontale në pikën e mdndërprerjes. Mund të nevojiten rregullime të mëtejshme në varësi të përmbajtjes së kartës suaj.

Placeholder Image
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

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>

Stilet e kartave

Kartat përfshijnë opsione të ndryshme për personalizimin e sfondeve, kufijve dhe ngjyrës së tyre.

Sfondi dhe ngjyra

Shtuar në v5.2.0

Vendosni një background-colorplan të parë me kontrast colorme ndihmësit tanë.text-bg-{color} . Më parë kërkohej çiftimi manual i zgjedhjes suaj .text-{color}dhe .bg-{color}shërbimeve për stilim, të cilat mund t'i përdorni ende nëse preferoni.

Kreu
Titulli kryesor i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës dytësore

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së suksesit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së rrezikut

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës paralajmëruese

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së informacionit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së lehtë

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së errët

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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>
Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.

Kufiri

Përdorni shërbimet kufitare për të ndryshuar vetëm border-colorkartën. Vini re se mund të vendosni .text-{color}klasa në prind .cardose një nëngrup të përmbajtjes së kartës siç tregohet më poshtë.

Kreu
Titulli kryesor i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës dytësore

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së suksesit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së rrezikut

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës paralajmëruese

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së informacionit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së lehtë

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Kreu
Titulli i kartës së errët

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

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>

Përzien shërbimet komunale

Ju gjithashtu mund të ndryshoni kufijtë në kokën dhe fundin e kartës sipas nevojës dhe madje t'i hiqni ato background-colorme .bg-transparent.

Kreu
Titulli i kartës së suksesit

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Fundi i faqes
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>

Paraqitja e kartës

Përveç stilimit të përmbajtjes brenda kartave, Bootstrap përfshin disa opsione për vendosjen e serive të kartave. Për momentin, këto opsione të paraqitjes nuk janë ende të përgjegjshme .

Grupet e kartave

Përdorni grupet e kartave për t'i paraqitur kartat si një element të vetëm, të bashkangjitur me kolona të barabarta gjerësi dhe lartësi. Grupet e kartave fillojnë të grumbullohen dhe përdoren display: flex;për t'u bashkuar me dimensione uniforme duke filluar nga pika e smndërprerjes.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë

Placeholder Image cap
Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje natyrale për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.

Përditësimi i fundit 3 minuta më parë

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>

Kur përdorni grupet e kartave me funde, përmbajtja e tyre do të rreshtohet automatikisht.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë
Placeholder Image cap
Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje natyrale për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë
Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.

Përditësimi i fundit 3 minuta më parë
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>

Kartat e rrjetit

Përdorni sistemin e rrjetit Bootstrap dhe .row-colsklasat e tij për të kontrolluar numrin e kolonave të rrjetit (të mbështjellura rreth kartave tuaja) për rresht. Për shembull, këtu është .row-cols-1shtrimi i kartave në një kolonë dhe .row-cols-md-2ndarja e katër kartave në gjerësi të barabartë nëpër rreshta të shumtë, nga pika e ndarjes mesatare lart.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

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>

Ndryshojeni në .row-cols-3dhe do të shihni mbështjelljen e kartës së katërt.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

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>

Kur keni nevojë për lartësi të barabartë, shtoni .h-100në letra. Nëse dëshironi lartësi të barabarta si parazgjedhje, mund të vendosni $card-height: 100%në Sass.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë e shkurtër.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjatë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

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>

Ashtu si me grupet e kartave, fundet e kartave do të rreshtohen automatikisht.

Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo përmbajtje është pak më e gjatë.

Përditësimi i fundit 3 minuta më parë
Placeholder Image cap
Titulli i kartës

Kjo kartë ka tekstin mbështetës më poshtë si një hyrje natyrale për përmbajtje shtesë.

Përditësimi i fundit 3 minuta më parë
Placeholder Image cap
Titulli i kartës

Kjo është një kartë më e gjerë me tekst mbështetës më poshtë si një hyrje e natyrshme për përmbajtje shtesë. Kjo kartë ka përmbajtje edhe më të gjatë se e para që tregon atë veprim me lartësi të barabartë.

Përditësimi i fundit 3 minuta më parë
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>

Masoneria

Në v4kemi përdorur një teknikë vetëm CSS për të imituar sjelljen e kolonave të ngjashme me Masonerinë , por kjo teknikë erdhi me shumë efekte anësore të pakëndshme . Nëse dëshironi të keni këtë lloj paraqitjeje në v5, thjesht mund të përdorni shtojcën Masonry. Masoneria nuk përfshihet në Bootstrap , por ne kemi bërë një shembull demonstrues për t'ju ndihmuar të filloni.

CSS

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, kartat tani përdorin variabla lokale CSS .cardpër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

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

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