Картички
Картичките на 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>
ознака.
Преводите се користат со додавање 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>
Добро познат цитат, содржан во елемент на блок цитат.
<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, класи на мрежа, миксови на grid 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-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 .
Посебен третман за наслов
Со помошен текст подолу како природен довод за дополнителна содржина.
Оди некаде<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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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>
Хоризонтална
Користејќи комбинација од класи на мрежа и корисни, картичките може да се направат хоризонтално на начин погоден за мобилни телефони и одговорен. Во примерот подолу, ги отстрануваме олуците на мрежата со .g-0
и користиме .col-md-*
класи за да ја направиме картичката хоризонтална на точката на md
прекин. Можеби ќе бидат потребни дополнителни прилагодувања во зависност од содржината на вашата картичка.
Наслов на картичката
Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Последно ажурирање пред 3 мин
<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>
Стилови на картички
Картичките вклучуваат различни опции за прилагодување на нивните позадини, граници и боја.
Позадина и боја
Користете ги алатките за боја на текстот и заднината за да го промените изгледот на картичката.
Наслов на основна картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на секундарна картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на успешна картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на карта за опасност
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на картичката за предупредување
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на инфо картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на лесна картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
Наслов на темна картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
<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-dark 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-dark 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-dark 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>
Пренесување значење на помошните технологии
Користењето боја за додавање значење обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурајте се дека информациите означени со бојата се или очигледни од самата содржина (на пр. видлив текст), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со .visually-hidden
класата.
Граница
Користете гранични алатки за да го промените само делот 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">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Ги меша комуналните услуги
Можете исто така да ги менувате границите на заглавието и подножјето на картичката по потреба, па дури и да ги отстраните background-color
со .bg-transparent
.
Наслов на успешна картичка
Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.
<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>
Мрежни картички
Користете го системот за мрежната мрежа Bootstrap и неговите .row-cols
класи за да контролирате колку колони на мрежа (завиткани околу вашите картички) прикажувате по ред. На пример, тука е .row-cols-1
поставување на картичките на една колона и .row-cols-md-2
поделување на четири картички на еднаква ширина низ повеќе редови, од средната точка на прекин нагоре.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
<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
и ќе ја видите четвртата обвивка на картата.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
<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.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Наслов на картичката
Ова е кратка картичка.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина.
Наслов на картичката
Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
<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>
Исто како и кај групите картички, подножјето на картичките автоматски ќе се редат.
Наслов на картичката
Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.
Наслов на картичката
Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.
Наслов на картичката
Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.
<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
, можете само да го искористите приклучокот Масонерија. Масонеријата не е вклучена во Bootstrap , но направивме демо пример за да ви помогнеме да започнете.
Сас
Променливи
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;