Kadi
Kadi za Bootstrap hutoa kontena ya maudhui inayoweza kunyumbulika na kupanuliwa yenye vibadala na chaguo nyingi.
Kuhusu
Kadi ni chombo cha maudhui kinachoweza kunyumbulika na kupanuka . Inajumuisha chaguo za vichwa na vijachini, aina mbalimbali za maudhui, rangi za mandharinyuma na chaguo thabiti za kuonyesha. Ikiwa unaifahamu Bootstrap 3, kadi hubadilisha paneli, visima na vijipicha vyetu vya zamani. Utendaji sawa na vipengele hivyo unapatikana kama madarasa ya kurekebisha kadi.
Mfano
Kadi zimeundwa kwa alama na mitindo kidogo iwezekanavyo, lakini bado zinaweza kutoa udhibiti na ubinafsishaji mwingi. Imejengwa kwa flexbox, hutoa upatanishi rahisi na kuchanganya vizuri na vijenzi vingine vya Bootstrap. Hawana marginkwa chaguo-msingi, kwa hivyo tumia huduma za kuweka nafasi kama inahitajika.
Chini ni mfano wa kadi ya msingi yenye maudhui mchanganyiko na upana uliowekwa. Kadi hazina upana usiobadilika wa kuanza, kwa hivyo zitajaza upana kamili wa kipengele kikuu chake. Hii imebinafsishwa kwa urahisi na chaguzi zetu mbalimbali za ukubwa .
Jina la kadi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Nenda mahali fulani<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>Aina za maudhui
Kadi hutumia aina mbalimbali za maudhui, ikiwa ni pamoja na picha, maandishi, vikundi vya orodha, viungo na zaidi. Ifuatayo ni mifano ya kile kinachoungwa mkono.
Mwili
Sehemu ya ujenzi wa kadi ni .card-body. Itumie wakati wowote unahitaji sehemu iliyofunikwa ndani ya kadi.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Majina, maandishi na viungo
Majina ya kadi hutumiwa kwa kuongeza .card-titlelebo <h*>. Kwa njia hiyo hiyo, viungo vinaongezwa na kuwekwa karibu na kila mmoja kwa kuongeza .card-linkkwenye <a>lebo.
Manukuu hutumiwa kwa kuongeza .card-subtitletagi <h*>. Ikiwa vipengee .card-titlena .card-subtitlevipengee vimewekwa kwenye .card-bodykipengee, kichwa cha kadi na manukuu yatapangiliwa vizuri.
Jina la kadi
Manukuu ya kadi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kiungo cha kadi Kiungo kingine<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>Picha
.card-img-tophuweka picha juu ya kadi. Na .card-text, maandishi yanaweza kuongezwa kwenye kadi. Maandishi ndani .card-textyanaweza pia kutengenezwa kwa kutumia lebo za kawaida za HTML.
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
<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>Orodhesha vikundi
Unda orodha za yaliyomo kwenye kadi na kikundi cha orodha ya laini.
- Cras justo odio
- Dapibus ac kuwezesha katika
- Vestibulum na eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Cras justo odio
- Dapibus ac kuwezesha katika
- Vestibulum na eros
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Cras justo odio
- Dapibus ac kuwezesha katika
- Vestibulum na eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>Sinki ya jikoni
Changanya na ulinganishe aina nyingi za maudhui ili kuunda kadi unayohitaji, au tupa kila kitu humo. Imeonyeshwa hapa chini ni mitindo ya picha, vizuizi, mitindo ya maandishi, na kikundi cha orodha-yote yakiwa yamefungwa kwenye kadi ya upana usiobadilika.
Jina la kadi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
- Cras justo odio
- Dapibus ac kuwezesha katika
- Vestibulum na eros
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Kichwa na kijachini
Ongeza kichwa cha hiari na/au kijachini ndani ya kadi.
Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<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>Vichwa vya kadi vinaweza kutengenezwa kwa kuongeza .card-headervipengele <h*>.
Iliyoangaziwa
Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<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>Ukubwa
Kadi hazifikirii mahususi widthza kuanza, kwa hivyo zitakuwa na upana wa 100% isipokuwa kama itaelezwa vinginevyo. Unaweza kubadilisha hii inavyohitajika kwa CSS maalum, madarasa ya gridi ya taifa, michanganyiko ya gridi ya Sass, au huduma.
Kwa kutumia alama ya gridi
Kwa kutumia gridi ya taifa, funga kadi kwenye safu wima na safu kama inavyohitajika.
Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulaniMatibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<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>Kutumia huduma
Tumia huduma zetu chache za ukubwa zinazopatikana ili kuweka upana wa kadi haraka.
Jina la kadi
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
KitufeJina la kadi
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Kitufe<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>Kwa kutumia CSS maalum
Tumia CSS maalum katika laha zako za mitindo au kama mitindo ya ndani ili kuweka upana.
Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<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>Mpangilio wa maandishi
Unaweza kubadilisha kwa haraka mpangilio wa maandishi wa kadi yoyote—kwa ukamilifu wake au sehemu mahususi—na madarasa yetu ya kupanga maandishi .
Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulaniMatibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulaniMatibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<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>Urambazaji
Ongeza usogezaji kwa kichwa cha kadi (au zuia) na vipengee vya nav vya Bootstrap .
Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Matibabu maalum ya kichwa
Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Nenda mahali fulani<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Picha
Kadi ni pamoja na chaguzi chache za kufanya kazi na picha. Chagua kutoka kwa kuambatisha "vifuniko vya picha" kwenye mwisho wa kadi, kuweka picha juu ya maudhui ya kadi, au kupachika tu picha kwenye kadi.
Vifuniko vya picha
Sawa na vichwa na kijachini, kadi zinaweza kujumuisha "vifuniko vya picha" juu na chini - picha zilizo juu au chini ya kadi.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Ilisasishwa mwisho dakika 3 zilizopita
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Ilisasishwa mwisho dakika 3 zilizopita
<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>Viwekelezo vya picha
Geuza picha kuwa usuli wa kadi na uweke juu maandishi ya kadi yako. Kulingana na picha, unaweza au usihitaji mitindo ya ziada au huduma.
<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>Kumbuka kwamba maudhui haipaswi kuwa kubwa kuliko urefu wa picha. Ikiwa maudhui ni makubwa kuliko picha, maudhui yataonyeshwa nje ya picha.
Mlalo
Kwa kutumia mchanganyiko wa gridi na madarasa ya matumizi, kadi zinaweza kufanywa kwa usawa kwa njia ya kirafiki na ya kuitikia. Katika mfano ulio hapa chini, tunaondoa mifereji ya gridi .no-guttersna kutumia .col-md-*madarasa ili kufanya kadi iwe mlalo kwenye sehemu ya mdkukatika. Marekebisho zaidi yanaweza kuhitajika kulingana na maudhui ya kadi yako.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Ilisasishwa mwisho dakika 3 zilizopita
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Mitindo ya kadi
Kadi zinajumuisha chaguo mbalimbali za kubinafsisha asili, mipaka na rangi zao.
Asili na rangi
Tumia maandishi na huduma za usuli kubadilisha mwonekano wa kadi.
Jina la kadi ya msingi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi ya sekondari
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Jina la kadi ya mafanikio
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Jina la kadi ya hatari
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi ya onyo
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi ya habari
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi nyepesi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi nyeusi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
<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>Kuwasilisha maana kwa teknolojia za usaidizi
Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.
Mpaka
Tumia huduma za mpaka kubadilisha tu border-colorkadi. Kumbuka kuwa unaweza kuweka .text-{color}madarasa kwa mzazi .cardau sehemu ndogo ya yaliyomo kwenye kadi kama inavyoonyeshwa hapa chini.
Jina la kadi ya msingi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi ya sekondari
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Jina la kadi ya mafanikio
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Jina la kadi ya hatari
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi ya onyo
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi ya habari
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi nyepesi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
Kichwa cha kadi nyeusi
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
<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>Mchanganyiko wa huduma
Unaweza pia kubadilisha mipaka kwenye kichwa cha kadi na kijachini inavyohitajika, na hata kuondoa yao background-colorna .bg-transparent.
Jina la kadi ya mafanikio
Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.
<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>Mpangilio wa kadi
Mbali na kupanga yaliyomo ndani ya kadi, Bootstrap inajumuisha chaguzi chache za kuweka safu za kadi. Kwa sasa, chaguo hizi za mpangilio bado hazijafanya kazi .
Vikundi vya kadi
Tumia vikundi vya kadi kutoa kadi kama kipengele kimoja, kilichoambatishwa chenye upana na urefu wa safu wima. Vikundi vya kadi huanza zikiwa zimepangwa na kutumia display: flex;ili kushikamana na vipimo vinavyofanana kuanzia mahali pa smkuzuka.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Ilisasishwa mwisho dakika 3 zilizopita
Jina la kadi
Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Ilisasishwa mwisho dakika 3 zilizopita
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.
Ilisasishwa mwisho dakika 3 zilizopita
<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>Unapotumia vikundi vya kadi vilivyo na kijachini, maudhui yao yatajipanga kiotomatiki.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.
<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>Viwanja vya kadi
Je, unahitaji kadi za upana na urefu sawa ambazo hazijaunganishwa? Tumia safu za kadi.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Ilisasishwa mwisho dakika 3 zilizopita
Jina la kadi
Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Ilisasishwa mwisho dakika 3 zilizopita
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.
Ilisasishwa mwisho dakika 3 zilizopita
<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>Kama ilivyo kwa vikundi vya kadi, kijachini cha kadi kwenye sitaha kitapangwa kiotomatiki.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Jina la kadi
Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.
<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>Kadi za gridi ya taifa
Tumia mfumo wa gridi ya Bootstrap na aina zake .row-colsili kudhibiti ni safu wima ngapi za gridi (zilizofungwa kwenye kadi zako) unazoonyesha kwa kila safu. Kwa mfano, hapa .row-cols-1kunaweka kadi kwenye safu wima moja, na .row-cols-md-2kugawanya kadi nne kwa upana sawa katika safu mlalo nyingi, kutoka sehemu ya katikati ya kukatika kwenda juu.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
<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>Ibadilishe iwe .row-cols-3na utaona safu ya nne ya kadi.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
<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>Unapohitaji urefu sawa, ongeza .h-100kwenye kadi. Ikiwa unataka urefu sawa kwa chaguo-msingi, unaweza kuweka $card-height: 100%katika Sass.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Jina la kadi
Hii ni kadi fupi.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada.
Jina la kadi
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
<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>Safu wima za kadi
Kadi zinaweza kupangwa katika safu wima kama za Uashi na CSS tu kwa kuzifunga kwenye .card-columns. Kadi zimejengwa kwa sifa za CSS columnbadala ya flexbox kwa upangaji rahisi. Kadi zimeagizwa kutoka juu hadi chini na kushoto kwenda kulia.
Vichwa juu! Umbali wako ulio na safu wima za kadi unaweza kutofautiana. Ili kuzuia kadi kukatika safu wima, ni lazima tuziweke kwa display: inline-blockkuwa column-break-inside: avoidbado hazijaweza kuzuia risasi.
Kichwa cha kadi kinachoingia kwenye mstari mpya
Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Jina la kadi
Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.
Ilisasishwa mwisho dakika 3 zilizopita
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kiwango kamili cha posuere.
Jina la kadi
Kadi hii ina kichwa cha kawaida na aya fupi ya maandishi chini yake.
Ilisasishwa mwisho dakika 3 zilizopita
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Jina la kadi
Hii ni kadi nyingine iliyo na kichwa na maandishi yanayounga mkono hapa chini. Kadi hii ina maudhui ya ziada ya kuifanya iwe ndefu kidogo kwa ujumla.
Ilisasishwa mwisho dakika 3 zilizopita
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Safu wima za kadi pia zinaweza kupanuliwa na kubinafsishwa kwa kutumia msimbo wa ziada. Kinachoonyeshwa hapa chini ni kiendelezi cha .card-columnsdarasa kwa kutumia CSS ile ile tunayotumia—safu wima za CSS— ili kutoa seti ya viwango vinavyoitikia kwa kubadilisha idadi ya safu wima.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}