Cards
Kartên Bootstrap bi gelek guherto û vebijarkan konteynirek naverokek maqûl û berfireh peyda dikin.
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 margin
hê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î<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.
<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-title
anîn <h*>
. Bi heman awayî, girêdan têne zêdekirin û bi lêzêdekirina tagek .card-link
li kêleka hev têne danîn .<a>
Binnivîs bi lê zêdekirina a .card-subtitle
li <h*>
tagekê tê bikaranîn. Ger tişt .card-title
û .card-subtitle
tiş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-top
wêneyek li serê qertê bi cih dike. Bi .card-text
, nivîs dikare li qertê were zêdekirin. Nivîsar di hundurê de .card-text
dikare 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.
<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>
- 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
<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
<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.
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-header
werin şê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>
Gotinek naskirî, ku di hêmanek blokê de heye.
<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>
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">
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 width
bo 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.
<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>
Rêserbirinî
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">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">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
<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.
<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>
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 md
veqetî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
<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êdekirinBi arîkarên me re pêşekek background-color
berevajî 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}
Sernavê karta seretayî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
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.
Sernavê karta Serkeftinê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Sernavê karta xeterê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
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.
Sernavê karta agahdariyê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Sernavê karta ronahî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
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-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-hidden
polê 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 .card
an binekomek naveroka qertê bidin wekî ku li jêr tê xuyang kirin.
Sernavê karta seretayî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
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.
Sernavê karta Serkeftinê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Sernavê karta xeterê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
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.
Sernavê karta agahdariyê
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Sernavê karta ronahî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
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-color
bi .bg-transparent
.
Sernavê karta Serkeftinê
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-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 sm
veqetî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
<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.
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
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.
<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-1
qertan 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.
<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.
<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-100
li 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.
<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.
Sernavê karta
Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.
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.
<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 v4
me 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êdekirinWekî 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 .card
ji 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;