Source

Карти

Картите на Bootstrap предоставят гъвкав и разширяем контейнер за съдържание с множество варианти и опции.

относно

Картата е гъвкав и разширяем контейнер за съдържание. Той включва опции за горни и долни колонтитули, голямо разнообразие от съдържание, контекстуални фонови цветове и мощни опции за показване. Ако сте запознати с Bootstrap 3, картите заменят нашите стари панели, кладенци и миниатюри. Функционалност, подобна на тези компоненти, е налична като класове модификатори за карти.

Пример

Картите са създадени с възможно най-малко маркиране и стилове, но все пак успяват да осигурят много контрол и персонализиране. Създадени с flexbox, те предлагат лесно подравняване и се смесват добре с други компоненти на Bootstrap. Те нямат marginпо подразбиране, така че използвайте помощни програми за интервали , ако е необходимо.

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

100%x180
Заглавие на картата

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

Отиди някъде
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 тагове.

Капачка на изображението [100%x180]

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестибулум при ерос
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Представено
  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестибулум при ерос
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

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

Капачка на изображението [100%x180]
Заглавие на картата

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестибулум при ерос
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Добавете незадължителен горен и/или долен колонтитул в карта.

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

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

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

Заглавките на карти могат да бъдат стилизирани чрез добавяне .card-headerкъм <h*>елементи.

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

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

Отиди някъде
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
цитат

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

Някой известен в заглавието на източника
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Представено
Специално третиране на заглавието

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

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

Оразмеряване

Картите не предполагат специфично widthначало, така че те ще бъдат 100% широки, освен ако не е посочено друго. Можете да промените това според нуждите с персонализиран CSS, класове на мрежата, миксини на Sass на мрежата или помощни програми.

Използване на маркиране на мрежата

Използвайки решетката, увийте картите в колони и редове, ако е необходимо.

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

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

Отиди някъде
Специално третиране на заглавието

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

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

Използване на помощни програми

Използвайте нашата шепа налични помощни програми за оразмеряване , за да зададете бързо ширината на картата.

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

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

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

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

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

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

Използване на персонализиран CSS

Използвайте персонализиран CSS във вашите таблици със стилове или като вградени стилове, за да зададете ширина.

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

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

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

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

Можете бързо да промените подравняването на текста на всяка карта — в нейната цялост или конкретни части — с нашите класове за подравняване на текст .

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

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

Отиди някъде
Специално третиране на заглавието

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

Отиди някъде
Специално третиране на заглавието

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

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

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

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

Добавете малко навигация към заглавката на картата (или блок) с навигационните компоненти на Bootstrap .

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

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

Отиди някъде
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Специално третиране на заглавието

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

Отиди някъде
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">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>

Изображения

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

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

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

100%x180
Заглавие на картата

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

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

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

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

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

100%x180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

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

Превърнете изображение във фон на карта и наслагвайте текста на вашата карта. В зависимост от изображението може да се нуждаете или не от допълнителни стилове или помощни програми.

100%x270
Заглавие на картата

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

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

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

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

Картите включват различни опции за персонализиране на техния фон, граници и цвят.

Фон и цвят

Използвайте помощни програми за текст и фон , за да промените външния вид на карта.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Предаване на значение на помощните технологии

Използването на цвят за добавяне на смисъл осигурява само визуална индикация, която няма да бъде предадена на потребителите на помощни технологии – като екранни четци. Уверете се, че информацията, обозначена с цвета, е или очевидна от самото съдържание (напр. видимия текст), или е включена чрез алтернативни средства, като например допълнителен текст, скрит с .sr-onlyкласа.

Граница

Използвайте гранични помощни програми , за да промените само border-colorформата на карта. Обърнете внимание, че можете да поставите .text-{color}класове на родителя .cardили подмножество от съдържанието на картата, както е показано по-долу.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.

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

Помощни програми на 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;за постигане на тяхното еднакво оразмеряване.

100%x180
Заглавие на картата

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

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

100%x180
Заглавие на картата

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

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

100%x180
Заглавие на картата

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

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Когато използвате групи карти с долни колонтитули, тяхното съдържание ще се подреди автоматично.

100%x180
Заглавие на картата

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

100%x180
Заглавие на картата

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

100%x180
Заглавие на картата

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Теста карти

Имате нужда от комплект карти с еднаква ширина и височина, които не са прикрепени една към друга? Използвайте тестета карти.

100% х 200
Заглавие на картата

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

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

100% х 200
Заглавие на картата

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

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

100% х 200
Заглавие на картата

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

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Точно както при групите карти, долните колонтитули на картите в колодите ще се подредят автоматично.

100%x180
Заглавие на картата

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

100%x180
Заглавие на картата

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

100%x180
Заглавие на картата

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

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

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

100%x160
Заглавие на картата, което преминава на нов ред

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat.

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

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

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

100% x 260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

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

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

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <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 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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

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

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