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 margino 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 class="card-img-top" src="..." alt="Card image cap">
  <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 kahi kāleka 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.

He kikokikona kēia i loko o ke kino 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 ka .card-titlea me nā .card-subtitlemea i loko o kahi .card-bodymea, ua align maikaʻi ʻia ke poʻo 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-topkau 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-textme 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 class="card-img-top" src="..." alt="Card image cap">
  <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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum a me ka eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Hōʻike ʻia

Cras justo odio
Dapibus ac facilisis in
Vestibulum a me ka eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum a me ka eros

loulou kāleka ʻO kekahi loulou

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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.

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">
  <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>

Kuhikuhi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kekahi mea kaulana ma Source Title

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

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

2 lā aku nei

<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ʻī widthe 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 kahi

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="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 lima o nā mea hoʻohana 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.

pihi

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.

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 kahi

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

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>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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" 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="#">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" href="#">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ʻopuka 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ʻopuka hope ʻia 3 mau minuke aku nei

<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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.

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ʻopuka hope ʻia 3 mau minuke aku nei

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

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 kikokikona a me nā pono hana hope e hoʻololi i ke ʻano o kahi kāleka.

Poʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Ka lawe ʻ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 ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo 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 .sr-onlypapa.

Palena

E hoʻohana i nā pono palena e hoʻololi wale i border-colorke kāleka. E hoʻomaopopo he hiki iā ʻoe ke kau i .text-{color}nā papa ma ka makua .carda i ʻole kahi ʻāpana o nā mea o ke kāleka e like me ka hōʻike ʻana ma lalo nei.

Poʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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ʻomanaʻo

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 text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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-colorme .bg-transparent.

Poʻomanaʻo

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.

wāwae wāwae

<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ʻohana nā pūʻulu kāleka display: flex;e hoʻokō i kā lākou nui like ʻole.

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ʻopuka 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ʻopuka 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ʻopuka hope ʻia 3 mau minuke aku nei

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

Hoʻopuka 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ʻopuka hope ʻia 3 mau minuke aku nei

Poʻo inoa kāleka

Hoʻopuka hope ʻia 3 mau minuke aku nei

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Nā papa kāleka

Makemake ʻoe i nā kāleka laulā like ʻole a me ke kiʻekiʻe i pili ʻole kekahi i kekahi? E hoʻohana i nā kāleka kāleka.

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.

Hoʻopuka 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ʻopuka hope ʻia 3 mau minuke aku nei

Poʻo inoa kāleka

Hoʻopuka hope ʻia 3 mau minuke aku nei

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

E like me nā pūʻulu kāleka, e laina ʻakomi nā wāwae kāleka i nā papa.

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ʻopuka 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ʻopuka hope ʻia 3 mau minuke aku nei

Poʻo inoa kāleka

Hoʻopuka hope ʻia 3 mau minuke aku nei

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Nā kolamu kāleka

Hiki ke hoʻonohonoho ʻia nā kāleka i loko o nā kolamu e like me Masonry me CSS wale nō ma ke kāʻei ʻana iā lākou i .card-columns. Hoʻokumu ʻia nā kāleka me columnnā waiwai CSS ma kahi o ka flexbox no ka maʻalahi o ka alignment. Kauoha ʻia nā kāleka mai luna a lalo a hema a ʻākau.

Nā poʻo i luna! Hiki ke ʻokoʻa kāu mile mile me nā kolamu kāleka. I mea e pale aku ai i ka haki ʻana o nā kāleka ma nā kolamu, pono mākou e hoʻonoho iā lākou no display: inline-blockka mea column-break-inside: avoidʻaʻole ia he hopena pale pōkā.

Poʻo inoa kāleka e hoʻopili ana i kahi laina hou

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kekahi mea kaulana ma Source Title

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ʻopuka hope ʻia 3 mau minuke aku nei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Kekahi mea kaulana ma Source Title

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ʻopuka hope ʻia 3 mau minuke aku nei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kekahi mea kaulana ma Source Title

Poʻo inoa kāleka

Hoʻopuka hope ʻia 3 mau minuke aku nei

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has 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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

Hiki ke hoʻonui a hoʻopilikino ʻia nā kolamu kāleka me kekahi code hou. Hōʻike ʻia ma lalo kahi hoʻonui o ka .card-columnspapa e hoʻohana ana i ka CSS like a mākou e hoʻohana ai—nā kolamu CSS—e hana i kahi pūʻulu o nā pae pane no ka hoʻololi ʻana i ka helu o nā kolamu.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Kāleka

E pili ana

Laʻana

Poʻo inoa kāleka

ʻAno maʻiʻo

Kino

Poʻo inoa, kikokikona, a me nā loulou

Poʻo inoa kāleka

Kāleka subtitle

Nā kiʻi

E papa inoa i nā hui

Piko kīhini

Poʻo inoa kāleka

Poʻo a me ka wāwae

Hana inoa kūikawā

Hōʻike ʻia

Hana inoa kūikawā

Hana inoa kūikawā

Ka nui ana

Ke hoʻohana nei i ka hōʻailona grid

Hana inoa kūikawā

Hana inoa kūikawā

Ke hoʻohana nei i nā pono hana

Poʻo inoa kāleka

Poʻo inoa kāleka

Ke hoʻohana nei i ka CSS maʻamau

Hana inoa kūikawā

Hoʻopololei kikokikona

Hana inoa kūikawā

Hana inoa kūikawā

Hana inoa kūikawā

Hoʻokele

Hana inoa kūikawā

Hana inoa kūikawā

Nā kiʻi

Nā pāpale kiʻi

Poʻo inoa kāleka

Poʻo inoa kāleka

Nā uhi kiʻi

Poʻo inoa kāleka

Nā ʻano kāleka

Ka hope a me ke kala

Poʻo inoa kāleka mua

Poʻo inoa kāleka lua

Poʻo inoa kāleka lanakila

Poʻo inoa kāleka pilikia

Poʻo inoa kāleka hōʻike

Poʻo inoa kāleka ʻike

Poʻo inoa kāleka māmā

Poʻo inoa kāleka ʻeleʻele

Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

Palena

Poʻo inoa kāleka mua

Poʻo inoa kāleka lua

Poʻo inoa kāleka lanakila

Poʻo inoa kāleka pilikia

Poʻo inoa kāleka hōʻike

Poʻo inoa kāleka ʻike

Poʻo inoa kāleka māmā

Poʻo inoa kāleka ʻeleʻele

Mea hoʻohana Mixins

Poʻo inoa kāleka lanakila

Hoʻolālā kāleka

Nā hui kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Nā papa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Poʻo inoa kāleka

Nā kolamu kāleka

Poʻo inoa kāleka e hoʻopili ana i kahi laina hou

Poʻo inoa kāleka