Քարտեր
Bootstrap-ի քարտերն ապահովում են ճկուն և ընդարձակվող բովանդակության կոնտեյներ՝ բազմաթիվ տարբերակներով և տարբերակներով:
Մասին
Քարտը ճկուն և ընդարձակվող բովանդակության կոնտեյներ է : Այն ներառում է վերնագրերի և ստորագրերի տարբերակներ, բովանդակության լայն տեսականի, համատեքստային ֆոնի գույներ և ցուցադրման հզոր ընտրանքներ: Եթե ծանոթ եք Bootstrap 3-ին, ապա քարտերը փոխարինում են մեր հին վահանակներին, հորերին և մանրապատկերներին: Այդ բաղադրիչների նման ֆունկցիոնալությունը հասանելի է որպես քարտերի մոդիֆիկատորների դասեր:
Օրինակ
Քարտերը կառուցված են հնարավորինս քիչ նշագրումներով և ոճերով, բայց այնուամենայնիվ կարողանում են ապահովել մի տոննա վերահսկողություն և հարմարեցում: Կառուցված flexbox-ով, դրանք առաջարկում են հեշտ դասավորվածություն և լավ խառնվում Bootstrap-ի այլ բաղադրիչների հետ: Նրանք լռելյայն չունեն margin
, ուստի անհրաժեշտության դեպքում օգտագործեք միջակայքի կոմունալ ծառայություններ :
Ստորև բերված է խառը բովանդակությամբ և ֆիքսված լայնությամբ հիմնական քարտի օրինակ: Քարտերը մեկնարկելու համար ֆիքսված լայնություն չունեն, ուստի դրանք բնականաբար կլցնեն դրա մայր տարրի ամբողջ լայնությունը: Սա հեշտությամբ հարմարեցվում է մեր տարբեր չափերի ընտրանքներով :
Քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Գնացեք ինչ-որ տեղ<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>
Բովանդակության տեսակները
Քարտերը աջակցում են բովանդակության լայն տեսականի, ներառյալ պատկերներ, տեքստ, ցուցակների խմբեր, հղումներ և այլն: Ստորև բերված են աջակցվողի օրինակներ:
Մարմին
Քարտի շինանյութը .card-body
. Օգտագործեք այն ամեն անգամ, երբ ձեզ անհրաժեշտ է քարտի մեջ ներդիր հատված:
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Վերնագրեր, տեքստ և հղումներ
Քարտի անվանումներն օգտագործվում են պիտակի վրա ավելացնելու .card-title
միջոցով : <h*>
Նույն կերպ հղումներն ավելացվում և տեղադրվում են միմյանց կողքին՝ ավելացնելով .card-link
պիտակին <a>
։
Ենթագրերն օգտագործվում են պիտակի .card-subtitle
վրա a ավելացնելով: <h*>
Եթե .card-title
և .card-subtitle
տարրերը տեղադրվում են որևէ .card-body
տարրի մեջ, ապա քարտի վերնագիրը և ենթավերնագիրը լավ հավասարեցված են:
Քարտի անվանումը
Քարտի ենթավերնագիր
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Քարտի հղում Մեկ այլ հղում<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>
Պատկերներ
.card-img-top
տեղադրում է պատկերը քարտի վերևում: -ի միջոցով տեքստը կարող է .card-text
ավելացվել քարտին: Ներքին տեքստը .card-text
կարող է նաև ձևավորվել ստանդարտ 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>
Թվարկեք խմբերը
Ստեղծեք բովանդակության ցուցակներ քարտի մեջ՝ flush list խմբով:
- Մի իր
- Երկրորդ կետ
- Երրորդ կետ
<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>
- Մի իր
- Երկրորդ կետ
- Երրորդ կետ
<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>
- Մի իր
- Երկրորդ կետ
- Երրորդ կետ
<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>
Խոհանոցի լվացարան
Խառնեք և համապատասխանեցրեք բազմաթիվ բովանդակության տեսակներ՝ ձեզ անհրաժեշտ քարտը ստեղծելու համար կամ ամեն ինչ այնտեղ գցեք: Ստորև ներկայացված են պատկերների ոճերը, բլոկները, տեքստի ոճերը և ցուցակի խումբը, որոնք բոլորը փաթաթված են ֆիքսված լայնությամբ քարտով:
Քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
- Մի իր
- Երկրորդ կետ
- Երրորդ կետ
<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>
Վերնագիր և ստորագիր
Քարտի մեջ ավելացրեք կամընտիր վերնագիր և/կամ ստորագիր:
Հատուկ վերնագրի բուժում
Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Գնացեք ինչ-որ տեղ<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>
Քարտի վերնագրերը կարելի է ոճավորել՝ ավելացնելով .card-header
տարրերին <h*>
:
Հատկանշված
Հատուկ վերնագրի բուժում
Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Գնացեք ինչ-որ տեղ<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>
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
<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>
Հատուկ վերնագրի բուժում
Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Գնացեք ինչ-որ տեղ<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>
Չափսերը
Քարտերը չեն ենթադրում հատուկ width
մեկնարկի համար, ուստի դրանք 100% լայնություն կունենան, եթե այլ բան նշված չէ: Դուք կարող եք դա փոխել ըստ անհրաժեշտության՝ հատուկ CSS-ի, ցանցային դասերի, grid Sass միքսների կամ կոմունալ ծրագրերի միջոցով:
Ցանցային նշումների օգտագործումը
Օգտագործելով ցանցը, անհրաժեշտության դեպքում քարտերը փաթեթավորեք սյունակներում և տողերում:
Հատուկ վերնագրի բուժում
Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Գնացեք ինչ-որ տեղՀատուկ վերնագրի բուժում
Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Գնացեք ինչ-որ տեղ<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>
Օգտագործելով կոմունալ ծառայություններ
Քարտի լայնությունը արագ սահմանելու համար օգտագործեք մեր մի քանի մատչելի չափի կոմունալ ծառայություններ :
<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>
Օգտագործելով հատուկ CSS
Օգտագործեք հատուկ CSS ձեր ոճաթերթերում կամ որպես ներկառուցված ոճեր՝ լայնությունը սահմանելու համար:
Հատուկ վերնագրի բուժում
Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Գնացեք ինչ-որ տեղ<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" 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>
Նավիգացիա
Ավելացրեք որոշակի նավարկություն քարտի վերնագրին (կամ բլոկին) 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">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">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>
Պատկերներ
Քարտերը ներառում են պատկերների հետ աշխատելու մի քանի տարբերակներ: Ընտրեք քարտի երկու ծայրերում «պատկերի գլխարկներ» ավելացնելուց, քարտի բովանդակությամբ պատկերները ծածկելուց կամ պարզապես պատկերը քարտի մեջ զետեղելուց:
Պատկերի գլխարկներ
Վերնագրերի և ստորագրերի նման, քարտերը կարող են ներառել վերևի և ներքևի «պատկերի գլխարկներ»՝ քարտի վերևի կամ ներքևի պատկերներ:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
<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>
Պատկերի ծածկույթներ
Պատկերը դարձրեք քարտի ֆոն և ծածկեք ձեր քարտի տեքստը: Կախված պատկերից, ձեզ կարող են անհրաժեշտ լինել կամ չպահանջել լրացուցիչ ոճեր կամ կոմունալ ծառայություններ:
<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>
Հորիզոնական
Օգտագործելով ցանցի և օգտակար դասերի համակցությունը, քարտերը կարող են հորիզոնական լինել շարժական սարքերի համար հարմար և արձագանքող եղանակով: Ստորև բերված օրինակում մենք հեռացնում ենք ցանցի հեղեղատարները .no-gutters
և օգտագործում .col-md-*
դասեր՝ քարտը ճեղքման կետում հորիզոնական դարձնելու համար md
: Կախված ձեր քարտի բովանդակությունից, կարող են անհրաժեշտ լինել լրացուցիչ ճշգրտումներ:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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>
Քարտի ոճերը
Քարտերը ներառում են տարբեր տարբերակներ՝ դրանց ֆոնը, եզրագծերը և գույնը հարմարեցնելու համար:
Նախապատմություն և գույն
Քարտի տեսքը փոխելու համար օգտագործեք տեքստային և ֆոնային կոմունալ ծառայություններ :
Հիմնական քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Երկրորդական քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Հաջողության քարտի վերնագիր
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Վտանգավոր քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Զգուշացման քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Տեղեկաքարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Թեթև բացիկի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Մուգ քարտի վերնագիր
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
<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>
Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը
Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .sr-only
դասի հետ թաքցված լրացուցիչ տեքստը:
Սահման
Օգտագործեք սահմանային կոմունալ ծառայություններ ՝ միայն քարտի քարտը փոխելու համար border-color
: Նկատի ունեցեք, որ դուք կարող եք .text-{color}
դասեր տեղադրել ծնողի .card
կամ քարտի բովանդակության ենթաբազմության վրա, ինչպես ցույց է տրված ստորև:
Հիմնական քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Երկրորդական քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Հաջողության քարտի վերնագիր
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Վտանգավոր քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Զգուշացման քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Տեղեկաքարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Թեթև բացիկի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Մուգ քարտի վերնագիր
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
<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>
Խառնում է կոմունալ ծառայությունները
Կարելի է նաև փոխել քարտի վերնագրի և ստորագրի եզրագծերը, ինչպես նաև անհրաժեշտության դեպքում, և նույնիսկ հեռացնել background-color
դրանք .bg-transparent
.
Հաջողության քարտի վերնագիր
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
<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>
Քարտի դասավորությունը
Բացի քարտերի ներսում բովանդակությունը ձևավորելուց, Bootstrap-ը ներառում է քարտերի շարքի տեղադրման մի քանի տարբերակներ: Առայժմ դասավորության այս տարբերակները դեռ չեն արձագանքում :
Քարտերի խմբեր
Օգտագործեք քարտերի խմբերը՝ քարտերը որպես մեկ, կցված տարր՝ հավասար լայնությամբ և բարձրությամբ սյունակներով: Քարտերի խմբերը սկսում են կուտակված և օգտագործվում display: flex;
են միատեսակ չափսերով միանալու համար՝ սկսած sm
ընդմիջման կետից:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Քարտի անվանումը
Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
<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>
Ստորագրություններով քարտերի խմբեր օգտագործելիս դրանց բովանդակությունը ավտոմատ կերպով կհամապատասխանի:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:
<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>
Քարտի տախտակամածներ
Ձեզ անհրաժեշտ է հավասար լայնության և բարձրության քարտերի հավաքածու, որոնք կցված չեն միմյանց: Օգտագործեք քարտերի տախտակամածներ:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Քարտի անվանումը
Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
<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>
Ինչպես քարտերի խմբերի դեպքում, տախտակամածներում քարտի էջատակերը ինքնաբերաբար կշարվեն:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:
Քարտի անվանումը
Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:
<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>
Ցանցային քարտեր
Օգտագործեք Bootstrap ցանցային համակարգը և դրա .row-cols
դասերը ՝ վերահսկելու համար, թե քանի ցանցի սյունակ (փաթաթված ձեր քարտերի շուրջ) յուրաքանչյուր տողում: Օրինակ, ահա .row-cols-1
քարտերը մեկ սյունակի վրա դնելը և .row-cols-md-2
չորս քարտերը հավասար լայնության բաժանել մի քանի տողերի վրա՝ միջին ընդմիջման կետից վեր:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
<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>
Փոխեք այն .row-cols-3
և կտեսնեք չորրորդ քարտի փաթեթավորումը:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
<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>
Երբ ձեզ անհրաժեշտ է հավասար բարձրություն, ավելացրեք .h-100
քարտերին: Եթե ցանկանում եք լռելյայն հավասար բարձրություններ, կարող եք սահմանել $card-height: 100%
Sass-ում:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Քարտի անվանումը
Սա կարճ քարտ է:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:
Քարտի անվանումը
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
<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>
Քարտի սյունակներ
Քարտերը կարելի է կազմակերպել որմնադրությանը նմանվող սյունակներում՝ պարզապես CSS-ով՝ դրանք փաթաթելով .card-columns
: Քարտերը կառուցված են column
Flexbox-ի փոխարեն CSS հատկություններով՝ ավելի հեշտ դասավորելու համար: Քարտերը պատվիրվում են վերևից ներքև և ձախից աջ:
Գլուխը վեր Քարտի սյունակներով ձեր վազքը կարող է տարբեր լինել: Որպեսզի քարտերը սյունակներում կոտրվեն, մենք պետք է դրանք սահմանենք, display: inline-block
քանի column-break-inside: avoid
որ դեռևս զրահապատ լուծում չէ:
Քարտի վերնագիր, որը փաթաթվում է նոր տողով
Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
Քարտի անվանումը
Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
Քարտի անվանումը
Այս քարտը ունի սովորական վերնագիր և տեքստի կարճ պարբերություն դրա տակ:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
Քարտի անվանումը
Սա ևս մեկ բացիկ է՝ ստորև վերնագրով և օժանդակ տեքստով: Այս քարտն ունի որոշ լրացուցիչ բովանդակություն՝ այն ընդհանուր առմամբ մի փոքր ավելի բարձր դարձնելու համար:
Վերջին անգամ թարմացվել է 3 րոպե առաջ
<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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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>
Քարտի սյունակները կարող են նաև ընդլայնվել և հարմարեցվել որոշ լրացուցիչ կոդով: Ստորև ներկայացված է .card-columns
դասի ընդլայնումը՝ օգտագործելով նույն CSS-ը, որը մենք օգտագործում ենք՝ CSS սյունակները՝ սյունակների քանակը փոխելու համար պատասխանատու մակարդակների մի շարք ստեղծելու համար:
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}