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 .

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î

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>

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.

html

<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

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>

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.

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

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>

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

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>

Featured

An babete
Tiştek duyemîn
Tiştek sêyemîn

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>

An babete
Tiştek duyemîn
Tiştek sêyemîn

Fotera kartê

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>

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.

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

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>

Ser û pê

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î

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>

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î

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>

Pêşnîyarîya bedelê

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

Kesek di Sernavê Çavkaniyê de navdar e

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>

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ê

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>

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î

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>

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

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>

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î

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>

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î

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>

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î

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>

Dermankirina sernavê taybetî

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

Biçe cihekî

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>

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.

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

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>

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.

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

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>

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.

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

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>

şêwazên kartê

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

Paşnav û reng

Di v5.2.0 de hate zêdekirin

Bi arîkarên me re pêşekek background-colorberevajî saz bikin . Berê hewce bû ku hûn bi destan bijartina xwe û karûbarên ji bo şêwazê bihev bikin, ku hûn hîn jî heke hûn tercîh bikin dikarin bikar bînin.color.text-bg-{color}.text-{color}.bg-{color}

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.

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>

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.

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>

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

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>

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.

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

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

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

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>

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

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

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

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

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>

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.

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.

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.

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.

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.

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>

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

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.

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.

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.

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.

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>

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.

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.

Sernavê karta

Ev kartek kurt e.

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.

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.

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>

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

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

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

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

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>

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.

CSS

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, kartên naha guhêrbarên CSS-ê yên herêmî li ser .cardji bo xwerûkirina rast-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

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

Guherbarên 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;

Cards

Ji dor

Mînak

Sernavê karta

Cureyên naverokê

Beden

Sernav, nivîs û girêdan

Sernavê karta

binnivîsa kartê

Images

Lîsteya komên

Lavaboka metbexê

Sernavê karta

Ser û pê

Dermankirina sernavê taybetî

Featured

Dermankirina sernavê taybetî

Dermankirina sernavê taybetî

Mezinbûn

Bikaranîna nîşankirina torê

Dermankirina sernavê taybetî

Dermankirina sernavê taybetî

Utilities bi kar tînin

Sernavê karta

Sernavê karta

Bikaranîna CSS-ya xwerû

Dermankirina sernavê taybetî

Lihevkirina nivîsê

Dermankirina sernavê taybetî

Dermankirina sernavê taybetî

Dermankirina sernavê taybetî

Rêserbirinî

Dermankirina sernavê taybetî

Dermankirina sernavê taybetî

Images

Caps Wêne

Sernavê karta

Sernavê karta

Zêdekirina wêneyan

Sernavê karta

Asumane

Sernavê karta

şêwazên kartê

Paşnav û reng

Sernavê karta seretayî

Sernavê karta duyemîn

Sernavê karta Serkeftinê

Sernavê karta xeterê

Sernavê karta hişyariyê

Sernavê karta agahdariyê

Sernavê karta ronahî

Sernavê karta tarî

Veguheztina wateya teknolojiyên arîkar

Hidûd

Sernavê karta seretayî

Sernavê karta duyemîn

Sernavê karta Serkeftinê

Sernavê karta xeterê

Sernavê karta hişyariyê

Sernavê karta agahdariyê

Sernavê karta ronahî

Sernavê karta tarî

Karûbaran tevlihev dike

Sernavê karta Serkeftinê

layout karta

Komên karta

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta

kartên Grid

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta

Sernavê karta