Source

Քարտեր

Bootstrap-ի քարտերն ապահովում են ճկուն և ընդարձակվող բովանդակության կոնտեյներ՝ բազմաթիվ տարբերակներով և տարբերակներով:

Մասին

Քարտը ճկուն և ընդարձակվող բովանդակության կոնտեյներ է : Այն ներառում է վերնագրերի և ստորագրերի տարբերակներ, բովանդակության լայն տեսականի, համատեքստային ֆոնի գույներ և ցուցադրման հզոր ընտրանքներ: Եթե ​​ծանոթ եք Bootstrap 3-ին, ապա քարտերը փոխարինում են մեր հին վահանակներին, հորերին և մանրապատկերներին: Այդ բաղադրիչների նման ֆունկցիոնալությունը հասանելի է որպես քարտերի մոդիֆիկատորների դասեր:

Օրինակ

Քարտերը կառուցված են հնարավորինս քիչ նշագրումներով և ոճերով, բայց այնուամենայնիվ կարողանում են ապահովել մի տոննա վերահսկողություն և հարմարեցում: Կառուցված flexbox-ով, դրանք առաջարկում են հեշտ դասավորվածություն և լավ խառնվում Bootstrap-ի այլ բաղադրիչների հետ: Նրանք լռելյայն չունեն margin, ուստի անհրաժեշտության դեպքում օգտագործեք միջակայքի կոմունալ ծառայություններ :

Ստորև բերված է խառը բովանդակությամբ և ֆիքսված լայնությամբ հիմնական քարտի օրինակ: Քարտերը մեկնարկելու համար ֆիքսված լայնություն չունեն, ուստի դրանք բնականաբար կլցնեն դրա մայր տարրի ամբողջ լայնությունը: Սա հեշտությամբ հարմարեցվում է մեր տարբեր չափերի ընտրանքներով :

Placeholder Image cap
Քարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Գնացեք ինչ-որ տեղ
<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 թեգերով:

Placeholder Image cap

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

<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 խմբով:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Վեստիբուլում և էրոս
<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
  • Վեստիբուլում և էրոս
<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>

Խոհանոցի լվացարան

Խառնեք և համապատասխանեցրեք բազմաթիվ բովանդակության տեսակներ՝ ձեզ անհրաժեշտ քարտը ստեղծելու համար կամ ամեն ինչ այնտեղ գցեք: Ստորև ներկայացված են պատկերների ոճերը, բլոկները, տեքստի ոճերը և ցուցակի խումբը, որոնք բոլորը փաթաթված են ֆիքսված լայնությամբ քարտով:

Placeholder Image cap
Քարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Վեստիբուլում և էրոս
<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>

Քարտի մեջ ավելացրեք կամընտիր վերնագիր և/կամ ստորագիր:

Հատկանշված
Հատուկ վերնագրի բուժում

Ստորև բերված օժանդակ տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր:

Գնացեք ինչ-որ տեղ
<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>
Մեջբերում

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը 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>

Չափսերը

Քարտերը չեն ենթադրում հատուկ 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" 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>

Պատկերներ

Քարտերը ներառում են պատկերների հետ աշխատելու մի քանի տարբերակներ: Ընտրեք քարտի երկու ծայրերում «պատկերի գլխարկներ» ավելացնելուց, քարտի բովանդակությամբ պատկերները ծածկելուց կամ պարզապես պատկերը քարտի մեջ զետեղելուց:

Պատկերի գլխարկներ

Վերնագրերի և ստորագրերի նման, քարտերը կարող են ներառել վերևի և ներքևի «պատկերի գլխարկներ»՝ քարտի վերևի կամ ներքևի պատկերներ:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

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

Պատկերի ծածկույթներ

Պատկերը դարձրեք քարտի ֆոն և ծածկեք ձեր քարտի տեքստը: Կախված պատկերից, ձեզ կարող են անհրաժեշտ լինել կամ չպահանջել լրացուցիչ ոճեր կամ կոմունալ ծառայություններ:

Placeholder Card image
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

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

Նկատի ունեցեք, որ բովանդակությունը չպետք է լինի ավելի մեծ, քան պատկերի բարձրությունը: Եթե ​​բովանդակությունը պատկերից մեծ է, բովանդակությունը կցուցադրվի պատկերից դուրս:

Քարտի ոճերը

Քարտերը ներառում են տարբեր տարբերակներ՝ դրանց ֆոնը, եզրագծերը և գույնը հարմարեցնելու համար:

Նախապատմություն և գույն

Քարտի տեսքը փոխելու համար օգտագործեք տեքստային և ֆոնային կոմունալ ծառայություններ :

Վերնագիր
Հիմնական քարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Երկրորդական քարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Հաջողության քարտի վերնագիր

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Վտանգավոր քարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Զգուշացման քարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Տեղեկաքարտի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Թեթև բացիկի անվանումը

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Վերնագիր
Մուգ քարտի վերնագիր

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

<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;են իրենց միատեսակ չափերը հասնելու համար:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Placeholder Image cap
Քարտի անվանումը

Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:

Վերջին անգամ թարմացվել է 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>

Ստորագրություններով քարտերի խմբեր օգտագործելիս դրանց բովանդակությունը ավտոմատ կերպով կհամապատասխանի:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Placeholder Image cap
Քարտի անվանումը

Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:

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

Քարտի տախտակամածներ

Ձեզ անհրաժեշտ է հավասար լայնության և բարձրության քարտերի հավաքածու, որոնք կցված չեն միմյանց: Օգտագործեք քարտերի տախտակամածներ:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Placeholder Image cap
Քարտի անվանումը

Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:

Վերջին անգամ թարմացվել է 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>

Ինչպես քարտերի խմբերի դեպքում, տախտակամածներում քարտի էջատակերը ինքնաբերաբար կշարվեն:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Placeholder Image cap
Քարտի անվանումը

Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:

Placeholder Image cap
Քարտի անվանումը

Սա ավելի լայն բացիկ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս քարտը նույնիսկ ավելի երկար բովանդակություն ունի, քան առաջինը, որը ցույց է տալիս այդ հավասար հասակի գործողությունը:

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

Քարտի սյունակներ

Քարտերը կարելի է կազմակերպել որմնադրությանը նմանվող սյունակներում՝ պարզապես CSS-ով՝ դրանք փաթաթելով .card-columns: Քարտերը կառուցված են columnFlexbox-ի փոխարեն CSS հատկություններով՝ ավելի հեշտ դասավորելու համար: Քարտերը պատվիրվում են վերևից ներքև և ձախից աջ:

Գլուխը վեր Քարտի սյունակներով ձեր վազքը կարող է տարբեր լինել: Որպեսզի քարտերը սյունակներում կոտրվեն, մենք պետք է դրանք սահմանենք, display: inline-blockքանի column-break-inside: avoidոր դեռևս զրահապատ լուծում չէ:

Placeholder Image cap
Քարտի վերնագիր, որը փաթաթվում է նոր տողով

Սա ավելի երկար քարտ է՝ ստորև աջակցող տեքստով, որպես լրացուցիչ բովանդակության բնական աղբյուր: Այս բովանդակությունը մի փոքր ավելի երկար է:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

Աղբյուրի վերնագրում հայտնի մեկը
Placeholder Image cap
Քարտի անվանումը

Այս քարտը ստորև ունի օժանդակ տեքստ՝ որպես լրացուցիչ բովանդակության բնական աղբյուր:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat.

Աղբյուրի վերնագրում հայտնի մեկը
Քարտի անվանումը

Այս քարտը ունի սովորական վերնագիր և տեքստի կարճ պարբերություն դրա տակ:

Վերջին անգամ թարմացվել է 3 րոպե առաջ

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

Աղբյուրի վերնագրում հայտնի մեկը
Քարտի անվանումը

Սա ևս մեկ բացիկ է՝ ստորև վերնագրով և օժանդակ տեքստով: Այս քարտն ունի որոշ լրացուցիչ բովանդակություն՝ այն ընդհանուր առմամբ մի փոքր ավելի բարձր դարձնելու համար:

Վերջին անգամ թարմացվել է 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>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>

Քարտի սյունակները կարող են նաև ընդլայնվել և հարմարեցվել որոշ լրացուցիչ կոդով: Ստորև ներկայացված է .card-columnsդասի ընդլայնումը՝ օգտագործելով նույն CSS-ը, որը մենք օգտագործում ենք՝ CSS սյունակները՝ սյունակների քանակը փոխելու համար պատասխանատու մակարդակների մի շարք ստեղծելու համար:

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