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 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.
<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 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.
- 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>- 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
<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">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.
<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
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante.
<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><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.
<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.
<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.
<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 .
<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>Lilọ kiri
Ṣafikun diẹ ninu lilọ kiri si akọsori kaadi (tabi bulọki) pẹlu awọn paati nav Bootstrap .
<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>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 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-top" 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.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>Ṣ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 .no-guttersati 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ẹ.
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" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" 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ọ
Lo ọrọ ati awọn ohun elo abẹlẹ lati yi irisi kaadi pada.
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ọ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ọ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ọ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ọ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ọ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.
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.
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.
<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ọ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ọ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ọ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ọ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ọ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ọ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.
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.
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.
<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ọ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.
<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 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.
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íẹ̀.
Akọle kaadi
Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu 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. Kaadi yii paapaa ni akoonu to gun ju ti akọkọ lọ lati ṣafihan iṣẹ giga dogba yẹn.
<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 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
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-deck">
<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>
<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>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íẹ̀.
Akọle kaadi
Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu 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. Kaadi yii paapaa ni akoonu to gun ju ti akọkọ lọ lati ṣafihan iṣẹ giga dogba yẹn.
<div class="card-deck">
<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.
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íẹ̀.
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íẹ̀.
Akọle kaadi
Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.
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íẹ̀.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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.
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íẹ̀.
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íẹ̀.
Akọle kaadi
Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.
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íẹ̀.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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.
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íẹ̀.
Akọle kaadi
Eleyi jẹ kukuru kan kaadi.
Akọle kaadi
Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.
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íẹ̀.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>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 CSS column-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.
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.
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.
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 src="..." class="card-img-top" alt="...">
<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 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 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 text-white">
<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 src="..." class="card-img-top" alt="...">
</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;
}
}