Katuna
Katunan Bootstrap suna ba da kwandon abun ciki mai sassauƙa kuma mai yuwuwa tare da bambance-bambancen karatu da zaɓuɓɓuka.
Game da
Kati wani kwandon abun ciki mai sassauƙa ne kuma mai yuwuwa. Ya ƙunshi zaɓuɓɓuka don masu kai da ƙafafu, nau'in abun ciki iri-iri, launuka na mahallin mahallin, da zaɓuɓɓukan nuni masu ƙarfi. Idan kun saba da Bootstrap 3, katunan suna maye gurbin tsoffin fafuna, rijiyoyi, da thumbnails. Ana samun ayyuka iri ɗaya ga waɗannan abubuwan haɗin gwiwa azaman azuzuwan masu gyara don katunan.
Misali
An gina katunan tare da ƙaramin alama da salo sosai gwargwadon yiwuwa, amma har yanzu suna sarrafa don isar da ton na sarrafawa da keɓancewa. Gina tare da flexbox, suna ba da jeri mai sauƙi kuma suna haɗuwa da kyau tare da sauran abubuwan Bootstrap. Ba su da margin
ta tsohuwa, don haka yi amfani da kayan aikin tazarar yadda ake buƙata.
Da ke ƙasa akwai misalin katin asali tare da abun ciki mai gauraya da tsayayyen faɗi. Katuna ba su da tsayayyen faɗin da za su fara, don haka a zahiri za su cika cikakken faɗin ɓangaren mahaifa. Wannan yana da sauƙin keɓancewa tare da zaɓin girman mu daban-daban .
Taken katin
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Tafi wani wuri<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>
Nau'in abun ciki
Katuna suna tallafawa nau'ikan abun ciki iri-iri, gami da hotuna, rubutu, ƙungiyoyin jeri, hanyoyin haɗin gwiwa, da ƙari. A ƙasa akwai misalan abin da ake tallafawa.
Jiki
Tushen ginin kati shine .card-body
. Yi amfani da shi a duk lokacin da kuke buƙatar sashe mai santsi a cikin kati.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Laƙabi, rubutu, da hanyoyin haɗin gwiwa
Ana amfani da taken katin ta ƙara .card-title
zuwa <h*>
alama. Hakazalika, ana ƙara hanyoyin haɗin gwiwa a sanya su kusa da juna ta hanyar ƙara .card-link
zuwa <a>
tag.
Ana amfani da rubutun kalmomi ta ƙara alama .card-subtitle
zuwa <h*>
alama. Idan an sanya abubuwan .card-title
da .card-subtitle
abubuwan a cikin wani .card-body
abu, taken katin da ƙaramin taken suna daidaitawa da kyau.
Taken katin
Rubutun kati
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Haɗin katin Wani hanyar haɗi<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>
Hotuna
.card-img-top
sanya hoto zuwa saman katin. Tare da .card-text
, ana iya ƙara rubutu zuwa katin. .card-text
Hakanan ana iya tsara rubutu a ciki tare da daidaitattun alamun HTML.
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
<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>
Jerin ƙungiyoyi
Ƙirƙiri lissafin abun ciki a cikin kati tare da ƙungiyar jeri.
- Wani abu
- Abu na biyu
- Abu na uku
<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>
- Wani abu
- Abu na biyu
- Abu na uku
<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>
- Wani abu
- Abu na biyu
- Abu na uku
<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>
Kitchen nutse
Haɗa ku daidaita nau'ikan abun ciki da yawa don ƙirƙirar katin da kuke buƙata, ko jefa komai a ciki. Ana nunawa a ƙasa salon hoto, tubalan, salon rubutu, da rukunin jeri-duk an nannade su cikin ƙayyadaddun kati mai faɗi.
Taken katin
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
- Wani abu
- Abu na biyu
- Abu na uku
<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>
Kai da kafa
Ƙara abin kai da/ko ƙafa na zaɓi a cikin kati.
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<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>
Za'a iya siffanta kawunan kati ta ƙara .card-header
zuwa <h*>
abubuwa.
Fitattu
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<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>
Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.
<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>
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<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>
Girman girma
Katuna suna ɗauka babu takamaiman width
don farawa, don haka za su yi faɗin 100% sai dai in an faɗi. Kuna iya canza wannan kamar yadda ake buƙata tare da CSS na al'ada, azuzuwan grid, grid Sass mixins, ko abubuwan amfani.
Yin amfani da alamar grid
Amfani da grid, kunsa katunan cikin ginshiƙai da layuka kamar yadda ake buƙata.
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuriMagani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<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>
Amfani da kayan aiki
Yi amfani da ɗimbin kayan aikin girman girman da ake da su don saita faɗin katin da sauri.
<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>
Amfani da CSS na al'ada
Yi amfani da CSS na al'ada a cikin takaddun salon ku ko azaman salon layi don saita faɗin.
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<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>
Daidaita rubutu
Kuna iya canza daidaita rubutun kowane kati da sauri-a gaba ɗaya ko takamaiman sassansa-tare da azuzuwan daidaita rubutun mu .
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuriMagani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuriMagani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Kewayawa
Ƙara wasu kewayawa zuwa kan kati (ko toshe) tare da abubuwan haɗin nav na Bootstrap .
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">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>
Magani na musamman
Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.
Tafi wani wuri<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>
Hotuna
Katuna sun haɗa da ƴan zaɓuɓɓuka don aiki tare da hotuna. Zaɓi daga sanya “mafi girman hoto” a kowane ƙarshen katin, lulluɓe hotuna tare da abun cikin katin, ko kawai saka hoton a cikin katin.
Maƙallan hoto
Hakazalika da masu kai da ƙafa, katunan na iya haɗawa da sama da ƙasa “manyan hoto”—hotuna a saman ko kasan katin.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
<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>
Hoto mai rufi
Juya hoto zuwa bangon katin kuma rufe rubutun katin ku. Dangane da hoton, ƙila ko ƙila kuna buƙatar ƙarin salo ko kayan aiki.
<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>
A kwance
Yin amfani da haɗin grid da azuzuwan masu amfani, ana iya yin katunan a kwance ta hanyar sada zumunci ta wayar hannu da amsawa. A cikin misalin da ke ƙasa, muna cire grid gutters tare .no-gutters
da amfani .col-md-*
da azuzuwan don sanya katin a kwance a wurin md
hutu. Ana iya buƙatar ƙarin gyare-gyare dangane da abun cikin katin ku.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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>
Salon katin
Katuna sun haɗa da zaɓuɓɓuka daban-daban don keɓance asalinsu, iyakoki, da launi.
Baya da launi
Yi amfani da rubutu da bayanan baya don canza kamannin katin.
Taken katin farko
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin sakandare
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin nasara
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin haɗari
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin gargadi
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin bayanai
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Take katin haske
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin duhu
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Isar da ma'ana ga fasahar taimako
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-only
ajin.
Iyaka
Yi amfani da abubuwan amfani kan iyaka don canza kawai border-color
katin. Lura cewa zaku iya sanya .text-{color}
azuzuwan akan iyaye .card
ko juzu'in abubuwan da ke cikin katin kamar yadda aka nuna a ƙasa.
Taken katin farko
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin sakandare
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin nasara
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin haɗari
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin gargadi
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin bayanai
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Take katin haske
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
Taken katin duhu
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Mixins utilities
Hakanan zaka iya canza iyakoki akan taken katin da ƙafa kamar yadda ake buƙata, har ma da cire su background-color
tare da .bg-transparent
.
Taken katin nasara
Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.
<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>
Tsarin katin
Baya ga salo abun ciki a cikin katunan, Bootstrap ya haɗa da ƴan zaɓuɓɓuka don shimfida jerin katunan. A halin yanzu, waɗannan zaɓuɓɓukan shimfidar wuri ba su da amsa .
Kungiyoyin katin
Yi amfani da ƙungiyoyin kati don yin katunan azaman guda ɗaya, abin da aka haɗe tare da faɗin faɗi da ginshiƙan tsayi daidai. Ƙungiyoyin kati suna farawa a jere kuma suna amfani da display: flex;
su don haɗawa tare da nau'ikan nau'ikan da ke farawa daga wurin sm
karya.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.
An sabunta ta ƙarshe mintuna 3 da suka gabata
<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>
Lokacin amfani da ƙungiyoyin kati tare da ƙafafu, abun cikin su zai yi layi ta atomatik.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.
<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>
Katin bene
Kuna buƙatar saitin daidai girman nisa da katunan tsayi waɗanda ba a haɗa su da juna ba? Yi amfani da benen kati.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.
An sabunta ta ƙarshe mintuna 3 da suka gabata
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Kamar dai tare da ƙungiyoyin katin, ƙafafun katin a cikin bene za su yi layi ta atomatik.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
Taken katin
Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Katunan Grid
Yi amfani da tsarin grid na Bootstrap da .row-cols
azuzuwan sa don sarrafa ginshiƙan grid nawa (wanda aka nannade kewaye da katunan ku) da kuke nunawa kowane jere. Misali, anan shine .row-cols-1
shimfida katunan akan ginshiƙi ɗaya, da .row-cols-md-2
raba katunan huɗu zuwa daidai da faɗin layuka masu yawa, daga matsakaiciyar tsinkewa sama.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Canza shi .row-cols-3
kuma za ku ga kundi na huɗu na kati.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Lokacin da kuke buƙatar tsayi daidai, ƙara .h-100
zuwa katunan. Idan kuna son tsayin tsayi daidai ta tsohuwa, zaku iya saita $card-height: 100%
a cikin Sass.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Taken katin
Wannan gajeren kati ne.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki.
Taken katin
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
ginshiƙan katin
Ana iya tsara katunan zuwa ginshiƙai irin na Masonry tare da CSS kawai ta hanyar naɗe su a cikin .card-columns
. An gina katunan tare da column
kaddarorin CSS maimakon flexbox don sauƙin daidaitawa. Ana yin odar katunan daga sama zuwa ƙasa da hagu zuwa dama.
A kula! Nisan mil ɗin ku tare da ginshiƙan katin na iya bambanta. Don hana karyewar katuna a cikin ginshiƙai, dole ne mu saita su display: inline-block
kamar yadda column-break-inside: avoid
ba shine mafita ba tukuna.
Taken katin da ke lulluɓe zuwa sabon layi
Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.
Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.
Taken katin
Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.
Taken katin
Wannan katin yana da take na yau da kullun da gajeriyar sakin layi na rubutu a ƙasansa.
An sabunta ta ƙarshe mintuna 3 da suka gabata
Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.
Taken katin
Wannan wani katin ne mai take da rubutu mai goyan baya a ƙasa. Wannan katin yana da wasu ƙarin abun ciki don sanya shi ɗan tsayi gabaɗaya.
An sabunta ta ƙarshe mintuna 3 da suka gabata
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Hakanan ana iya tsawaita ginshiƙan katin da keɓancewa tare da wasu ƙarin lamba. Wanda aka nuna a ƙasa shine faɗaɗa .card-columns
ajin ta amfani da CSS iri ɗaya da muke amfani da su — ginshiƙan CSS - don samar da saiti na matakan amsawa don canza adadin ginshiƙan.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}