Քարտեր

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

Այս էջում

Մասին

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

Օրինակ

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

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

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Բովանդակության տեսակները

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

Մարմին

Քարտի շինանյութը .card-body. Օգտագործեք այն ամեն անգամ, երբ ձեզ անհրաժեշտ է քարտի մեջ ներդիր հատված:

Սա որոշակի տեքստ է քարտի մարմնի մեջ:

html

<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տարրի մեջ, ապա քարտի վերնագիրը և ենթավերնագիրը լավ հավասարեցված են:

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

Քարտի ենթավերնագիր

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

Քարտի հղում Մեկ այլ հղում

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Պատկերներ

.card-img-topտեղադրում է պատկերը քարտի վերևում: -ի միջոցով տեքստը կարող է .card-textավելացվել քարտին: Ներքին տեքստը .card-textկարող է նաև ձևավորվել ստանդարտ HTML թեգերով:

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

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

Մի իր
Երկրորդ կետ
Երրորդ կետ

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Հատկանշված

Մի իր
Երկրորդ կետ
Երրորդ կետ

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Մի իր
Երկրորդ կետ
Երրորդ կետ

Քարտի ստորագիր

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

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

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

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

Մի իր
Երկրորդ կետ
Երրորդ կետ

Քարտի հղում Մեկ այլ հղում

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Վերնագիր և ստորագիր

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

Հատկանշված

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Քարտի վերնագրերը կարելի է ոճավորել՝ ավելացնելով .card-headerտարրերին <h*>:

Հատկանշված

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Մեջբերում

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

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

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Հատկանշված

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

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

Գնացեք ինչ-որ տեղ

2 օր առաջ

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Չափսերը

Քարտերը չեն ենթադրում հատուկ widthմեկնարկի համար, ուստի դրանք 100% լայնություն կունենան, եթե այլ բան նշված չէ: Դուք կարող եք դա փոխել ըստ անհրաժեշտության՝ հատուկ CSS-ի, ցանցային դասերի, grid Sass միքսների կամ կոմունալ ծրագրերի միջոցով:

Ցանցային նշումների օգտագործումը

Օգտագործելով ցանցը, անհրաժեշտության դեպքում քարտերը փաթեթավորեք սյունակներում և տողերում:

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

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

Գնացեք ինչ-որ տեղ

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

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

Գնացեք ինչ-որ տեղ

html

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Օգտագործելով կոմունալ ծառայություններ

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

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

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

Կոճակ

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

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

Կոճակ

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Օգտագործելով հատուկ CSS

Օգտագործեք հատուկ CSS ձեր ոճաթերթերում կամ որպես ներկառուցված ոճեր՝ լայնությունը սահմանելու համար:

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Տեքստի հավասարեցում

Դուք կարող եք արագ փոխել ցանկացած քարտի տեքստի հավասարեցումը՝ ամբողջությամբ կամ առանձին մասերով, մեր տեքստի հավասարեցման դասերի հետ :

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

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

Գնացեք ինչ-որ տեղ

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

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

Գնացեք ինչ-որ տեղ

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ավելացրեք որոշակի նավարկություն քարտի վերնագրին (կամ բլոկին) Bootstrap-ի նավի բաղադրիչներով :

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

Գնացեք ինչ-որ տեղ

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Պատկերներ

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

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

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

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

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

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

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

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

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

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

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

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

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

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

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

Հորիզոնական

Օգտագործելով ցանցի և օգտակար դասերի համակցությունը, քարտերը կարող են հորիզոնական լինել շարժական սարքերի համար հարմար և արձագանքող եղանակով: Ստորև բերված օրինակում մենք հեռացնում ենք ցանցի հեղեղատարները .g-0և օգտագործում .col-md-*դասեր՝ քարտը ճեղքման կետում հորիզոնական դարձնելու համար md: Կախված ձեր քարտի բովանդակությունից, կարող են անհրաժեշտ լինել լրացուցիչ ճշգրտումներ:

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

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Քարտի ոճերը

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

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

Ավելացված է v5.2.0-ում

Սահմանեք background-colorհակապատկեր առաջին պլան մեր օգնականներիcolor հետ : Նախկինում պահանջվում էր ձեռքով զուգակցել ձեր ընտրած և կոմունալ հարմարանքները ոճավորման համար, որոնք դուք դեռ կարող եք օգտագործել, եթե ցանկանում եք:.text-bg-{color}.text-{color}.bg-{color}

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

html

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

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .visually-hiddenդասի հետ թաքցված լրացուցիչ տեքստը:

Սահման

Օգտագործեք սահմանային կոմունալ ծառայություններ ՝ միայն քարտի քարտը փոխելու համար border-color: Նկատի ունեցեք, որ դուք կարող եք .text-{color}դասեր տեղադրել ծնողի .cardկամ քարտի բովանդակության ենթաբազմության վրա, ինչպես ցույց է տրված ստորև:

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

Վերնագիր

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

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

html

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

Խառնում է կոմունալ ծառայությունները

Կարելի է նաև փոխել քարտի վերնագրի և ստորագրի եզրագծերը, ինչպես նաև անհրաժեշտության դեպքում, և նույնիսկ հեռացնել background-colorդրանք .bg-transparent.

Վերնագիր

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

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

Ստորագիր

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Քարտի դասավորությունը

Բացի քարտերի ներսում բովանդակությունը ձևավորելուց, Bootstrap-ը ներառում է քարտերի շարքի տեղադրման մի քանի տարբերակներ: Առայժմ դասավորության այս տարբերակները դեռ չեն արձագանքում :

Քարտերի խմբեր

Օգտագործեք քարտերի խմբերը՝ քարտերը որպես մեկ, կցված տարր՝ հավասար լայնությամբ և բարձրությամբ սյունակներով: Քարտերի խմբերը սկսում են կուտակված և օգտագործվում display: flex;են միատեսակ չափսերով միանալու համար՝ սկսած smընդմիջման կետից:

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

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

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

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

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

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

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

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

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Ցանցային քարտեր

Օգտագործեք Bootstrap ցանցային համակարգը և դրա .row-colsդասերը ՝ վերահսկելու համար, թե քանի ցանցի սյունակ (փաթաթված ձեր քարտերի շուրջ) յուրաքանչյուր տողում: Օրինակ, ահա .row-cols-1քարտերը մեկ սյունակի վրա դնելը և .row-cols-md-2չորս քարտերը հավասար լայնության բաժանել մի քանի տողերի վրա՝ միջին ընդմիջման կետից վեր:

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

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

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

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

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

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Փոխեք այն .row-cols-3և կտեսնեք չորրորդ քարտի փաթեթավորումը:

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Երբ ձեզ անհրաժեշտ է հավասար բարձրություն, ավելացրեք .h-100քարտերին: Եթե ցանկանում եք լռելյայն հավասար բարձրություններ, կարող եք սահմանել $card-height: 100%Sass-ում:

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

Սա կարճ քարտ է:

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

որմնադրությանը

Մենք v4օգտագործեցինք միայն CSS-ի տեխնիկան՝ ընդօրինակելու որմնադրությանը նմանվող սյուների վարքագիծը, բայց այս տեխնիկան ունեցավ բազմաթիվ տհաճ կողմնակի ազդեցություններ : Եթե ցանկանում եք ունենալ այս տեսակի դասավորությունը v5, կարող եք պարզապես օգտագործել Masonry plugin-ը: Masonry-ը ներառված չէ Bootstrap- ում, բայց մենք պատրաստել ենք ցուցադրական օրինակ , որը կօգնի ձեզ սկսել:

CSS

Փոփոխականներ

Ավելացված է v5.2.0-ում

Որպես Bootstrap-ի զարգացող CSS փոփոխականների մոտեցման մաս՝ քարտերն այժմ օգտագործում են տեղական CSS փոփոխականներ՝ .cardիրական ժամանակում կատարելագործված հարմարեցման համար: CSS փոփոխականների արժեքները սահմանվում են Sass-ի միջոցով, ուստի Sass-ի հարմարեցումը դեռևս աջակցվում է:

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

Sass փոփոխականներ

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Քարտեր

Մասին

Օրինակ

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

Բովանդակության տեսակները

Մարմին

Վերնագրեր, տեքստ և հղումներ

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

Քարտի ենթավերնագիր

Պատկերներ

Թվարկեք խմբերը

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

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

Վերնագիր և ստորագիր

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

Հատկանշված

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

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

Չափսերը

Ցանցային նշումների օգտագործումը

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

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

Օգտագործելով կոմունալ ծառայություններ

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

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

Օգտագործելով հատուկ CSS

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

Տեքստի հավասարեցում

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

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

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

Նավիգացիա

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

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

Պատկերներ

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

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

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

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

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

Հորիզոնական

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

Քարտի ոճերը

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

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

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

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

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

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

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

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

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

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Սահման

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

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

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

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

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

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

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

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

Խառնում է կոմունալ ծառայությունները

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

Քարտի դասավորությունը

Քարտերի խմբեր

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

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

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

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

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

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

Ցանցային քարտեր

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

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

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

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

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

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

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