Kpekpeɖeŋugbalẽviwo
Bootstrap ƒe kaɖiwo naa nyatakakawo ƒe nugoe si te ŋu trɔna eye wòkekena ɖe enu si me vovototo kple tiatia geɖewo le.
Ku ɖe
Kpekpeɖeŋugbalẽvi nye nusiwo le eme ƒe nugoe si te ŋu trɔna bɔbɔe eye wòkekena ɖe enu . Tiatia siwo nàte ŋu awɔ na tanyawo kple afɔtiwo, nyatakaka vovovowo, megbe amadede siwo le nya siwo ƒo xlãe me, kple tiatia sẽŋu siwo nàɖe afia la le eme. Ne ènya Bootstrap 3 nyuie la, kaɖiwo xɔa míaƒe akpa xoxowo, vudowo, kple nɔnɔmetata suewo teƒe. Dɔwɔwɔ si sɔ kple akpa mawo li abe tɔtrɔ ƒe hatsotsowo ene na kaɖiwo.
Kpɔɖeŋu
Wowɔa kaɖiwo kple dzesidede kple atsyã suetɔ kekeake alesi woate ŋui, gake wogate ŋu tsɔa tɔn ɖeka ƒe dziɖuɖu kple tɔtrɔ ɖe nɔnɔmewo ŋu naa amewo kokoko. Wotu wo kple flexbox, wonaa ɖoɖowɔwɔ bɔbɔe eye wotsaka nyuie kple Bootstrap ƒe akpa bubuwo. Womekpɔ naneke margin
le gɔmedzedzea me o, eyata zã dometsotso ƒe dɔwɔnuwo ne ehiã.
Kpekpeɖeŋugbalẽvi vevi aɖe si me nyawo tsaka eye woƒe kekeme le ɖoɖo nu ƒe kpɔɖeŋu aɖe le ete. Kpekpeɖeŋunamɔ̃wo ƒe kekeme aɖeke mele wo si be woadze egɔme o, eyata le dzɔdzɔme nu la, woayɔ eƒe dzila ƒe akpa ƒe kekeme bliboa me. Woate ŋu atrɔ asi le esia ŋu bɔbɔe kple míaƒe lolome ƒe tiatia vovovoawo .
Kpekpeɖeŋugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Yi afi aɖe<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>
Emenyawo ƒomeviwo
Kpekpeɖeŋugbalẽviwo doa alɔ nyatakaka vovovowo, siwo dometɔ aɖewoe nye nɔnɔmetatawo, nuŋɔŋlɔwo, xexlẽdzesiwo ƒe ƒuƒoƒowo, kadodowo, kple bubuwo. Nusiwo wodo alɔe ƒe kpɔɖeŋuwo le ete.
Ŋutilã
Nusi wotsɔ wɔa agbalẽvi aɖee nye .card-body
. Zãe ɣesiaɣi si nèhiã akpa si ŋu wofa nu ɖo le kaɖi aɖe me.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Tanyawo, nuŋɔŋlɔwo, kple kadodowo
Wozãa agbalẽvi ƒe tanyawo to wo tsɔtsɔ kpe .card-title
ɖe <h*>
dzesi aɖe ŋu me. Nenema ke wotsɔa kadodowo kpena ɖe wo nɔewo ŋu hedaa wo ɖe wo nɔewo xa to wo tsɔtsɔ kpe .card-link
ɖe <a>
dzesi aɖe ŋu me.
Wozãa nya siwo le ete la to a tsɔtsɔ kpe .card-subtitle
ɖe <h*>
dzesi aɖe ŋu me. Ne wotsɔ nuawo .card-title
kple .card-subtitle
nuawo da ɖe .card-body
nu aɖe me la, ke agbalẽvi la ƒe tanya kple tanya si le ete la sɔ nyuie.
Kpekpeɖeŋugbalẽvi ƒe tanya
Kpekpeɖeŋugbalẽvi ƒe tanya suewo
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Card link Kadodo bubu<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>
Nɔnɔmetatawo
.card-img-top
tsɔa nɔnɔmetata aɖe dana ɖe kaɖia tame. Ne èzã .card-text
, la, woate ŋu atsɔ nuŋɔŋlɔwo akpe ɖe kaɖia ŋu. Woateŋu awɔ nuŋɔŋlɔ si le eme .card-text
hã ƒe atsyã kple HTML dzesi siwo wozãna ɖaa.
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>
Ŋlɔ ƒuƒoƒoawo ɖi
Wɔ nyatakakawo ƒe xexlẽdzesiwo le kaɖi si me flush xexlẽdzesiwo ƒe ƒuƒoƒo le me.
- Nu aɖe
- Nu evelia
- Nu etɔ̃lia
<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>
- Nu aɖe
- Nu evelia
- Nu etɔ̃lia
<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>
- Nu aɖe
- Nu evelia
- Nu etɔ̃lia
<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>
Dzodoƒe ƒe tsinyegoe
Tsɔ nyatakaka ƒomevi vovovowo tsaka eye nàwɔ wo ɖekae be nàwɔ kaɖi si nèhiã, alo nàtsɔ nusianu aƒu gbe ɖe afima. Woɖe nɔnɔmetatawo ƒe atsyãwo, mɔxenuwo, nuŋɔŋlɔ ƒe atsyãwo, kple xexlẽdzesiwo ƒe ƒuƒoƒo aɖe fia le ete—wo katã woxatsa ɖe kaɖi si ƒe kekeme woɖo ɖi me.
Kpekpeɖeŋugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
- Nu aɖe
- Nu evelia
- Nu etɔ̃lia
<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>
Ta kple afɔti
Tsɔ ta kple/alo afɔti si nàte ŋu atia la kpe ɖe kaɖi aɖe me.
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Woate ŋu awɔ agbalẽvi ƒe tanyawo ƒe atsyã to nusiwo wotsɔ kpe .card-header
ɖe <h*>
wo ŋu me.
Woɖee fia
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.
<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>
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Sizing ƒe lolome
Kpekpeɖeŋugbalẽviwo tsɔe be naneke koŋ width
yeadze egɔme o, eyata woakeke 100% negbe ɖe wogblɔe bubui hafi. Àteŋu atrɔ esia alesi wòhiãe kple CSS tɔxɛwo, grid klasswo, grid Sass mixins, alo dɔwɔnuwo.
Grid markup zazã
Zã grid la nàtsɔ abla agbalẽviawo ɖe sɔtiwo kple fliwo me ne ehiã.
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖeTanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Nuzazãwo zazã
Zã míaƒe lolomedzidzenu ʋɛ siwo li la nàtsɔ aɖo kaɖi ƒe kekeme kaba.
Kpekpeɖeŋugbalẽvi ƒe tanya
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
AwunugbuiKpekpeɖeŋugbalẽvi ƒe tanya
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Awunugbui<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 si wowɔ ɖe ɖoɖo nu zazã
Zã CSS tɔxɛ le wò atsyãgbalẽwo me alo abe atsyã siwo le fli me ene nàtsɔ aɖo kekeme.
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu
Àte ŋu atrɔ nuŋɔŋlɔ ƒe ɖoɖo si le kaɖi ɖesiaɖe me kaba—le eƒe akpa bliboa alo eƒe akpa aɖewo koŋ me—kple míaƒe nuŋɔŋlɔ ƒe ɖoɖo ƒe klasswo .
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖeTanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖeTanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Mɔfiamewo ƒe Mɔzɔzɔ
Tsɔ mɔfiame aɖewo kpe ɖe kaɖi ƒe ta (alo mɔxexe) ŋu kple Bootstrap ƒe nav ƒe akpawo .
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>
Nɔnɔmetatawo
Tiatia ʋɛ aɖewo le agbalẽviwo me hena dɔwɔwɔ kple nɔnɔmetatawo. Tiae tso “nɔnɔmetatawo” tsɔtsɔ kpe ɖe kaɖi aɖe ƒe nuwuwu eveawo, nɔnɔmetatawo tsɔtsɔ atsyɔ kaɖia me nyawo dzi, alo nɔnɔmetata la tsɔtsɔ de kaɖi aɖe me ko me.
Nɔnɔmetatawo ƒe nutrenuwo
Abe tanyawo kple afɔtiwo ene la, woate ŋu atsɔ “nɔnɔmetatawo ƒe nutrenu” siwo le etame kple ete—nɔnɔmetata siwo le agbalẽvi aɖe tame alo ete la ade eme.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>
Nɔnɔmetata siwo wotsɔ ƒo xlãe
Trɔ nɔnɔmetata aɖe wòazu kaɖi ƒe megbenya eye nàtsɔ wò kaɖia ƒe nuŋɔŋlɔwo atsyɔ edzi. Le nɔnɔmetata la nu la, àte ŋu ahiã atsyã alo dɔwɔnu bubuwo alo màhiã o.
<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>
Si mlɔ anyi
Woate ŋu azã grid kple utility ƒe klass siwo wotsɔ ƒo ƒui atsɔ awɔ kaɖiwo wòanɔ tsia dzi le mɔ si sɔ na asitelefon eye wòawɔ dɔ nyuie nu. Le kpɔɖeŋu si le ete me la, míeɖea grid gutters la ɖa kple .g-0
eye míezãa .col-md-*
klasswo tsɔ naa card la nɔa tsia dzi le md
breakpoint la gbɔ. Ðewohĩ ahiã be nàgawɔ asitɔtrɔ bubuwo le wò kaɖia me nyawo nu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>
Kpekpeɖeŋugbalẽviwo ƒe atsyãwo
Tiatia vovovo siwo dzi woato atrɔ asi le woƒe megbenyawo, liƒowo, kple amadede ŋu la le agbalẽviawo me.
Megbenyawo kple amadede
Zã nuŋɔŋlɔ ƒe amadede kple megbenyawo ƒe dɔwɔnuwo nàtsɔ atrɔ agbalẽvi aɖe ƒe dzedzeme.
Gbãtɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kpekpeɖeŋugbalẽvi evelia ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dzidzedzekpɔkpɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Afɔkugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Nuxlɔ̃amegbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Info card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kekeli gbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dark card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu
Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla ɖe .visually-hidden
klass la ŋu ene.
Liƒo
Zã liƒodzi dɔwɔnuwo nàtsɔ atrɔ border-color
kaɖi aɖe ƒe akpa aɖe ko. De dzesii be àte ŋu atsɔ .text-{color}
klasswo ade dzila .card
alo kaɖia me nyawo ƒe akpa sue aɖe dzi abe alesi woɖee fia le ete ene.
Gbãtɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kpekpeɖeŋugbalẽvi evelia ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dzidzedzekpɔkpɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Afɔkugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Nuxlɔ̃amegbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Info card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kekeli gbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dark card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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 ƒe dɔwɔnuwo
Àte ŋu atrɔ liƒo siwo le kaɖia ƒe ta kple afɔti dzi hã ne ehiã, eye nàɖe woƒe background-color
kple .bg-transparent
.
Dzidzedzekpɔkpɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>
Kpekpeɖeŋugbalẽvi ƒe ɖoɖowɔwɔ
Tsɔ kpe ɖe alesi woawɔ nusiwo le kaɖiwo me ƒe atsyã ŋu la, tiatia ʋɛ aɖewo le Bootstrap me hena kaɖi siwo kplɔ wo nɔewo ɖo ɖoɖo ɖe wo nɔewo yome. Le ɣeyiɣi sia me la, ɖoɖowɔɖi ƒe tiatia siawo mewɔ dɔ haɖe o .
Kpekpeɖeŋugbalẽviwo ƒe ƒuƒoƒowo
Zã kaɖiwo ƒe ƒuƒoƒowo nàtsɔ aɖe kaɖiwo gɔme abe nu ɖeka si wotsɔ kpe ɖe eŋu ene si ƒe kekeme kple kɔkɔme sɔtiwo sɔ. Kpekpeɖeŋugbalẽviwo ƒe ƒuƒoƒowo dzea egɔme tso ƒuƒoƒo me eye wozãa wo display: flex;
be woava kpe ɖe wo nɔewo ŋu kple didime ɖeka siwo dzea egɔme tso sm
gbagbãƒea.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>
Ne èle kaɖi ƒe ƒuƒoƒo siwo ŋu afɔtiwo le zãm la, wo me nyawo aɖo fli le wo ɖokui si.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
<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>
Grid-gbalẽviwo
Zã Bootstrap grid system kple eƒe .row-cols
klasswo nàtsɔ akpɔ grid sɔti (si woxatsa ɖe wò kaɖiwo ŋu) agbɔsɔsɔme si nàɖe afia le fli ɖeka me dzi. Le kpɔɖeŋu me, afisiae nye .row-cols-1
be nàɖo agbalẽviawo ɖe sɔti ɖeka dzi, eye .row-cols-md-2
nàma agbalẽvi ene ɖe akpa vovovowo me wòakeke sɔsɔe le fli geɖe dzi, tso titina ƒe mamaa dzi yi dzi.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
<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>
Trɔe ɖe .row-cols-3
eye àkpɔ agbalẽvi enelia ƒe akpa si woxatsa ɖe eŋu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
<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>
Ne èhiã kɔkɔme si sɔ la, tsɔe kpe .h-100
ɖe agbalẽviawo ŋu. Ne èdi be kɔkɔme nasɔ le gɔmedzedzea me la, àteŋu aɖoe $card-height: 100%
ɖe Sass me.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi kpui aɖe.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
<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>
Abe alesi wòle le agbalẽvi ƒe ƒuƒoƒowo gome ene la, agbalẽvi ƒe afɔtiwo aɖo fli le wo ɖokui si.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
<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>
Kpememewo ƒe wɔwɔme
Le v4
míezã CSS-ko ƒe mɔnu aɖe tsɔ srɔ̃ sɔti siwo le abe Masonry ene ƒe nuwɔna , gake mɔnu sia va kple nugbegblẽ le ame ŋu geɖe siwo medzea ame ŋu o . Ne èdi be ɖoɖo sia ƒomevi nanɔ ye si le v5
, àte ŋu awɔ Masonry ƒe kpeɖeŋutɔ ŋudɔ ko. Masonry mele Bootstrap me o , gake míewɔ demo kpɔɖeŋu aɖe be wòakpe ɖe ŋuwò nàdze egɔme.
Sass ƒe nyawo
Nusiwo trɔna
$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;