Source

Kartat

Kartat e Bootstrap ofrojnë një kontejnerë përmbajtjeje fleksibël dhe të zgjerueshëm me variante dhe opsione të shumta.

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

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

  • Cras justo odio
  • Lehtësimi i AC në
  • Vestibulum dhe eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Të paraqitura
  • Cras justo odio
  • Lehtësimi i AC në
  • Vestibulum dhe eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

  • Cras justo odio
  • Lehtësimi i AC në
  • Vestibulum dhe eros
Lidhja e kartës Një lidhje tjetër 
<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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 
<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 
<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 
<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 
<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 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

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 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" 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>
Trajtim special i titullit

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

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

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 
<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-top" 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ë

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

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 .no-guttersdhe 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ë

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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

Përdorni programet e tekstit dhe sfondit për të ndryshuar pamjen e një karte.

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.

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

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

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 
<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 përdorin display: flex;për të arritur madhësinë e tyre uniforme.

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 e natyrshme 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ë

<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 e natyrshme 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ë 
<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>

Kuvertë kartash

Keni nevojë për një grup letrash me gjerësi dhe lartësi të barabartë që nuk janë ngjitur me njëra-tjetrën? Përdorni kuvertën e kartave.

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

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 e natyrshme 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ë

<div class="card-deck">
  <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>
      <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>

Ashtu si me grupet e kartave, fundet e letrave në kuvertë 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 e natyrshme 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ë 
<div class="card-deck">
  <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ë shumëfishtë, 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ë.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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ë.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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ë.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Kolonat e kartave

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Placeholder Image cap
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

Someone famous in Source Title
Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat.

Dikush i famshëm në Titullin e Burimit
Titulli i kartës

Kjo kartë ka një titull të rregullt dhe një paragraf të shkurtër të tekstit poshtë saj.

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

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit
Titulli i kartës

Kjo është një kartë tjetër me titull dhe tekst mbështetës më poshtë. Kjo kartë ka disa përmbajtje shtesë për ta bërë atë pak më të gjatë në përgjithësi.

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

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

Kolonat e kartës gjithashtu mund të zgjerohen dhe personalizohen me disa kode shtesë. Më poshtë është një shtrirje e .card-columnsklasës duke përdorur të njëjtën CSS që ne përdorim - kolonat CSS - për të gjeneruar një grup nivelesh të përgjegjshme për ndryshimin e numrit të kolonave.

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