Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Cards

Kartên Bootstrap bi gelek guherto û vebijarkan konteynirek naverokek maqûl û berfireh peyda dikin.

Li ser vê rûpelê

Ji dor

Kart konteynirek naverokek maqûl û berfireh e . Ew vebijarkên ji bo sernav û pêlavan, cûrbecûr naverok, rengên paşnavê yên naverokê, û vebijarkên pêşandana hêzdar vedihewîne. Heke hûn bi Bootstrap 3-ê dizanin, kartên şûna panelên me yên kevn, kanî û piçûkan digirin. Karbidestên mîna wan pêkhateyan wekî dersên guhêrbar ji bo qertan hene.

Mînak

Kart bi hindik nîşankirin û şêwazên ku gengaz têne çêkirin têne çêkirin, lê dîsa jî rê didin ku tonek kontrol û xwerûkirinê radest bikin. Bi flexbox-ê ve hatî çêkirin, ew lihevhatina hêsan pêşkêşî dikin û bi pêkhateyên din ên Bootstrap re baş tevdigerin. Ew ji marginhêla xwerû ve tune ne, ji ber vê yekê wekî ku hewce be karûbarên valahiyê bikar bînin.

Li jêr mînakek qertek bingehîn bi naverokek tevlihev û firehiyek sabît heye. Kart ji bo destpêkirina firehiya sabît tune, ji ber vê yekê ew ê bi xwezayî tevahî firehiya hêmana dêûbav tijî bikin. Ev bi vebijarkên meyên cûrbecûr yên mezinbûnê re bi hêsanî tête xweş kirin .

Placeholder Image cap
Sernavê karta

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Biçe cihekî 
<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>

Cureyên naverokê

Kart cûrbecûr naverok piştgirî dikin, di nav de wêne, nivîs, komên navnîşan, girêdan, û hêj bêtir. Li jêr mînakên ku piştgirî têne kirin hene.

Beden

Bingeha avakirina kartê ye .card-body. Dema ku hûn di hundurê qertê de hewceyê beşek pêvekirî hewce bikin, wê bikar bînin.

Ev çend nivîsek di nav laşek qertaf de ye. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Sernav, nivîs û girêdan

Sernavên qertê bi lêzêdekirina tagê têne bikar .card-titleanîn <h*>. Bi heman awayî, girêdan têne zêdekirin û bi lêzêdekirina tagek .card-linkli kêleka hev têne danîn .<a>

Binnivîs bi lê zêdekirina a .card-subtitleli <h*>tagekê tê bikaranîn. Ger tişt .card-titleû .card-subtitletişt di babetekê de werin danîn .card-body, sernav û jêrnivîsa qertê bi rengek xweş têne rêz kirin.

Sernavê karta
binnivîsa kartê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Girêdana kartê Girêdana din 
<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>

Images

.card-img-topwêneyek li serê qertê bi cih dike. Bi .card-text, nivîs dikare li qertê were zêdekirin. Nivîsar di hundurê de .card-textdikare bi tagên HTML-ê standard jî were şêwaz kirin.

Placeholder Image cap

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

Lîsteya komên

Di qertek bi komek navnîşa flush re navnîşên naverokê biafirînin.

  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
<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>
Featured
  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
<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>
  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
Fotera kartê 
<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>

Lavaboka metbexê

Gelek cûreyên naverokê tevlihev bikin û li hev bikin da ku qerta ku hûn hewce ne biafirînin, an her tiştî bavêjin wir. Li jêr şêwazên wêneyê, blokan, şêwazên nivîsê, û komek navnîşê têne xuyang kirin - hemî di qertek bi firehiya sabît de hatine pêçan.

Placeholder Image cap
Sernavê karta

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
Girêdana kartê Girêdana din 
<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>

Di nav qertê de sernav û/an pêlavek vebijarkî lê zêde bikin.

Featured
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Sernivîsên qertê dikarin bi lêzêdekirina hêmanan .card-headerwerin şêwaz kirin.<h*>

Featured
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>
Pêşnîyarîya bedelê

Gotinek naskirî, ku di hêmanek blokê de heye.

Kesek di Sernavê Çavkaniyê de navdar e 
<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>
Featured
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
2 roj berê 
<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>

Mezinbûn

Kart ji widthbo destpêkirinê ne diyar in, ji ber vê yekê ew ê 100% fireh bin heya ku wekî din neyê gotin. Hûn dikarin vê yekê wekî ku hewce bike bi CSS-ya xwerû, dersên torê, mîksên Sass-a grid, an karûbaran biguhezînin.

Bikaranîna nîşankirina torê

Bi karanîna torê, li gorî hewcedariyê qertan di stûn û rêzan de bipêçin.

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Utilities bi kar tînin

Destûra meya karûbarên mezinbûnê yên berdest bikar bînin da ku bi lez firehiya qertê destnîşan bikin.

Sernavê karta

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Pişkov
Sernavê karta

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Pişkov 
<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>

Bikaranîna CSS-ya xwerû

CSS-ya xwerû di şêwazên xwe de an wekî şêwazên hundurîn bikar bînin da ku firehiyek saz bikin.

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Lihevkirina nivîsê

Hûn dikarin bi dersên meya hevrastkirina nivîsê re bi lez hevrêziya nivîsê ya her qertê-bi tevahî an beşên taybetî- biguhezînin .

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Bi hêmanên navikê yên Bootstrap re hin navîgasyon li sernavê (an blokê) qertakê zêde bikin .

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

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

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Images

Kartên ji bo xebata bi wêneyan re çend vebijark vedigirin. Ji pêvekirina "capên wêneyê" li her du dawiya qertekê hilbijêrin, wêneyan bi naveroka qertê ve girêbidin, an jî bi tenê wêneyê di qertê de bihêlin.

Caps Wêne

Mîna sernivîs û pêlavan, kartên dikarin "kapên wêneyê" yên jorîn û jêrîn -wêneyên li jor an binê qertê bihewînin.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

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

Zêdekirina wêneyan

Wêneyek veguherînin paşpirtûka qerta xwe û nivîsa qerta xwe bixin. Bi wêneyê ve girêdayî, dibe ku hûn hewceyê şêwaz an karûbarên zêde nebin an ne hewce ne.

Placeholder Card image
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

<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>
Têbînî ku naverok divê ji bilindahiya wêneyê mezintir nebe. Ger naverok ji wêneyê mezintir be dê naverok li derveyî wêneyê were xuyang kirin.

Asumane

Bi karanîna berhevokek grîd û dersên karûbar, kart dikarin bi rengek mobîl-heval û bersivdar werin çêkirin. Di mînaka li jêr de, em gemarên torê bi dersan radikin .g-0û bi kar tînin .col-md-*da ku qertê li xala mdveqetînê horizontî bikin. Dibe ku li gorî naveroka qerta we verastkirinên din hewce bibin.

Placeholder Image
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

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

şêwazên kartê

Kart vebijarkên cihêreng ên ji bo xweşkirina paşeroj, sînor û rengê wan vedigirin.

Paşnav û reng

Karûbarên rengê nivîsê û paşîn bikar bînin da ku xuyangê qertê biguhezînin.

Header
Sernavê karta seretayî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta duyemîn

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta Serkeftinê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta xeterê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta hişyariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta agahdariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta ronahî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta tarî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.

Hidûd

Karûbarên sînor bikar bînin da ku tenê qertek biguhezînin border-color. Bala xwe bidinê ku hûn dikarin .text-{color}dersên li ser dêûbav .cardan binekomek naveroka qertê bidin wekî ku li jêr tê xuyang kirin.

Header
Sernavê karta seretayî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta duyemîn

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta Serkeftinê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta xeterê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta hişyariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta agahdariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta ronahî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta tarî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

Karûbaran tevlihev dike

Her weha hûn dikarin li gorî hewcedariyê tixûbên li ser serê kartê û pêlavê biguhezînin, û tewra wan jî background-colorbi .bg-transparent.

Header
Sernavê karta Serkeftinê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

layout karta

Ji bilî şêwaza naverokê di nav qertafan de, Bootstrap çend vebijarkan ji bo danîna rêzikên qertan vedihewîne. Heya nuha, van vebijarkên sêwiranê hîna ne bersivdar in.

Komên karta

Komên kartê bikar bînin da ku qertan wekî hêmanek yekane, pêvekirî bi stûnên pehnahî û bilindahiyê wekhev bikin. Komên qertê bi hev ve dest pê dikin û bikar tînin display: flex;da ku bi pîvanên yekreng ên ku ji xala smveqetînê dest pê dikin ve girêdayî bibin.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin

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

Dema ku komên qerta bi pêpelokan re bikar bînin, naveroka wan dê bixweber rêz bibe.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin 
<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>

kartên Grid

Pergala torê ya Bootstrap û .row-colsçînên wê bikar bînin da ku hûn li ser rêzek çend stûnên torê (li dora qertên xwe pêça ne) kontrol bikin. Mînakî, li vir .row-cols-1qertan li ser yek stûnê danîne, û .row-cols-md-2çar qertan bi firehiya wekhev li ser çend rêzan, ji xala veqetandina navîn ber bi jor ve dabeş dike.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

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

Wê biguhezînin .row-cols-3û hûn ê qerta çaremîn pêça bibînin.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

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

Gava ku hûn hewceyê bilindahiya wekhev be, .h-100li qertan zêde bikin. Heke hûn ji hêla xwerû ve bilindahiyên wekhev dixwazin, hûn dikarin $card-height: 100%li Sass saz bikin.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Placeholder Image cap
Sernavê karta

Ev kartek kurt e.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

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

Mîna komên qertê, pêlavên qertan bixweber dê rêz bibin.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin 
<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>

Masonry

Di v4me de teknolojiyek tenê CSS bikar anî da ku reftarên stûnên mîna Masonry bişopînin, lê ev teknîk bi gelek bandorên alîgir ên ne xweş re hat. Heke hûn dixwazin bi vî rengî sêwiranê di nav de hebe v5, hûn dikarin tenê pêveka Masonry bikar bînin. Masonry di Bootstrap de tune ye , lê me mînakek demo çêkir da ku ji we re bibe alîkar ku hûn dest pê bikin.

Sass

Variables

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