Карти
Картите на Bootstrap предоставят гъвкав и разширяем контейнер за съдържание с множество варианти и опции.
относно
Картата е гъвкав и разширяем контейнер за съдържание. Той включва опции за горни и долни колонтитули, голямо разнообразие от съдържание, контекстуални фонови цветове и мощни опции за показване. Ако сте запознати с Bootstrap 3, картите заменят нашите стари панели, кладенци и миниатюри. Функционалност, подобна на тези компоненти, е налична като класове модификатори за карти.
Пример
Картите са създадени с възможно най-малко маркиране и стилове, но все пак успяват да осигурят много контрол и персонализиране. Създадени с flexbox, те предлагат лесно подравняване и се смесват добре с други компоненти на Bootstrap. Те нямат margin
по подразбиране, така че използвайте помощни програми за интервали , ако е необходимо.
По-долу е даден пример за основна карта със смесено съдържание и фиксирана ширина. Картите нямат фиксирана начална ширина, така че естествено ще запълнят цялата ширина на своя родителски елемент. Това лесно се персонализира с нашите различни опции за оразмеряване .
Заглавие на картата
Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.
Отиди някъде<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 тагове.
Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.
<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>
Кухненска мивка
Смесете и комбинирайте няколко типа съдържание, за да създадете картата, от която се нуждаете, или добавете всичко там. По-долу са показани стилове на изображения, блокове, текстови стилове и група от списъци – всички те са обвити в карта с фиксирана ширина.
Заглавие на картата
Някакъв бърз примерен текст, който да надгражда заглавието на картата и да съставлява по-голямата част от съдържанието на картата.
- Артикул
- Втори елемент
- Трети артикул
<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>
Изображения
Картите включват няколко опции за работа с изображения. Изберете от добавяне на „капачки на изображения“ в двата края на карта, наслагване на изображения със съдържание на карта или просто вграждане на изображението в карта.
Капачки на изображенията
Подобно на горните и долните колонтитули, картите могат да включват горни и долни „заглавия на изображения“ – изображения в горната или долната част на картата.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Последна актуализация преди 3 минути
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Последна актуализация преди 3 минути
<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>
Наслагвания на изображения
Превърнете изображение във фон на карта и наслагвайте текста на вашата карта. В зависимост от изображението може да се нуждаете или не от допълнителни стилове или помощни програми.
<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
прекъсване. Може да са необходими допълнителни корекции в зависимост от съдържанието на вашата карта.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Последна актуализация преди 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
прекъсване.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Последна актуализация преди 3 минути
Заглавие на картата
Тази карта има поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Последна актуализация преди 3 минути
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Тази карта има още по-дълго съдържание от първата, което показва това действие с еднаква височина.
Последна актуализация преди 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>
Когато използвате групи карти с долни колонтитули, тяхното съдържание ще се подреди автоматично.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Тази карта има поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Тази карта има още по-дълго съдържание от първата, което показва това действие с еднаква височина.
<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>
Теста карти
Имате нужда от комплект карти с еднаква ширина и височина, които не са прикрепени една към друга? Използвайте тестета карти.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Последна актуализация преди 3 минути
Заглавие на картата
Тази карта има поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Последна актуализация преди 3 минути
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Тази карта има още по-дълго съдържание от първата, което показва това действие с еднаква височина.
Последна актуализация преди 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>
Точно както при групите карти, долните колонтитули на картите в колодите ще се подредят автоматично.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Тази карта има поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Заглавие на картата
Това е по-широка карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Тази карта има още по-дълго съдържание от първата, което показва това действие с еднаква височина.
<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
разделяне на четири карти на еднаква ширина в множество редове, от средната точка на прекъсване нагоре.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
<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
и ще видите четвъртата опаковка на картата.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
<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.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Заглавие на картата
Това е кратка карта.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Заглавие на картата
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
<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-block
asn't column-break-inside: avoid
все още бронирано решение.
Заглавие на картата, което преминава на нов ред
Това е по-дълга карта с поддържащ текст по-долу като естествено въведение към допълнително съдържание. Това съдържание е малко по-дълго.
Добре познат цитат, съдържащ се в елемент blockquote.
Заглавие на картата
Тази карта има поддържащ текст по-долу като естествено въведение към допълнително съдържание.
Последна актуализация преди 3 минути
Добре познат цитат, съдържащ се в елемент blockquote.
Заглавие на картата
Тази карта има редовно заглавие и кратък параграф от текст под него.
Последна актуализация преди 3 минути
Добре познат цитат, съдържащ се в елемент 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;
}
}