in English

Карти

Картите на 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към <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>

Избройте групи

Създавайте списъци със съдържание в карта с група от списъци за промиване.

  • Артикул
  • Втори елемент
  • Трети артикул
<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>

Кухненска мивка

Смесете и комбинирайте няколко типа съдържание, за да създадете картата, от която се нуждаете, или добавете всичко там. По-долу са показани стилове на изображения, блокове, текстови стилове и група от списъци – всички те са обвити в карта с фиксирана ширина.

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>
  </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>
цитат

Добре познат цитат, съдържащ се в елемент blockquote.

Някой известен в заглавието на източника
<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, класове на мрежата, миксини на 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>

Изображения

Картите включват няколко опции за работа с изображения. Изберете от добавяне на „капачки на изображения“ в двата края на карта, наслагване на изображения със съдържание на карта или просто вграждане на изображението в карта.

Капачки на изображенията

Подобно на горните и долните колонтитули, картите могат да включват горни и долни „заглавия на изображения“ – изображения в горната или долната част на картата.

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-bottom" 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>
Имайте предвид, че съдържанието не трябва да е по-голямо от височината на изображението. Ако съдържанието е по-голямо от изображението, съдържанието ще се покаже извън изображението.

Хоризонтална

Използвайки комбинация от решетка и помощни класове, картите могат да бъдат направени хоризонтални по удобен за мобилни устройства и отзивчив начин. В примера по-долу премахваме улуците на решетката с .no-guttersи използваме .col-md-*класове, за да направим картата хоризонтална в точката на mdпрекъсване. Може да са необходими допълнителни корекции в зависимост от съдържанието на вашата карта.

Placeholder Image
Заглавие на картата

Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Последна актуализация преди 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>

Помощни програми на Mixins

Можете също така да промените границите на горния и долния колонтитул на картата, ако е необходимо, и дори да ги премахнете 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прекъсване.

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>

Мрежови карти

Използвайте мрежовата система Bootstrap и нейните .row-colsкласове, за да контролирате колко колони от мрежата (увити около вашите карти) показвате на ред. Например, ето подреждане .row-cols-1на картите в една колона и .row-cols-md-2разделяне на четири карти на еднаква ширина в множество редове, от средната точка на прекъсване нагоре.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

<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и ще видите четвъртата опаковка на картата.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

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

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Placeholder Image cap
Заглавие на картата

Това е кратка карта.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание.

Placeholder Image cap
Заглавие на картата

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

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

Колони с карти

Картите могат да бъдат организирани в колони, подобни на Masonry , само с CSS, като ги обвиете в .card-columns. Картите са изградени с CSS columnсвойства вместо flexbox за по-лесно подравняване. Картите са подредени отгоре надолу и отляво надясно.

Горе главата! Вашият пробег с графите на картата може да варира. За да предотвратим разбиване на карти в колони, трябва да ги настроим на display: inline-blockasn't column-break-inside: avoidвсе още бронирано решение.

Placeholder Image cap
Заглавие на картата, което преминава на нов ред

Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.

Добре познат цитат, съдържащ се в елемент blockquote.

Някой известен в заглавието на източника
Placeholder Image cap
Заглавие на картата

Тази карта има поддържащ текст по-долу като естествено въведение към допълнително съдържание.

Последна актуализация преди 3 минути

Добре познат цитат, съдържащ се в елемент blockquote.

Някой известен в заглавието на източника
Заглавие на картата

Тази карта има редовно заглавие и кратък параграф от текст под него.

Последна актуализация преди 3 минути

Placeholder Card image

Добре познат цитат, съдържащ се в елемент blockquote.

Някой известен в заглавието на източника
Заглавие на картата

Това е друга карта със заглавие и поддържащ текст по-долу. Тази карта има малко допълнително съдържание, което я прави малко по-висока като цяло.

Последна актуализация преди 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;
  }
}