Картички

Картичките на Bootstrap обезбедуваат флексибилен и проширлив контејнер за содржина со повеќе варијанти и опции.

На оваа страница

За

Картичката е флексибилен и растеглив контејнер со содржина . Вклучува опции за заглавија и подножја, широк спектар на содржини, контекстуални бои на позадината и моќни опции за прикажување. Ако сте запознаени со Bootstrap 3, картичките ги заменуваат нашите стари панели, бунари и сликички. Слична функционалност на тие компоненти е достапна како класи на модификатори за картички.

Пример

Картичките се изградени со што е можно помало обележување и стилови, но сепак успеваат да испорачаат голем број на контрола и приспособување. Изградени со flexbox, тие нудат лесно усогласување и добро се мешаат со другите компоненти на Bootstrap. Стандардно немаат margin, затоа користете ги алатките за растојание по потреба.

Подолу е пример за основна картичка со мешана содржина и фиксна ширина. Картичките немаат фиксна ширина за почеток, така што тие природно ќе ја пополнат целата ширина на неговиот родителски елемент. Ова лесно се прилагодува со нашите различни опции за големина .

Наслов на картичката

Некој брз пример на текст за да се изгради на насловот на картичката и да се сочинува најголемиот дел од содржината на картичката.

Оди некаде

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Видови содржини

Картичките поддржуваат широк спектар на содржини, вклучувајќи слики, текст, групи списоци, врски и многу повеќе. Подолу се дадени примери за тоа што е поддржано.

Тело

Градежниот блок на картичката е .card-body. Користете го секогаш кога ви треба пополнет дел во картичката.

Ова е некој текст во телото на картичката.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Наслови, текст и врски

Насловите на картичките се користат со додавање .card-titleна <h*>ознака. На ист начин, врските се додаваат и се поставуваат една до друга со додавање .card-linkна <a>ознака.

Преводите се користат со додавање a .card-subtitleна <h*>ознака. Ако .card-titleи .card-subtitleставките се ставени во .card-bodyставка, насловот и поднасловот на картичката се убаво порамнети.

Наслов на картичката

Превод на картичката

Врска со картичка Друга врска

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Слики

.card-img-topпоставува слика на врвот на картичката. Со .card-text, текстот може да се додаде на картичката. Текстот внатре .card-text, исто така, може да биде стилизиран со стандардни HTML ознаки.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Наведете групи

Креирајте списоци на содржини во картичка со група за флеш листа.

Ставка
Втора ставка
Трета ставка

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Избрана

Ставка
Втора ставка
Трета ставка

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Ставка
Втора ставка
Трета ставка

Подножјето на картичката

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Кујнски мијалник

Измешајте и поклопете повеќе типови содржини за да ја креирате картичката што ви треба или фрлете сè таму. Подолу се прикажани стилови на слики, блокови, стилови на текст и група списоци - сите завиткани во картичка со фиксна ширина.

Наслов на картичката

Ставка
Втора ставка
Трета ставка

Врска со картичка Друга врска

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Заглавие и подножје

Додајте изборно заглавие и/или подножје во картичката.

Избрана

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

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

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

Избрана

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

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

Цитат

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

Некој познат во изворниот наслов

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Избрана

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

Пред 2 дена

html

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

Димензионирање

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

Користење на означување на мрежа

Користејќи ја мрежата, завиткајте ги картичките во колони и редови по потреба.

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

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

Користење на комунални услуги

Користете ги нашите неколку достапни алатки за одредување големина за брзо поставување на ширината на картичката.

Наслов на картичката

Со помошен текст подолу како природен довод за дополнителна содржина.

Копче

Наслов на картичката

Со помошен текст подолу како природен довод за дополнителна содржина.

Копче

html

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

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

Користење на сопствен CSS

Користете сопствен CSS во вашите листови со стилови или како вградени стилови за да поставите ширина.

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

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

Порамнување на текстот

Можете брзо да го промените порамнувањето на текстот на која било картичка - во целост или одредени делови - со нашите класи за порамнување на текст .

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

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

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

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

Додајте малку навигација во заглавието (или блок) на картичката со компонентите за навигација на Bootstrap .

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Посебен третман за наслов

Со помошен текст подолу како природен довод за дополнителна содржина.

Оди некаде

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Слики

Картичките вклучуваат неколку опции за работа со слики. Изберете од додавање „капи за слики“ на двата краја на картичката, преклопување на слики со содржина на картичката или едноставно вметнување на сликата во картичка.

Капи на сликата

Слично на заглавијата и подножјето, картичките може да вклучуваат горни и долни „капи за слики“ - слики на врвот или на дното на картичката.

Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Последно ажурирање пред 3 мин

Наслов на картичката

Последно ажурирање пред 3 мин

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Преклопувања на слики

Претворете ја сликата во позадина на картичката и преклопете го текстот на вашата картичка. Во зависност од сликата, можеби ќе ви требаат или не ќе ви требаат дополнителни стилови или алатки.

Наслов на картичката

Последно ажурирање пред 3 мин

html

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

Забележете дека содржината не треба да биде поголема од висината на сликата. Ако содржината е поголема од сликата, содржината ќе се прикаже надвор од сликата.

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

Користејќи комбинација од класи на мрежа и корисни, картичките може да се направат хоризонтално на начин погоден за мобилни телефони и одговорен. Во примерот подолу, ги отстрануваме олуците на мрежата со .g-0и користиме .col-md-*класи за да ја направиме картичката хоризонтална на точката на mdпрекин. Можеби ќе бидат потребни дополнителни прилагодувања во зависност од содржината на вашата картичка.

Наслов на картичката

Последно ажурирање пред 3 мин

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

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

Картичките вклучуваат различни опции за прилагодување на нивните позадини, граници и боја.

Позадина и боја

Додадено во v5.2.0

Поставете background-colorконтраст во преден план colorсо нашите .text-bg-{color}помошници . Претходно беше потребно рачно да се спарат вашиот избор .text-{color}и .bg-{color}алатки за стилизирање, кои сепак може да ги користите доколку сакате.

Заглавие

Наслов на основна картичка

Заглавие

Наслов на секундарна картичка

Заглавие

Наслов на успешна картичка

Заглавие

Наслов на карта за опасност

Заглавие

Наслов на картичката за предупредување

Заглавие

Наслов на инфо картичка

Заглавие

Наслов на лесна картичка

Заглавие

Наслов на темна картичка

html

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

Пренесување значење на помошните технологии

Користењето боја за додавање значење обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурајте се дека информациите означени со бојата се или очигледни од самата содржина (на пр. видлив текст), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со .visually-hiddenкласата.

Граница

Користете гранични алатки за да го промените само делот border-colorод картичката. Имајте предвид дека можете да ставите .text-{color}класи на родителот .cardили подмножество од содржината на картичката како што е прикажано подолу.

Заглавие

Наслов на основна картичка

Заглавие

Наслов на секундарна картичка

Заглавие

Наслов на успешна картичка

Заглавие

Наслов на карта за опасност

Заглавие

Наслов на картичката за предупредување

Заглавие

Наслов на инфо картичка

Заглавие

Наслов на лесна картичка

Заглавие

Наслов на темна картичка

html

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

Ги меша комуналните услуги

Можете исто така да ги менувате границите на заглавието и подножјето на картичката по потреба, па дури и да ги отстраните background-colorсо .bg-transparent.

Заглавие

Наслов на успешна картичка

Подножје

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Распоред на картички

Покрај стилизирањето на содржината во картичките, Bootstrap вклучува неколку опции за поставување на серии на картички. Засега, овие опции за распоред сè уште не реагираат .

Групи со картички

Користете групи на картички за прикажување на картичките како единечен, прикачен елемент со колони со еднаква ширина и висина. Групите на картички започнуваат наредени и ги користат display: flex;за да се прицврстат со униформни димензии почнувајќи од точката на smпрекин.

Наслов на картичката

Последно ажурирање пред 3 мин

Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

Наслов на картичката

Ова е поширока картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа картичка има дури и подолга содржина од првата што го покажува дејството со еднаква висина.

Последно ажурирање пред 3 мин

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Кога користите групи на картички со подножја, нивната содржина автоматски ќе се нареди.

Наслов на картичката

Последно ажурирање пред 3 мин

Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

Наслов на картичката

Последно ажурирање пред 3 мин

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Мрежни картички

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

Наслов на картичката

Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина. Оваа содржина е малку подолга.

Наслов на картичката

Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина.

Наслов на картичката

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Променете го во .row-cols-3и ќе ја видите четвртата обвивка на картата.

Наслов на картичката

Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина.

Наслов на картичката

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Кога ви треба еднаква висина, додадете .h-100на картичките. Ако сакате стандардно еднакви висини, можете да поставите $card-height: 100%во Sass.

Наслов на картичката

Ова е кратка картичка.

Наслов на картичката

Ова е подолга картичка со текст за поддршка подолу како природен довод за дополнителна содржина.

Наслов на картичката

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Исто како и кај групите картички, подножјето на картичките автоматски ќе се редат.

Наслов на картичката

Последно ажурирање пред 3 мин

Наслов на картичката

Оваа картичка има текст за поддршка подолу како природен довод за дополнителна содржина.

Последно ажурирање пред 3 мин

Наслов на картичката

Последно ажурирање пред 3 мин

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Масонеријата

Во v4ние користевме техника само за CSS за да го имитираме однесувањето на столбовите слични на ѕидарството , но оваа техника дојде со многу непријатни несакани ефекти . Ако сакате да го имате овој тип на распоред во v5, можете само да го искористите приклучокот Масонерија. Масонеријата не е вклучена во Bootstrap , но направивме демо пример за да ви помогнеме да започнете.

CSS

Променливи

Додадено во v5.2.0

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, картичките сега користат локални CSS променливи .cardза подобрено прилагодување во реално време. Вредностите за променливите CSS се поставени преку Sass, така што прилагодувањето на Sass сè уште е поддржано.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass променливи

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Картички

За

Пример

Наслов на картичката

Видови содржини

Тело

Наслови, текст и врски

Наслов на картичката

Превод на картичката

Слики

Наведете групи

Кујнски мијалник

Наслов на картичката

Заглавие и подножје

Посебен третман за наслов

Избрана

Посебен третман за наслов

Посебен третман за наслов

Димензионирање

Користење на означување на мрежа

Посебен третман за наслов

Посебен третман за наслов

Користење на комунални услуги

Наслов на картичката

Наслов на картичката

Користење на сопствен CSS

Посебен третман за наслов

Порамнување на текстот

Посебен третман за наслов

Посебен третман за наслов

Посебен третман за наслов

Навигација

Посебен третман за наслов

Посебен третман за наслов

Слики

Капи на сликата

Наслов на картичката

Наслов на картичката

Преклопувања на слики

Наслов на картичката

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

Наслов на картичката

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

Позадина и боја

Наслов на основна картичка

Наслов на секундарна картичка

Наслов на успешна картичка

Наслов на карта за опасност

Наслов на картичката за предупредување

Наслов на инфо картичка

Наслов на лесна картичка

Наслов на темна картичка

Пренесување значење на помошните технологии

Граница

Наслов на основна картичка

Наслов на секундарна картичка

Наслов на успешна картичка

Наслов на карта за опасност

Наслов на картичката за предупредување

Наслов на инфо картичка

Наслов на лесна картичка

Наслов на темна картичка

Ги меша комуналните услуги

Наслов на успешна картичка

Распоред на картички

Групи со картички

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката

Мрежни картички

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката

Наслов на картичката