Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

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.

Lori iwe yi

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 .

Placeholder Image cap
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
html 
<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>

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.
html 
<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ọ
html 
<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.

Placeholder Image cap

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

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

Akojọ awọn ẹgbẹ

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

  • Ohun kan
  • Nkan keji
  • Ohun kẹta
html 
<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>
Afihan
  • Ohun kan
  • Nkan keji
  • Ohun kẹta
html 
<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>
  • Ohun kan
  • Nkan keji
  • Ohun kẹta
Ẹsẹ kaadi
html 
<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>

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.

Placeholder Image cap
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.

  • Ohun kan
  • Nkan keji
  • Ohun kẹta
Ọna asopọ kaadi Miiran ọna asopọ
html 
<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>

Ṣ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
html 
<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
html 
<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ọ

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun
html 
<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>
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
html 
<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
html 
<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
html 
<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
html 
<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
html 
<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>

Ṣ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
html 
<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>
Pataki akọle itọju

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

Lọ ibikan
html 
<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>

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.

Placeholder Image cap
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

Placeholder Image cap
html 
<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>

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.

Placeholder Card image
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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Ṣe akiyesi pe akoonu ko yẹ ki o tobi ju giga ti aworan naa. Ti akoonu ba tobi ju aworan naa akoonu yoo han ni ita aworan naa.

Petele

Lilo apapọ akoj ati awọn kilasi iwulo, awọn kaadi le ṣe petele ni ore-alagbeka ati ọna idahun. Ni apẹẹrẹ ni isalẹ, a yọ awọn gotters akoj pẹlu .g-0ati lo .col-md-*awọn kilasi lati ṣe petele kaadi ni aaye fifọ md. Awọn atunṣe siwaju le nilo da lori akoonu kaadi rẹ.

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

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

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ọ

Fi kun v5.2.0

Ṣeto a background-colorpẹlu itansan iwaju iwaju colorpẹlu awọn .text-bg-{color}oluranlọwọ wa . Ni iṣaaju o nilo lati ṣe alawẹ-meji yiyan rẹ .text-{color}ati .bg-{color}awọn ohun elo fun iselona, ​​eyiti o tun le lo ti o ba fẹ.

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

html 
<div class="card text-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-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-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-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-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-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-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-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 .visually-hiddenkilasi 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
Dark 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.

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

Mixins 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ẹ
html 
<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 bẹrẹ ni tolera ati lo display: flex;lati di asopọ pẹlu awọn iwọn aṣọ ti o bẹrẹ ni aaye smfifọ.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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

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

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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
html 
<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>

Awọn kaadi akoj

Lo eto akoj Bootstrap ati awọn .row-colskilasi rẹ lati ṣakoso iye awọn ọwọn akoj (ti a we ni ayika awọn kaadi rẹ) ti o fihan ni ọna kan. Fun apẹẹrẹ, nibi ti n .row-cols-1gbe awọn kaadi jade lori iwe kan, ati .row-cols-md-2pipin awọn kaadi mẹrin si iwọn dogba kọja awọn ori ila pupọ, lati ibi fifọ alabọde soke.

Placeholder Image cap
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íẹ̀.

Placeholder Image cap
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íẹ̀.

Placeholder Image cap
Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Placeholder Image cap
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íẹ̀.

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

Yipada si .row-cols-3ati pe iwọ yoo rii ipari kaadi kẹrin.

Placeholder Image cap
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íẹ̀.

Placeholder Image cap
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íẹ̀.

Placeholder Image cap
Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Placeholder Image cap
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íẹ̀.

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

Nigba ti o ba nilo dogba iga, fi .h-100si awọn kaadi. Ti o ba fẹ awọn giga dogba nipasẹ aiyipada, o le ṣeto $card-height: 100%ni Sass.

Placeholder Image cap
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íẹ̀.

Placeholder Image cap
Akọle kaadi

Eleyi jẹ kukuru kan kaadi.

Placeholder Image cap
Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Placeholder Image cap
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íẹ̀.

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

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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
html 
<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

Ninu v4a lo ilana CSS-nikan lati farawe ihuwasi ti awọn ọwọn Masonry , ṣugbọn ilana yii wa pẹlu ọpọlọpọ awọn ipa ẹgbẹ ti ko dun . Ti o ba fẹ lati ni iru ifilelẹ yii ninu v5, o le kan lo ohun itanna Masonry. Masonry ko si ninu Bootstrap , ṣugbọn a ti ṣe apẹẹrẹ demo lati ṣe iranlọwọ fun ọ lati bẹrẹ.

CSS

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn àyípadà CSS, àwọn káàdì nísisìyí lo àwọn oniyipada CSS ti agbegbe .cardfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass oniyipada

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;