Картички

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

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

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

Cras justo odio
Dapibus ac facilisis во
Вестибулум и ерос

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Избрана

Cras justo odio
Dapibus ac facilisis во
Вестибулум и ерос

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

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

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

Cras justo odio
Dapibus ac facilisis во
Вестибулум и ерос

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

<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

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

Избрана

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

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

Оди некаде

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

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

Избрана

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

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

Оди некаде

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

Цитат

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

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

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Избрана

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

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

Оди некаде

Пред 2 дена

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

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

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

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

Оди некаде

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" 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-top" alt="...">
</div>

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

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

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

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

<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="..." class="card-img" 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>

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

Можете исто така да ги менувате границите на заглавието и подножјето на картичката по потреба, па дури и да ги отстраните 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;за да постигнат униформа големина.

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

Последно ажурирање пред 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>

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

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

Последно ажурирање пред 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>
    </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>

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

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

Последно ажурирање пред 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 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>

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

Картичките може да се организираат во колони слични на ѕидарски.card-columns само со CSS со завиткување во . Картичките се изградени со CSS columnсвојства наместо flexbox за полесно усогласување. Картите се нарачуваат од горе до долу и од лево кон десно.

Главите горе! Вашата километража со колоните со картички може да варира. За да спречиме прекршување на картичките низ колоните, мора да ги поставиме display: inline-blockкако што column-break-inside: avoidсè уште не е решение отпорно на куршуми.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat.

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

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

Оваа картичка има редовен наслов и краток параграф на текст под неа.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

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

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

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

Последно ажурирање пред 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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;
  }
}

Картички

За

Пример

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

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

Тело

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

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

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

Слики

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

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

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

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

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

Избрана

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигација

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

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

Слики

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Граница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Палуби со карти

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

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

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

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

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

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

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