Awọn kaadi

Awọn kaadi Bootstrap n pese eiyan akoonu to rọ ati extensible pẹlu ọpọlọpọ awọn iyatọ ati awọn aṣayan.

Nipa

Kaadi jẹ eiyan akoonu to rọ ati extensible. O pẹlu awọn aṣayan fun awọn akọsori ati awọn ẹlẹsẹ, akoonu lọpọlọpọ, awọn awọ abẹlẹ ayika, ati awọn aṣayan ifihan agbara. Ti o ba faramọ pẹlu Bootstrap 3, awọn kaadi rọpo awọn panẹli atijọ wa, awọn kanga, ati eekanna atanpako. Išẹ ti o jọra si awọn paati yẹn wa bi awọn kilasi modifier fun awọn kaadi.

Apeere

Awọn kaadi ti wa ni itumọ ti pẹlu bi kekere siṣamisi ati awọn aza bi o ti ṣee, sugbon si tun ṣakoso awọn lati fi kan pupọ ti Iṣakoso ati isọdi. Ti a ṣe pẹlu flexbox, wọn funni ni titete irọrun ati dapọ daradara pẹlu awọn paati Bootstrap miiran. Wọn ko ni marginnipasẹ aiyipada, nitorina lo awọn ohun elo aye bi o ṣe nilo.

Ni isalẹ jẹ apẹẹrẹ ti kaadi ipilẹ pẹlu akoonu adalu ati iwọn ti o wa titi. Awọn kaadi ko ni iwọn ti o wa titi lati bẹrẹ, nitorinaa wọn yoo kun nipa ti ara ni kikun iwọn ti ẹya obi rẹ. Eyi jẹ adani ni irọrun pẹlu ọpọlọpọ awọn aṣayan iwọn wa .

Akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Lọ ibikan

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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>

Awọn iru akoonu

Awọn kaadi ṣe atilẹyin fun ọpọlọpọ akoonu, pẹlu awọn aworan, ọrọ, awọn ẹgbẹ atokọ, awọn ọna asopọ, ati diẹ sii. Ni isalẹ wa ni awọn apẹẹrẹ ti ohun ti o ṣe atilẹyin.

Ara

Awọn ile Àkọsílẹ ti a kaadi ni awọn .card-body. Lo nigbakugba ti o nilo apakan fifẹ laarin kaadi kan.

Eleyi jẹ diẹ ninu awọn ọrọ laarin a kaadi ara.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Awọn akọle, ọrọ, ati awọn ọna asopọ

Awọn akọle kaadi jẹ lilo nipasẹ fifi kun .card-titlesi <h*>tag. Ni ọna kanna, awọn ọna asopọ ti wa ni afikun ati gbe si ara wọn nipa fifi aami .card-linksi <a>.

Awọn atunkọ jẹ lilo nipa fifi aami kan .card-subtitlekun <h*>. Ti o ba ti gbe .card-titleati awọn .card-subtitleohun kan sinu .card-bodyohun kan, akọle kaadi ati atunkọ ti wa ni ibamu daradara.

Akọle kaadi

Itumọ kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Ọna asopọ kaadi Miiran ọna asopọ

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

Awọn aworan

.card-img-topgbe aworan kan si oke kaadi naa. Pẹlu .card-text, ọrọ le ti wa ni afikun si kaadi. Ọrọ laarin .card-texttun le ṣe aṣa pẹlu awọn afi HTML boṣewa.

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Akojọ awọn ẹgbẹ

Ṣẹda awọn atokọ ti akoonu ninu kaadi pẹlu ẹgbẹ atokọ ṣiṣan.

Cras justo odio
Dapibus ac facilisis in
Vestibulum ati 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>

Afihan

Cras justo odio
Dapibus ac facilisis in
Vestibulum ati 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>

Idana ifọwọ

Darapọ ki o baramu awọn oriṣi akoonu lọpọlọpọ lati ṣẹda kaadi ti o nilo, tabi jabọ ohun gbogbo sinu ibẹ. Ti o han ni isalẹ jẹ awọn ara aworan, awọn bulọọki, awọn ọna ọrọ, ati ẹgbẹ atokọ kan — gbogbo wọn ti a we sinu kaadi iwọn ti o wa titi.

Akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Cras justo odio
Dapibus ac facilisis in
Vestibulum ati eros

Ọna asopọ kaadi Miiran ọna asopọ

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Akọsori ati ẹlẹsẹ

Ṣafikun akọsori yiyan ati/tabi ẹlẹsẹ laarin kaadi kan.

Afihan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Awọn akọle kaadi le jẹ aṣa nipasẹ fifi kun .card-headersi <h*>awọn eroja.

Afihan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Sọ

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

Ẹnikan olokiki ni Akọle Orisun

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

Afihan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

2 ọjọ seyin

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

Titobi

Awọn kaadi ro pe ko si ni pato widthlati bẹrẹ, nitorinaa wọn yoo jẹ 100% fife ayafi ti bibẹẹkọ ti sọ. O le yi eyi pada bi o ṣe nilo pẹlu aṣa CSS, awọn kilasi grid, grid Sass mixins, tabi awọn ohun elo.

Lilo aami akoj

Lilo akoj, fi ipari si awọn kaadi ni awọn ọwọn ati awọn ori ila bi o ṣe nilo.

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Lilo awọn ohun elo

Lo ọwọ wa ti awọn ohun elo iwọn to wa lati ṣeto iwọn kaadi ni kiakia.

Akọle kaadi

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Bọtini

Akọle kaadi

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Bọtini

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

Lilo aṣa CSS

Lo CSS ti aṣa ninu awọn iwe ara rẹ tabi bi awọn ara laini lati ṣeto iwọn kan.

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Titete ọrọ

O le yara yi titete ọrọ ti kaadi eyikeyi pada — ni odindi rẹ tabi awọn apakan kan pato — pẹlu awọn kilasi titọ ọrọ ọrọ wa .

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Ṣafikun diẹ ninu lilọ kiri si akọsori kaadi (tabi bulọki) pẹlu awọn paati nav Bootstrap .

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

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

Awọn aworan

Awọn kaadi pẹlu awọn aṣayan diẹ fun ṣiṣẹ pẹlu awọn aworan. Yan lati fikun “awọn fila aworan” ni boya opin kaadi kan, awọn aworan bò pẹlu akoonu kaadi, tabi nirọrun fifi aworan naa sinu kaadi kan.

Awọn bọtini aworan

Gegebi awọn akọle ati awọn ẹlẹsẹ, awọn kaadi le pẹlu oke ati isalẹ "awọn bọtini aworan" -awọn aworan ni oke tabi isalẹ ti kaadi kan.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

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

Awọn agbekọja aworan

Yi aworan pada si ipilẹ kaadi ki o bo ọrọ kaadi rẹ. Da lori aworan naa, o le tabi ko le nilo awọn aza tabi awọn ohun elo afikun.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

Kaadi aza

Awọn kaadi pẹlu awọn aṣayan oriṣiriṣi fun isọdi awọn ẹhin wọn, awọn aala, ati awọ.

Background ati awọ

Lo ọrọ ati awọn ohun elo abẹlẹ lati yi irisi kaadi pada.

Akọsori

Akọle kaadi akọkọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Atẹle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi aseyori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi ewu

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Ikilọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Alaye

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Ina kaadi akọle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Dudu akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

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

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-onlykilasi naa.

Aala

Lo awọn ohun elo aala lati yi border-colorkaadi nikan pada. Ṣe akiyesi pe o le fi .text-{color}awọn kilasi sori obi .cardtabi ipin ti awọn akoonu kaadi bi o ti han ni isalẹ.

Akọsori

Akọle kaadi akọkọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Atẹle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi aseyori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi ewu

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Ikilọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Alaye

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Ina kaadi akọle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Dudu akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins igbesi

O tun le yi awọn aala lori akọsori kaadi ati ẹlẹsẹ bi o ti nilo, ati paapaa yọ wọn kuro background-colorpẹlu .bg-transparent.

Akọsori

Akọle kaadi aseyori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Ẹlẹsẹ

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

Ifilelẹ kaadi

Ni afikun si aṣa akoonu laarin awọn kaadi, Bootstrap pẹlu awọn aṣayan diẹ fun tito lẹsẹsẹ awọn kaadi. Fun akoko yii, awọn aṣayan ifilelẹ wọnyi ko ti ṣe idahun .

Awọn ẹgbẹ kaadi

Lo awọn ẹgbẹ kaadi fun a mu awọn kaadi bi a nikan, so ano pẹlu dogba iwọn ati ki o iga ọwọn. Awọn ẹgbẹ kaadi lo display: flex;lati ṣaṣeyọri iwọn aṣọ wọn.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Kaadi yii paapaa ni akoonu to gun ju ti akọkọ lọ lati ṣafihan iṣẹ giga dogba yẹn.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Nigbati o ba nlo awọn ẹgbẹ kaadi pẹlu awọn ẹlẹsẹ, akoonu wọn yoo laini laifọwọyi.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Awọn deki kaadi

Nilo kan ti ṣeto iwọn dogba ati awọn kaadi iga ti o ko ba wa ni so si ọkan miiran? Lo awọn deki kaadi.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

Gẹgẹ bi pẹlu awọn ẹgbẹ kaadi, awọn ẹlẹsẹ kaadi ni awọn deki yoo laini laifọwọyi.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Awọn ọwọn kaadi

Awọn kaadi le ti wa ni ṣeto sinu Masonry - like ọwọn pẹlu kan CSS nipa yiyi wọn sinu .card-columns. Awọn kaadi ti wa ni itumọ ti pẹlu CSScolumn -ini dipo ti flexbox fun rọrun titete. Awọn kaadi ti wa ni pase lati oke si isalẹ ati osi si otun.

Efeti sile! Ijinna rẹ pẹlu awọn ọwọn kaadi le yatọ. Lati yago fun awọn kaadi fifọ kọja awọn ọwọn, a gbọdọ ṣeto wọn si display: inline-blockbi column-break-inside: avoidkii ṣe ojutu ọta ibọn sibẹsibẹ.

Kaadi akọle ti o murasilẹ si titun kan ila

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

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

Ẹnikan olokiki ni Akọle Orisun

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

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

Ẹnikan olokiki ni Akọle Orisun

Akọle kaadi

Kaadi yii ni akọle deede ati paragirafi kukuru ti ọrọ ni isalẹ rẹ.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

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

Ẹnikan olokiki ni Akọle Orisun

Akọle kaadi

Eyi jẹ kaadi miiran pẹlu akọle ati ọrọ atilẹyin ni isalẹ. Kaadi yii ni diẹ ninu akoonu afikun lati jẹ ki o ga ni apapọ.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" 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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kaadi ọwọn le tun ti wa ni tesiwaju ati ki o adani pẹlu diẹ ninu awọn afikun koodu. Ti o han ni isalẹ jẹ itẹsiwaju ti .card-columnskilasi ni lilo CSS kanna ti a nlo — awọn ọwọn CSS — lati ṣe agbekalẹ akojọpọ awọn ipele idahun fun iyipada nọmba awọn ọwọn.

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

Awọn kaadi

Nipa

Apeere

Akọle kaadi

Awọn iru akoonu

Ara

Awọn akọle, ọrọ, ati awọn ọna asopọ

Akọle kaadi

Itumọ kaadi

Awọn aworan

Akojọ awọn ẹgbẹ

Idana ifọwọ

Akọle kaadi

Akọsori ati ẹlẹsẹ

Pataki akọle itọju

Afihan

Pataki akọle itọju

Pataki akọle itọju

Titobi

Lilo aami akoj

Pataki akọle itọju

Pataki akọle itọju

Lilo awọn ohun elo

Akọle kaadi

Akọle kaadi

Lilo aṣa CSS

Pataki akọle itọju

Titete ọrọ

Pataki akọle itọju

Pataki akọle itọju

Pataki akọle itọju

Lilọ kiri

Pataki akọle itọju

Pataki akọle itọju

Awọn aworan

Awọn bọtini aworan

Akọle kaadi

Akọle kaadi

Awọn agbekọja aworan

Akọle kaadi

Kaadi aza

Background ati awọ

Akọle kaadi akọkọ

Akọle kaadi Atẹle

Akọle kaadi aseyori

Akọle kaadi ewu

Akọle kaadi Ikilọ

Akọle kaadi Alaye

Ina kaadi akọle

Dudu akọle kaadi

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Aala

Akọle kaadi akọkọ

Akọle kaadi Atẹle

Akọle kaadi aseyori

Akọle kaadi ewu

Akọle kaadi Ikilọ

Akọle kaadi Alaye

Ina kaadi akọle

Dudu akọle kaadi

Mixins igbesi

Akọle kaadi aseyori

Ifilelẹ kaadi

Awọn ẹgbẹ kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Awọn deki kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Awọn ọwọn kaadi

Kaadi akọle ti o murasilẹ si titun kan ila

Akọle kaadi