Kaardii
Kaartoonni Bootstrap qabduu qabiyyee jijjiiramaa fi babal'ifamuu danda'u kan garaagarummaa fi filannoowwan hedduu qabu ni kennu.
Waa'ee
Kaardii qabduu qabiyyee jijjiiramaa fi babal’ifamuu danda’uudha . Filannoowwan mataduree fi jalaan, qabiyyee adda addaa, halluuwwan duubbee haalata, fi filannoowwan agarsiisaa humna qaban of keessatti qabata. Yoo Bootstrap 3 beektan, kaartoonni paanaalii, boolla, fi suuraa xiqqaa keenya durii bakka bu'u. Hojiin walfakkaataan qaamolee sanaa akka gita fooyyessaa kaardiidhaaf ni argama.
Fakkeenya
Kaartoonni hanga danda'ametti mallattoo fi akkaataa xiqqaadhaan ijaaramaniiru, garuu ammas to'annoo fi dhuunfachiisaa toonii tokko dhiyeessuu danda'u. Flexbox waliin kan ijaaraman, qindaa'ina salphaa kan dhiyeessan yoo ta'u, qaamolee Bootstrap biroo wajjin akka gaariitti makamu. Isaan akka margin
durtiitti hin qaban, kanaaf akka barbaachisummaa isaatti faayilii addaan fageenyaa fayyadami.
Armaan gaditti fakkeenya kaardii bu'uuraa qabiyyee walmakaa fi bal'ina dhaabbataa qabuudha. Kaartoonni bal'ina dhaabbataa jalqabuuf hin qaban, kanaafuu uumamaan bal'ina guutuu elementii warra isaa ni guutu. Kunis filannoowwan saayizii adda addaa keenyaan salphaatti kan dhuunfatamudha .
Mata duree kaardii
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Bakka tokko dhaqi<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>
Gosa qabiyyee
Kaartoonni qabiyyee adda addaa deeggaru, fakkiiwwan, barruu, gareewwan tarree, hidhannoowwanii fi kkf dabalatee. Fakkeenyonni waan deeggaraman armaan gaditti dhiyaataniiru.
Qaama
Ijaarsi kaardii tokkoo kan .card-body
. Yeroo kaardii keessaa kutaa padded barbaaddu hundatti itti fayyadami.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Mata dureewwan, barruu fi hidhannoowwan
Mata dureewwan kaardii mallattoo .card-title
tokkotti dabaluudhaan fayyadama . Haaluma walfakkaatuun hidhannoowwan itti dabalamanii mallattoo tokkotti <h*>
dabaluudhaan wal cinaa kaa'amu ..card-link
<a>
Mata dureewwan xiqqaa kan fayyadaman mallattoo .card-subtitle
irratti a dabaluudhaani . <h*>
Yoo .card-title
fi .card-subtitle
wantootni wanta tokko keessa kaa'aman .card-body
, mata dureen kaardii fi mata dureen xiqqaan akka gaariitti qindaa'u.
Mata duree kaardii
Mata duree xiqqaa kaardii
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Hidhaa kaardii Hidhaa biraa<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>
Fakkiiwwan
.card-img-top
fakkii tokko gara gubbaa kaardii sanaatti kaa’a. , .card-text
tiin barreeffama kaardii irratti dabalamuu danda'a. Barruun keessaa .card-text
mallattoolee HTML istaandaardii waliinis akkaataa itti gochuun ni danda'ama.
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
<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>
Garee tarreessi
Tarreewwan qabiyyee kaardii keessatti garee tarree flush waliin uumi.
- Meeshaa tokko
- Wanti lammaffaan
- Wanti sadaffaa
<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>
- Meeshaa tokko
- Wanti lammaffaan
- Wanti sadaffaa
<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>
- Meeshaa tokko
- Wanti lammaffaan
- Wanti sadaffaa
<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>
Sinqii kushiinaa
Kaardii barbaaddu uumuuf gosoota qabiyyee hedduu walitti makuu fi walsimsiisuu, ykn waan hunda achitti darbadhu. Armaan gaditti kan agarsiifaman akkaataa fakkii, uggura, akkaataa barruu, fi garee tarree-hunduu kaardii bal'ina dhaabbataa keessatti marfamaniidha.
Mata duree kaardii
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
- Meeshaa tokko
- Wanti lammaffaan
- Wanti sadaffaa
<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>
Mata duree fi jala sarara
Kaardii keessaa mataduree fi/ykn jala sarara filannoo dabali.
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Mata dureewwan kaardii elementoota .card-header
irratti dabaluudhaan akkaataa itti gochuun ni danda'ama .<h*>
Kan mul'ate
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.
<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>
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Saayizii gochuu
Kaartoonni width
jalqabuuf addaa hin qaban jedhanii fudhatu, kanaaf yoo haala biraatiin ibsame malee 100% bal'aa ta'u. Kana akka barbaachisummaa isaatti CSS amala, gita tarjaa, mixins tarjaa Sass, ykn faayilii wajjin jijjiiruu dandeessa.
Mallattoo tarjaa fayyadamuu
Tarjaa fayyadamuun, kaardii akka barbaachisummaa isaatti tarjaa fi tarreedhaan marsi.
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqiWal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Faayidaa fayyadamuun
Bal'ina kaardii tokkoo saffisaan saaguuf faayidaa saayizii keenya muraasa jiran fayyadamaa.
Mata duree kaardii
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
FurtuuMata duree kaardii
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Furtuu<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>
CSS amala fayyadamuun
Bal'ina saaguuf CSS amala waraqaa akkaataa kee keessatti ykn akka akkaataa sarara keessaatti fayyadami.
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Hiriirsuu barruu
Hiriirsa barruu kaardii kamiyyuu daftee jijjiiruu dandeessa—guutummaa isaatiin ykn kutaalee murtaa'oodhaan— gitaalee hiriirsa barruu keenyaan .
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqiWal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqiWal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Navigeeshinii
Qaamolee nav Bootstrap waliin gara mataduree kaardii (ykn uggura)tti qajeelcha tokko tokko dabali .
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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" 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>
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi<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>
Fakkiiwwan
Kaartoonni fakkiiwwan waliin hojjechuuf filannoowwan muraasa of keessaa qabu. “image caps” dhuma kaardii tokkoo irratti dabaluu, fakkiiwwan qabiyyee kaardiitiin uwwisuu, ykn salphaatti fakkii kaardii keessa galchuu keessaa filadhu.
Kopheewwan suuraa
Mata dureewwanii fi jala jalaa wajjin wal fakkaatuun, kaartoonni “kopheewwan fakkii” gubbaa fi jalaa—fakkiiwwan kaardii gubbaa ykn jala jiran of keessaa qabaachuu dandaʼu.
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Yeroo dhumaaf kan fooyya'e 3 mins dura
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Yeroo dhumaaf kan fooyya'e 3 mins dura
<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>
Fakkiiwwan irra kaa'aman
Fakkii gara duubbee kaardii jijjiiriitii barruu kaardii keetii irra kaa'i. Fakkii irratti hundaa'uun, akkaataa ykn faayidaa dabalataa si barbaachisuu ykn hin barbaachisu.
<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>
Dalga-galii
Walnyaatinsa gitaa giiridii fi faayidaa fayyadamuun, kaardii karaa mobaayilaaf mijaawaa fi deebii kennuu danda’uun horizontal taasifamuu danda’a. Fakkeenya armaan gadii keessatti, gutters giiridii waliin baasnee gita .g-0
fayyadamnee kaardii bakka cabbii irratti horizontal goona . Qabiyyee kaardii keessanii irratti hundaa’uun sirreeffamni dabalataa barbaachisuu danda’a..col-md-*
md
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Yeroo dhumaaf kan fooyya'e 3 mins dura
<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>
Akkaataa kaardii
Kaartoonni filannoowwan adda addaa duubbee, daangaa fi halluu isaanii dhuunfachuuf gargaaran of keessatti qabatu.
Duubbee fi halluu
Bifa kaardii jijjiiruuf halluu barruu fi faayidaa duubbee fayyadami .
Mata duree kaardii sadarkaa tokkoffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii sadarkaa lammaffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii milkaa'inaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii balaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii akeekkachiisaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii info
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii ifaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii dukkanaa'aa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
<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>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu
Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hidden
gita waliin dhokatee.
Daangaa
Faayidaa daangaaborder-color
fayyadamii kaardii tokkoo qofa jijjiiruuf . .text-{color}
Hubadhu akka armaan gadiitti gita warra .card
ykn tuuta xiqqaa qabiyyee kaardii irratti kaa'uu dandeessa .
Mata duree kaardii sadarkaa tokkoffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii sadarkaa lammaffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii milkaa'inaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii balaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii akeekkachiisaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii info
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii ifaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii dukkanaa'aa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
<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>
Faayidaa Mixins
Akkasumas daangaawwan mataduree fi jalaan kaardii irratti akka barbaachisummaa isaatti jijjiiruu dandeessa, fi illee isaanii background-color
wajjin haquu dandeessa .bg-transparent
.
Mata duree kaardii milkaa'inaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
<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>
Haala kaardii
Qabiyyee kaardii keessaa akkaataa itti gochuu malees, Bootstrap filannoowwan muraasa kaardii walduraa duubaan diriirsuu of keessatti qabata. Yeroodhaaf, filannoowwan haalata kun ammallee deebii hin kennan .
Garee kaardii
Gareewwan kaardii fayyadamii kaardii akka qaama tokkootti, maxxanfamee tarjaawwan bal'inaafi olka'iinsa walqixa qabanitti agarsiisi. Gareen kaardii tuulamanii jalqabanii fi bakka cabbii display: flex;
irraa eegalee safara walfakkaatuun maxxanuuf fayyadamu sm
.
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Yeroo dhumaaf kan fooyya'e 3 mins dura
Mata duree kaardii
Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.
Yeroo dhumaaf kan fooyya'e 3 mins dura
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.
Yeroo dhumaaf kan fooyya'e 3 mins dura
<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>
Yeroo gareewwan kaardii jalaqaba qaban fayyadamtu, qabiyyeen isaanii ofumaan ni sararama.
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.
<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>
Kaardii giiridii
Tarjaa tarjaa meeqa (kaardii kee irratti marfame) tarree tokkoof agarsiiftu to'achuuf sirna tarjaa Bootstrap fi .row-cols
gita isaa fayyadami. Fakkeenyaaf, kunoo .row-cols-1
kaardii tarjaa tokko irratti diriirsuu, fi .row-cols-md-2
kaardii afur gara bal'ina walqixaatti tarreewwan hedduu irratti qooduun, qabxii ciccituu giddugaleessaa irraa gara oliitti.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
<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>
Gara jijjiiri .row-cols-3
kaardii afraffaan marfamee jiru ni argita.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
<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>
Yeroo olka'iinsa walqixaa barbaaddu, .h-100
kaardii irratti dabali. $card-height: 100%
Yoo olka'iinsa walqixaa durtii barbaadde, Sass keessatti saaguu dandeessa .
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kun kaardii gabaabaa dha.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha.
Mata duree kaardii
Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
<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>
Akkuma gareewwan kaardii, jalaan kaardii ofumaan ni hiriiru.
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.
Mata duree kaardii
Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.
Mata duree kaardii
Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.
<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 jedhamuun beekama
In nuti amala tarreewwan Masonryv4
fakkaatanii fakkeessuuf mala CSS qofa fayyadamne , garuu tooftaa kun bu'aa cinaa namatti hin tolle baay'ee wajjin dhufe . Yoo gosa qindaa'ina kana keessa qabaachuu barbaadde , Masonry plugin qofa fayyadamuu dandeessa. Masonry Bootstrap keessatti hin hammatamne , garuu akka jalqabdu si gargaaruuf fakkeenya demoo hojjenneerra .v5
Sass jedhama
Jijjiiramoota
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;