Карти

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

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

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

Артикул
Втори елемент
Трети артикул

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>

цитат

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

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

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, класове на мрежата, миксини на 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>

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

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

Специално третиране на заглавието

Подравняване на текст

Специално третиране на заглавието

Специално третиране на заглавието

Специално третиране на заглавието

Навигация

Специално третиране на заглавието

Специално третиране на заглавието

Изображения

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

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

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

Наслагвания на изображения

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

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

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

Стилове на картички

Фон и цвят

Заглавие на основната карта

Заглавие на вторична карта

Заглавие на картата за успех

Заглавие на карта за опасност

Заглавие на предупредителната карта

Заглавие на информационната карта

Леко заглавие на картата

Заглавие на тъмна карта

Предаване на значение на помощните технологии

Граница

Заглавие на основната карта

Заглавие на вторична карта

Заглавие на картата за успех

Заглавие на карта за опасност

Заглавие на предупредителната карта

Заглавие на информационната карта

Леко заглавие на картата

Заглавие на тъмна карта

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

Заглавие на картата за успех

Оформление на картата

Групи карти

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

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

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

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

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

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

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

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

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

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

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

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

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

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