Kaararka
Kaararka Bootstrap waxay bixiyaan weel ka kooban oo dabacsan oo la dheerayn karo oo leh noocyo iyo doorashooyin badan.
Ku saabsan
Kaarku waa weel nuxur ah oo dabacsan oo la bixi karo. Waxaa ka mid ah ikhtiyaarrada loogu talagalay madaxa iyo cagaha, noocyo badan oo kala duwan oo ka kooban, midabada asalka ah, iyo fursadaha bandhigga ee xoogga leh. Haddii aad aqoon u leedahay Bootstrap 3, kaadhadhku waxay beddelaan baalalkeennii hore, ceelasha, iyo thumbnails. Shaqada la midka ah ee qaybahaas ayaa loo heli karaa sidii fasallada wax ka beddelka ee kaararka.
Tusaale
Kaararka waxaa lagu dhisay calaamado yar iyo qaabab sida ugu macquulsan, laakiin wali waxay maareeyaan inay keenaan tiro badan oo xakameyn iyo habeyn ah. Lagu dhisay flexbox, waxay bixiyaan toosin sahlan waxayna si fiican isugu daraan qaybaha kale ee Bootstrap. Iyagu ma haystaan marginsi caadi ah, markaa isticmaal utility kala fogeynta hadba sida loogu baahdo.
Hoos waxaa ku yaal tusaale kaarka aasaasiga ah oo leh waxyaabo isku dhafan iyo ballac go'an. Kaadhadhku ma laha ballac go'an oo lagu bilaabo, markaa waxay si dabiici ah u buuxin doonaan ballaca buuxa ee walxaha waalidka. Tani si fudud ayaa loogu habeeyey iyada oo la adeegsanayo xulashooyinka cabbirka ee kala duwan .
Magaca kaadhka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Meel tag<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>Noocyada nuxurka
Kaadhadhku waxay taageeraan waxyaabo badan oo kala duwan, oo ay ku jiraan sawirro, qoraal, kooxo liiska, isku xidhka, iyo in ka badan. Hoos waxaa ah tusaalayaal waxa la taageeray
Jirka
Dhismaha kaadhku waa .card-body. Isticmaal mar kasta oo aad u baahato qayb daboolan oo kaadhka dhexdiisa ah.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Ciwaanka, qoraalka, iyo isku xidhka
Magacyada kaadhka waxa loo isticmaalaa in lagu .card-titledaro <h*>sumadda Si la mid ah, isku xirka ayaa lagu daraa oo la dhigayaa midba midka kale iyadoo lagu darayo .card-linktag <a>.
Qoraal-hoosaadyada waxa loo adeegsadaa in lagu .card-subtitledaro <h*>sumadda Haddii shayga .card-titleiyo .card-subtitlealaabada lagu dhejiyo .card-bodyshay, magaca kaadhka iyo qoraal hoosaadka ayaa si fiican u toosan.
Magaca kaadhka
Qoraal-hoosaadka kaadhka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Xiriirinta kaadhka Xiriir kale<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>Sawirada
.card-img-topdhigaya sawirka kore ee kaadhka. Iyadoo .card-text, qoraalka lagu dari karaa kaarka. Qoraalka dhexdiisa .card-textsidoo kale waxaa lagu qaabayn karaa calaamadaha HTML ee caadiga ah.
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
<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>Liiska kooxaha
Ku samee liisaska waxa ku jira kaadhka oo leh koox liis ah.
- Shay
- Shay labaad
- Shayga saddexaad
<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>- Shay
- Shay labaad
- Shayga saddexaad
<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>- Shay
- Shay labaad
- Shayga saddexaad
<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>Saxanka jikada
Isku qas oo ku dheji noocyo badan oo ka kooban si aad u abuurto kaarka aad u baahan tahay, ama ku tuur wax kasta oo halkaas ku jira. Hoos waxaa lagu muujiyey qaababka sawirka, baloogyada, qaababka qoraalka, iyo kooxda liiska—dhammaan waxay ku duuban yihiin kaar ballac go'an.
Magaca kaadhka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
- Shay
- Shay labaad
- Shayga saddexaad
<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>Madaxa iyo cagta
Ku dar madax-madaxeed ikhtiyaari ah iyo/ama cag-goyn gudaha kaadhka.
Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>Madax kaararka waxaa lagu qaabayn karaa iyadoo lagu darayo .card-headercuriyeyaasha <h*>.
Sifaysan
Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>Xigasho si fiican loo yaqaan, oo ku jirta curiyaha 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>Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>Cabbirka
Kaadhadhku waxay u maleynayaan inaysan jirin wax gaar ah widthoo lagu bilaabo, markaa waxay noqon doonaan 100% ballaaran haddii aan si kale loo sheegin. Waxaad tan ku beddeli kartaa hadba sida loogu baahdo CSS, fasallada grid, grid Sass mixins, ama utilities.
Isticmaalka calaamadaynta grid
Adigoo isticmaalaya shabaqlaha, ku duub kaadhadhka tiirar iyo saf marka loo baahdo.
<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>Isticmaalka utility
Isticmaal muggeed ee agabka cabbirka ee la heli karo si aad dhaqso ugu dejiso ballaca kaadhka.
Magaca kaadhka
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
badhankaMagaca kaadhka
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
badhanka<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>Isticmaalka CSS-ga caadiga ah
U adeegso CSS-ga caadiga ah xaashidaada qaab-dhismeedka ama qaababka khad hoose si aad u dejiso ballac.
Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>toosinta qoraalka
Waxaad si dhakhso ah u bedeli kartaa toosinta qoraalka kaadh kasta - gabi ahaanba ama qaybo gaar ah - oo leh fasaladayada qoraalka alignment .
Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tagDaaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tagDaaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>Navigation
Ku dar xoogaa navigation ah madaxa kaarka (ama xannibaadda) oo leh qaybaha nav ee Bootstrap .
Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>Daaweynta cinwaan gaar ah
Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.
Meel tag<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>Sawirada
Kaararka waxaa ku jira dhowr ikhtiyaar oo lagu shaqeynayo sawirada. Ka dooro ku dhejinta "koofiyadaha sawirka" ee labada gees ee kaadhka, ku daboolaya sawirada kaadhka ka kooban, ama si fudud ugu dheji sawirka kaadhka.
Koofiyadaha sawirka
Si la mid ah madaxyada iyo cagaha, kaararku waxa ay ku jiri karaan kor iyo hoos "koofiyadaha sawirka" -sawiro xagga sare ama hoose ee kaadhka.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Waxa cusboneysiiyay 3 daqiiqo kahor
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Waxa cusboneysiiyay 3 daqiiqo kahor
<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>Dusha sare ee sawirka
U rog sawirka asalka kaadhka oo ku daboosho qoraalka kaadhkaaga. Iyadoo ku xiran sawirka, waxaa laga yaabaa inaad u baahnid ama uma baahnid habab dheeraad ah ama qalabyo.
<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>Horizontal
Isticmaalka isku-darka fasalada shabaqyada iyo tamarta, kaadhadhku waxa loo samayn karaa si toos ah mobile-saaxiibtinimo iyo hab jawaab celin leh. Tusaalaha hoose, waxaanu ku saarna majaraha xadhkaha goostay .g-0oo aanu isticmaalnaa .col-md-*fasalo si aanu kaadhka uga dhigno mid jiifa barta mdjabinta. Dib u habeyn dheeraad ah ayaa loo baahan karaa iyadoo ku xiran waxa kaadhkaga ku jira.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Waxa cusboneysiiyay 3 daqiiqo kahor
<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>Qaababka kaararka
Kaararka waxaa ku jira doorashooyin kala duwan oo lagu habeynayo asalkooda, xuduudahooda, iyo midabkooda.
Asalkii hore iyo midabka
Isticmaal midabka qoraalka iyo agabka asalka si aad u bedesho muuqaalka kaadhka.
Magaca kaadhka aasaasiga ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka sare
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka guusha
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka khatarta ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka digniinta
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka macluumaadka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Cinwaanka kaadhka khafiifka ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka madow
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.
Xuduud
Isticmaal utility xuduudaha si aad u bedesho kaliya border-colorkaarka. Ogsoonow inaad ku dhejin karto .text-{color}xiisado waalidka .cardama qayb ka mid ah waxa kaadhka ku jira sida hoos ku cad.
Magaca kaadhka aasaasiga ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka sare
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka guusha
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka khatarta ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka digniinta
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka macluumaadka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Cinwaanka kaadhka khafiifka ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
Magaca kaadhka madow
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
<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>Mixins utilities
Waxa kale oo aad bedeli kartaa xudduudaha madaxa kaadhka iyo cagaha sida loo baahdo, oo xitaa ka background-colorsaar .bg-transparent.
Magaca kaadhka guusha
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.
<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>Qaabaynta kaadhka
Marka lagu daro habaynta waxa ku jira kaadhadhka dhexdiisa, Bootstrap waxa ku jira dhawr ikhtiyaar oo lagu dejinayo kaarar taxane ah. Waqtigan xaadirka ah, xulashooyinka qaabeynta weli kama jawaabaan .
Kooxaha kaararka
Isticmaal kooxaha kaadhka si aad kaararka ugu soo bandhigto hal unug, oo ku lifaaqan oo leh tiirar ballac iyo dherer le'eg. Kooxaha kaadhadhku waxay bilaabaan inay is dulsaaran yihiin oo ay isticmaalaan display: flex;si ay ugu xidhmaan cabbirro lebbisan oo ka bilaabmaya barta smjabinta.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Waxa cusboneysiiyay 3 daqiiqo kahor
Magaca kaadhka
Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.
Waxa cusboneysiiyay 3 daqiiqo kahor
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.
Waxa cusboneysiiyay 3 daqiiqo kahor
<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>Markaad isticmaalayso kooxaha kaadhka leh cago-yaalka, waxa ku jira si toos ah ayay saf ugu geli doonaan.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.
<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>Kaararka xargaha
Isticmaal nidaamka xariiqda Bootstrap iyo .row-colsfasalladiisa si aad u xakamayso inta tiirar xajmiyeedka (ku duudduuban kaararkaaga) ee aad muujiso safkiiba. Tusaale ahaan, halkan waxa .row-cols-1aan ku kala saaraynaa kaadhadhka hal tiir, oo .row-cols-md-2loo qaybinayo afar kaadh oo ballac ahaan le'eg oo safaf badan ah, laga bilaabo barta kala goynta dhexdhexaadka ah.
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah.
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
<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>U beddel .row-cols-3oo waxaad arki doontaa duubka kaadhka afraad.
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah.
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
<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>Markaad u baahan tahay dherer siman, .h-100ku dar kaararka. Haddii aad rabto in dhererka siman sida caadiga ah, waxaad dejin kartaa $card-height: 100%Sass.
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kani waa kaadh gaaban
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah.
Magaca kaadhka
Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer
<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>Si la mid ah kooxaha kaadhka, cagaha kaadhka ayaa si toos ah saf ugu gali doona.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Magaca kaadhka
Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.
Magaca kaadhka
Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.
<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
Waxaan v4isticmaalnay farsamada CSS-kaliya si aan ugu ekaysiinno hab-dhaqanka tiirarka Masonry -sida, laakiin farsamadani waxay la timid waxyeellooyin badan oo aan fiicneyn . Haddii aad rabto in aad leedahay qaabaynta noocan oo kale ah v5, waxaad kaliya isticmaali kartaa Masonry plugin. Masonry kuma jiraan Bootstrap , laakiin waxaanu samaynay tusaale demo si uu kaaga caawiyo inaad bilowdo.
Sass
Kala duwanaansho
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$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;