Kāleka
Hāʻawi nā kāleka Bootstrap i kahi pahu ʻike maʻalahi a hoʻonui ʻia me nā ʻano like ʻole a me nā koho.
E pili ana
He pahu maʻiʻo maʻalahi a hoʻonui ʻia ke kāleka. Loaʻa iā ia nā koho no nā poʻo a me nā wāwae, nā ʻano maʻiʻo like ʻole, nā waihoʻoluʻu ʻaoʻao, a me nā koho hōʻike ikaika. Inā kamaʻāina ʻoe i ka Bootstrap 3, hoʻololi nā kāleka i kā mākou panela kahiko, nā pūnāwai, a me nā kiʻi liʻiliʻi. Loaʻa nā hana like i kēlā mau ʻāpana e like me nā papa hoʻololi no nā kāleka.
Laʻana
Kūkulu ʻia nā kāleka me ka liʻiliʻi liʻiliʻi a me nā ʻano e like me ka hiki, akā hoʻokele mau i ka hāʻawi ʻana i kahi ton o ka mana a me ka hana maʻamau. Kūkulu ʻia me ka flexbox, hāʻawi lākou i ka alignment maʻalahi a hui maikaʻi me nā mea Bootstrap ʻē aʻe. ʻAʻohe margin
o lākou maʻamau, no laila e hoʻohana i nā pono spacing e like me ka mea e pono ai.
Aia ma lalo kahi laʻana o kahi kāleka maʻamau me nā mea i hui pū ʻia a me kahi ākea paʻa. ʻAʻohe laula paʻa o nā kāleka e hoʻomaka ai, no laila e hoʻopiha maoli lākou i ka laulā piha o kāna mea makua. Hoʻopili maʻalahi kēia me kā mākou mau koho nui .
Poʻo inoa kāleka
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Hele i kahi<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>
ʻAno maʻiʻo
Kākoʻo nā kāleka i nā ʻano mea like ʻole, me nā kiʻi, nā kikokikona, nā pūʻulu papa inoa, nā loulou, a me nā mea hou aku. Aia ma lalo nā laʻana o nā mea i kākoʻo ʻia.
Kino
ʻO ka papa kūkulu o ke kāleka ʻo ia ka .card-body
. E hoʻohana i kēlā me kēia manawa āu e makemake ai i kahi ʻāpana padded i loko o kahi kāleka.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Poʻo inoa, kikokikona, a me nā loulou
Hoʻohana ʻia nā inoa kāleka ma ka hoʻohui .card-title
ʻana i kahi <h*>
hōʻailona. Ma ke ala like, hoʻohui ʻia nā loulou a kau ʻia ma kahi kokoke i kekahi me ka hoʻohui .card-link
ʻana i kahi <a>
hōʻailona.
Hoʻohana ʻia nā huaʻōlelo ma ka hoʻohui .card-subtitle
ʻana i kahi <h*>
hōʻailona. Inā hoʻokomo ʻia nā mea .card-title
a me nā .card-subtitle
mea i loko o kahi .card-body
mea, ua align maikaʻi ʻia ka inoa kāleka a me ka subtitle.
Poʻo inoa kāleka
Kāleka subtitle
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
loulou kāleka ʻO kekahi loulou<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ā kiʻi
.card-img-top
kau i ke kiʻi ma luna o ke kāleka. Me ka .card-text
, hiki ke hoʻohui ʻia ke kikokikona i ke kāleka. Hiki ke hoʻopaʻa ʻia nā kikokikona i loko .card-text
me nā hōʻailona HTML maʻamau.
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>
E papa inoa i nā hui
E hana i nā papa inoa o nā maʻiʻo ma kahi kāleka me kahi hui papa inoa flush.
- He mea
- He mea ʻelua
- He mea kolu
<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>
- He mea
- He mea ʻelua
- He mea kolu
<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>
- He mea
- He mea ʻelua
- He mea kolu
<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>
Piko kīhini
Hoʻohui a hoʻohālikelike i nā ʻano ʻike he nui e hana i ke kāleka āu e pono ai, a i ʻole e hoʻolei i nā mea āpau ma laila. Hōʻike ʻia ma lalo nei nā ʻano kiʻi, nā poloka, nā ʻano kikokikona, a me kahi pūʻulu papa inoa—ua wahī ʻia i loko o kahi kāleka ākea paʻa.
Poʻo inoa kāleka
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
- He mea
- He mea ʻelua
- He mea kolu
<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>
Poʻo a me ka wāwae
Hoʻohui i kahi poʻo a/a i ʻole ka wāwae i loko o kahi kāleka.
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
Hiki ke hoʻohālikelike ʻia nā poʻo kāleka ma ka hoʻohui .card-header
ʻana i <h*>
nā mea.
Hōʻike ʻia
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
He ʻōlelo ʻōlelo kaulana, aia i loko o kahi mea 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>
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
Ka nui ana
Manaʻo nā kāleka ʻaʻohe kikoʻī width
e hoʻomaka, no laila e 100% ākea lākou ke ʻole i ʻōlelo ʻia. Hiki iā ʻoe ke hoʻololi i kēia e like me ka mea e pono ai me CSS maʻamau, nā papa grid, grid Sass mixins, a i ʻole nā mea pono.
Ke hoʻohana nei i ka hōʻailona grid
Me ka hoʻohana ʻana i ka mānoanoa, e kāwili i nā kāleka i nā kolamu a me nā lālani e like me ka mea e pono ai.
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahiHana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
Ke hoʻohana nei i nā pono hana
E hoʻohana i kā mākou lima o nā mea pono nui e hoʻonohonoho koke i ka laulā o kahi kāleka.
Poʻo inoa kāleka
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
pihiPoʻo inoa kāleka
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
pihi<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>
Ke hoʻohana nei i ka CSS maʻamau
E hoʻohana i ka CSS maʻamau i kāu pepa style a i ʻole ma ke ʻano inline e hoʻonohonoho i kahi ākea.
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
Hoʻopololei kikokikona
Hiki iā ʻoe ke hoʻololi koke i ka hoʻopololei kikokikona o kēlā me kēia kāleka—ma kona piha a i ʻole nā ʻāpana kikoʻī—me kā mākou papa kuhikuhi kikokikona .
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahiHana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahiHana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
Hoʻokele
Hoʻohui i kekahi hoʻokele i ke poʻo (a i ʻole poloka) o kahi kāleka me nā ʻāpana nav o Bootstrap .
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>
Nā kiʻi
Loaʻa i nā kāleka kekahi mau koho no ka hana ʻana me nā kiʻi. E koho mai ka hoʻopili ʻana i nā "pale kiʻi" ma kēlā me kēia ʻaoʻao o ke kāleka, e uhi ana i nā kiʻi me ka ʻike kāleka, a i ʻole e hoʻokomo wale i ke kiʻi i loko o kahi kāleka.
Nā pāpale kiʻi
E like me nā poʻo a me nā wāwae, hiki i nā kāleka ke hoʻokomo i nā "poʻo kiʻi" ma luna a me lalo - nā kiʻi ma luna a i lalo paha o kahi kāleka.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻohou hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻohou hope ʻia 3 mau minuke aku nei
<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ā uhi kiʻi
E hoʻololi i kahi kiʻi i kāʻei kākiʻi a uhi i ka kikokikona o kāu kāleka. Ma muli o ke kiʻi, pono ʻoe a ʻaʻole pono i nā ʻano a i ʻole nā mea pono.
<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>
Kaupae
Me ka hoʻohana ʻana i ka hui pū ʻana o nā papa kuhikuhi a me nā mea pono, hiki ke hana ʻia nā kāleka ma ke ala paʻa a me ka pane. Ma ka laʻana ma lalo nei, wehe mākou i nā ʻauwaʻa grid .g-0
me ka hoʻohana ʻana i .col-md-*
nā papa e hana i ke kāleka i ka pae i ka md
haki. Pono paha nā hoʻololi hou aʻe ma muli o kāu ʻike kāleka.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻohou hope ʻia 3 mau minuke aku nei
<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>
Nā ʻano kāleka
Loaʻa i nā kāleka nā koho like ʻole no ka hoʻopilikino ʻana i ko lākou ʻaoʻao, nā palena, a me ke kala.
Ka hope a me ke kala
E hoʻohana i ka waihoʻoluʻu kikokikona a me nā pono hana hope e hoʻololi i ke ʻano o kahi kāleka.
Poʻo inoa kāleka mua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lanakila
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka pilikia
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka hōʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka māmā
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻeleʻele
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>
Ka hōʻike ʻana i ka manaʻo i nā ʻenehana kōkua
ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .visually-hidden
papa.
Palena
E hoʻohana i nā pono palena e hoʻololi wale i border-color
ke kāleka. E hoʻomaopopo he hiki iā ʻoe ke kau i .text-{color}
nā papa ma ka makua .card
a i ʻole kahi ʻāpana o nā mea o ke kāleka e like me ka hōʻike ʻana ma lalo nei.
Poʻo inoa kāleka mua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lanakila
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka pilikia
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka hōʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka māmā
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻeleʻele
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>
Mea hoʻohana Mixins
Hiki iā ʻoe ke hoʻololi i nā palena ma ke poʻo kāleka a me ka wāwae e like me ka mea e pono ai, a wehe pū i kā lākou background-color
me .bg-transparent
.
Poʻo inoa kāleka lanakila
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>
Hoʻolālā kāleka
Ma waho aʻe o ka hana ʻana i nā ʻike i loko o nā kāleka, loaʻa iā Bootstrap kekahi mau koho no ka waiho ʻana i nā ʻano kāleka. No ka manawa, ʻaʻole i pane mai kēia mau koho hoʻolālā .
Nā hui kāleka
E hoʻohana i nā hui kāleka e hāʻawi i nā kāleka ma ke ʻano hoʻokahi, i hoʻopili ʻia me nā kolamu like ākea a me ke kiʻekiʻe. Hoʻomaka nā pūʻulu kāleka i hoʻopaʻa ʻia a hoʻohana display: flex;
e hoʻopili ʻia me nā ana like ʻole e hoʻomaka ana ma ka sm
breakpoint.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻohou hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Hoʻohou hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
Hoʻohou hope ʻia 3 mau minuke aku nei
<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>
Ke hoʻohana nei i nā pūʻulu kāleka me nā wāwae wāwae, e laina ʻakomi ko lākou ʻike.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
<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>
Kāleka pahu
E hoʻohana i ka ʻōnaehana mākia Bootstrap a me kāna mau .row-cols
papa e hoʻomalu i ka nui o nā kolamu mānoanoa (i ʻōwili ʻia a puni kāu mau kāleka) āu e hōʻike ai i kēlā me kēia lālani. Eia kekahi laʻana, eia ka .row-cols-1
waiho ʻana i nā kāleka ma ke kolamu hoʻokahi, a .row-cols-md-2
e hoʻokaʻawale i ʻehā kāleka i ka laulā like ma nā lālani he nui, mai ka haʻihaʻi waena.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
<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>
E hoʻololi iā ia .row-cols-3
a ʻike ʻoe i ke kāʻei kāleka ʻehā.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
<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>
Ke makemake ʻoe i ke kiʻekiʻe like, hoʻohui .h-100
i nā kāleka. Inā makemake ʻoe i nā kiʻekiʻe like ma ka paʻamau, hiki iā ʻoe ke hoʻonohonoho $card-height: 100%
iā Sass.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka pōkole kēia.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
<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>
E like me nā hui kāleka, e laina ʻakomi nā wāwae kāleka.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
<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
Ua v4
hoʻohana mākou i kahi ʻenehana CSS wale nō e hoʻohālike i ke ʻano o nā kolamu e like me Masonry , akā hele mai kēia ʻano me nā hopena ʻaoʻao maikaʻi ʻole . Inā makemake ʻoe e loaʻa i kēia ʻano hoʻolālā i loko v5
, hiki iā ʻoe ke hoʻohana i ka plugin Masonry. ʻAʻole hoʻokomo ʻia ʻo Masonry i Bootstrap , akā ua hana mākou i kahi hiʻohiʻona demo e kōkua iā ʻoe e hoʻomaka.
Sass
Nā mea hoʻololi
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;