Kaararka
Kaararka Bootstrap waxay bixiyaan weel ka kooban dabacsanaan 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 margin
si 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 ka kooban.
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-title
daro <h*>
sumadda Si la mid ah, isku xirka ayaa lagu daraa oo la dhigayaa midba midka kale iyadoo lagu darayo .card-link
tag <a>
.
Qoraal-hoosaadyada waxa loo adeegsadaa in lagu .card-subtitle
daro <h*>
sumadda Haddii shayga .card-title
iyo .card-subtitle
alaabada lagu dhejiyo .card-body
shay, 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 ka kooban.
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-top
dhigaya sawirka kore ee kaadhka. Iyadoo .card-text
, qoraalka lagu dari karaa kaarka. Qoraalka dhexdiisa .card-text
sidoo 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 ka kooban.
<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 ka kooban.
- 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-geeye ku dhex jira 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-header
curiyeyaasha <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 width
oo lagu bilaabo, markaa waxay noqon doonaan 100% ballaaran haddii aan si kale loo sheegin. Waxaad tan ku bedeli kartaa hadba sida loogu baahdo CSS, fasalada 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-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>
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" 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 qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo dheeraad ah. Nuxurkani wax yar ayaa ka dheer
Waxa cusboneysiiyay 3 daqiiqo kahor
Magaca kaadhka
Kani waa kaadh ballaadhan oo qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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 qaabab 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 .no-gutters
oo aanu isticmaalnaa .col-md-*
fasalo si aanu kaadhka uga dhigno mid jiifa barta md
jabinta. Dib u habeyn dheeraad ah ayaa loo baahan karaa iyadoo ku xiran waxa kaadhkaga ku jira.
Magaca kaadhka
Kani waa kaadh ballaadhan oo qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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 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>
Qaababka kaararka
Kaararka waxaa ku jira doorashooyin kala duwan oo lagu habeynayo asalkooda, xuduudahooda, iyo midabkooda.
Asalkii hore iyo midabka
Isticmaal 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 ka kooban.
Magaca kaadhka sare
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka guusha
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka khatarta ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka digniinta
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka macluumaadka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Cinwaanka kaadhka khafiifka ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka madow
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
<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>
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 .sr-only
fasalka dhexdiisa ku qarsoon.
Xuduud
Isticmaal utility xuduudaha si aad u bedesho kaliya border-color
kaarka. Ogsoonow inaad ku dhejin karto .text-{color}
xiisado waalidka .card
ama 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 ka kooban.
Magaca kaadhka sare
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka guusha
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka khatarta ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka digniinta
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka macluumaadka
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Cinwaanka kaadhka khafiifka ah
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
Magaca kaadhka madow
Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ka kooban.
<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
Waxa kale oo aad bedeli kartaa xudduudaha madaxa kaadhka iyo cagaha sida loo baahdo, oo xitaa ka background-color
saar .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 ka kooban.
<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 dejiyo kaarar taxane ah. Waqtigan xaadirka ah, xulashooyinka qaabeynta weli kama jawaabaan .
Kooxaha kaararka
Isticmaal kooxaha kaadhka si aad u bixiso kaadhka hal, oo ku lifaaqan oo leh ballac iyo tiirar siman oo siman. Kooxaha kaadhadhku waxay bilaabaan inay is dulsaaran yihiin oo ay isticmaalaan display: flex;
si ay ugu xidhmaan cabbirro lebbisan oo ka bilaabmaya barta sm
jabinta.
Magaca kaadhka
Kani waa kaadh ballaadhan oo qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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 qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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 qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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 qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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>
Sagxadaha kaadhka
Ma u baahan tahay kaarar ballac iyo dherer le'eg oo aan isku xidhnayn? Isticmaal sagxadaha kaadhka.
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
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 qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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-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>
Si la mid ah kooxaha kaadhka, kaadhadhka cagtooda ee sagxadaha ayaa si toos ah saf ugu soo geli doona.
Magaca kaadhka
Kani waa kaadh ballaadhan oo qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo 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 qoraal taageero ah oo hoose ku jiro oo ah hoggaan dabiici ah oo u horseedaya waxyaabo dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.
<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>
Kaararka xargaha
Isticmaal nidaamka xariiqda Bootstrap iyo .row-cols
fasalladiisa si aad u xakamayso inta tiirar xajmiyeedka (ku duudduuban kaararkaaga) ee aad muujiso safkiiba. Tusaale ahaan, halkan waxa .row-cols-1
aan ku kala saaraynaa kaadhadhka hal tiir, oo .row-cols-md-2
loo 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">
<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>
U beddel .row-cols-3
oo 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">
<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>
Markaad u baahan tahay dherer siman, .h-100
ku 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">
<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>
Tiirarka kaadhka
Kaadhadhka waxaa loo habayn karaa tiirar u eg Masonry.card-columns
oo leh CSS kaliya iyadoo lagu duuduubo . Kaararka waxaa lagu dhisay column
guryaha CSS halkii ay ka ahaan lahaayeen flexbox si ay si sahlan ugu toosiyaan. Kaararka waxaa laga dalbadaa kor ilaa hoos iyo bidix ilaa midig.
Madaxa kor u qaad! Masaafadaada tiirarka kaadhka ahi way kala duwanaan kartaa. Si aan uga hortagno in kaadhadhku ku kala jabaan tiirarka, waa inaan u dejinnaa si display: inline-block
aanay column-break-inside: avoid
weli ahayn xal xabbaddu.
Magaca kaadhka oo ku soo duuduuba xariiq cusub
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
Xigasho si fiican loo yaqaan, oo ku jirta curiyaha blockquote.
Magaca kaadhka
Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.
Waxa cusboneysiiyay 3 daqiiqo kahor
Xigasho si fiican loo yaqaan, oo ku jirta curiyaha blockquote.
Magaca kaadhka
Kaarkani waxa uu leeyahay cinwaan joogto ah iyo tuduc gaaban oo qoraal ah oo ka hooseeya.
Waxa cusboneysiiyay 3 daqiiqo kahor
Xigasho si fiican loo yaqaan, oo ku jirta curiyaha blockquote.
Magaca kaadhka
Kani waa kaadh kale oo cinwaan iyo qoraal taageero hoosta ku leh. Kaadhkani waxa uu leeyahay wax ka kooban oo dheeraad ah si uu guud ahaan u yara dheereeyo.
Waxa cusboneysiiyay 3 daqiiqo kahor
<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>
Tiirarka kaararka sidoo kale waa la kordhin karaa oo lagu habeyn karaa kood dheeraad ah. Hoos waxaa lagu muujiyey kordhinta .card-columns
fasalka iyadoo la adeegsanayo CSS la mid ah oo aan isticmaalno — tiirarka CSS — si loo abuuro tiro heerar ah oo ka jawaabaya beddelka tirada tiirarka.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}