Source

Карты

Карты Bootstrap забяспечваюць гнуткі і пашыраемы кантэйнер кантэнту з мноствам варыянтаў і опцый.

Аб

Картка - гэта гнуткі і пашыраемы кантэйнер змесціва. Ён уключае параметры для верхніх і ніжніх калонтытулаў, шырокі выбар кантэнту, кантэкстныя колеры фону і магутныя параметры адлюстравання. Калі вы знаёмыя з Bootstrap 3, карты замяняюць нашы старыя панэлі, калодзежы і мініяцюры. Функцыянальнасць, падобная да гэтых кампанентаў, даступная ў якасці класаў-мадыфікатараў для карт.

Прыклад

Карткі ствараюцца з мінімальнай колькасцю разметкі і стыляў, але пры гэтым забяспечваюць масу кантролю і наладкі. Пабудаваныя з дапамогай flexbox, яны забяспечваюць лёгкае выраўноўванне і добра спалучаюцца з іншымі кампанентамі Bootstrap. marginПа змаўчанні іх няма , таму пры неабходнасці выкарыстоўвайце ўтыліты прабелаў .

Ніжэй прыведзены прыклад базавай карты са змешаным змесцівам і фіксаванай шырынёй. Карткі не маюць фіксаванай шырыні для пачатку, таму яны натуральным чынам запаўняюць поўную шырыню бацькоўскага элемента. Гэта лёгка наладзіць з дапамогай розных варыянтаў памеру .

100%x180
Назва карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Ідзі куды-небудзь
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Тыпы кантэнту

Карткі падтрымліваюць шырокі спектр кантэнту, уключаючы выявы, тэкст, групы спісаў, спасылкі і многае іншае. Ніжэй прыведзены прыклады таго, што падтрымліваецца.

Цела

Будаўнічым блокам карты з'яўляецца .card-body. Выкарыстоўвайце яго кожны раз, калі вам патрэбна пракладзеная частка карты.

Гэта некаторы тэкст у целе карты.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Загалоўкі картак выкарыстоўваюцца шляхам дадання .card-titleда <h*>тэга. Такім жа чынам спасылкі дадаюцца і размяшчаюцца адна побач з дапамогай дадання .card-linkў <a>тэг.

Субтытры выкарыстоўваюцца шляхам дадання .card-subtitleда <h*>тэга. Калі элементы .card-titleі .card-subtitleразмешчаны ў .card-bodyэлементе, загаловак карткі і падзагаловак добра выраўноўваюцца.

Назва карты
Падзагаловак для карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Спасылка на картку Яшчэ адна спасылка
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Малюнкі

.card-img-topразмяшчае малюнак у верхняй частцы карты. З дапамогай .card-text, тэкст можа быць дададзены да карты. Тэкст унутры .card-textтаксама можна стылізаваць з дапамогай стандартных тэгаў HTML.

Шапка выявы [100%x180]

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

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

Спіс груп

Стварыце спісы змесціва на картцы з групай спісаў для змывання.

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

Кухонная ракавіна

Змяшайце і спалучайце некалькі тыпаў змесціва, каб стварыць патрэбную картку, або дадайце туды ўсё. Ніжэй паказаны стылі выявы, блокі, стылі тэксту і група спісаў — усё гэта загорнута ў карту фіксаванай шырыні.

Шапка выявы [100%x180]
Назва карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

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

Дадайце неабавязковы верхні і/або ніжні калонтытул на картку.

Рэкамендаваны
Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Загалоўкі карт можна стылізаваць, дадаючы .card-headerэлементы <h*>.

Рэкамендаваны
Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Цытата

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

Нехта вядомы ў назве крыніцы
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Рэкамендаваны
Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Праклейванне

Карткі не прадугледжваюць асаблівага widthпачатку, таму яны будуць мець шырыню на 100%, калі не пазначана іншае. Вы можаце змяніць гэта пры неабходнасці з дапамогай карыстальніцкага CSS, класаў сеткі, міксінаў сеткі Sass або ўтыліт.

Выкарыстанне разметкі сеткі

Выкарыстоўваючы сетку, абгарніце карты ў слупкі і радкі па меры неабходнасці.

Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Выкарыстанне ўтыліт

Каб хутка задаць шырыню карты, выкарыстоўвайце некалькі даступных утыліт для вызначэння памеру .

Назва карты

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Кнопка
Назва карты

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

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

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

Выкарыстанне карыстацкага CSS

Выкарыстоўвайце карыстальніцкі CSS у сваіх табліцах стыляў або ў якасці ўбудаваных стыляў, каб задаць шырыню.

Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Выраўноўванне тэксту

Вы можаце хутка змяніць выраўноўванне тэксту любой карткі — цалкам або асобных частак — з дапамогай нашых класаў выраўноўвання тэксту .

Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

Ідзі куды-небудзь
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

Дадайце некаторую навігацыю ў загаловак карткі (або блок) з дапамогай навігацыйных кампанентаў Bootstrap .

Спецыяльны рэжым тытула

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

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

З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.

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

Малюнкі

Карткі ўключаюць у сябе некалькі варыянтаў працы з малюнкамі. Дадавайце «шапкі малюнкаў» на любы канец карты, накладвайце выявы на змесціва карткі або проста ўстаўляйце выяву ў картку.

Шапкі малюнкаў

Падобна верхнім і ніжнім калонтытулам, карты могуць уключаць верхнія і ніжнія «шапкі відарысаў» — выявы ўверсе або ўнізе карты.

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

Апошняе абнаўленне 3 хвіліны таму

Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

Апошняе абнаўленне 3 хвіліны таму

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

Накладання малюнкаў

Ператварыце малюнак у фон карткі і накладзеце тэкст вашай карткі. У залежнасці ад выявы вам могуць спатрэбіцца дадатковыя стылі ці ўтыліты, а могуць і не спатрэбіцца.

100%x270
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

Апошняе абнаўленне 3 хвіліны таму

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

Стылі картак

Карткі ўключаюць у сябе розныя параметры для налады фону, межаў і колеру.

Фон і колер

Выкарыстоўвайце тэкставыя і фонавыя ўтыліты , каб змяніць знешні выгляд карты.

Загаловак
Назва асноўнай карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Загаловак другаснай карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва карты поспеху

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва карты небяспекі

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва карткі з папярэджаннем

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва інфармацыйнай карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Светлая назва карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Цёмная назва карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

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

Выкарыстанне колеру для дадання сэнсу забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, альбо відавочная з самага змесціва (напрыклад, бачнага тэксту), альбо ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны разам з .sr-onlyкласам.

Граніца

Каб змяніць толькі карту, выкарыстоўвайце памежныя ўтыліты . border-colorЗвярніце ўвагу, што вы можаце размясціць .text-{color}класы для бацькоўскага .cardабо падмноства змесціва карты, як паказана ніжэй.

Загаловак
Назва асноўнай карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Загаловак другаснай карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва карты поспеху

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва карты небяспекі

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва карткі з папярэджаннем

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Назва інфармацыйнай карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Светлая назва карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

Загаловак
Цёмная назва карты

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

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

Утыліты Mixins

Вы таксама можаце змяніць рамкі верхняга і ніжняга калонтытулаў карты пры неабходнасці і нават выдаліць іх background-colorз дапамогай .bg-transparent.

Загаловак
Назва карты поспеху

Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.

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

Макет карты

У дадатак да стылізацыі змесціва ў картах, Bootstrap уключае некалькі варыянтаў размяшчэння серыі картак. На дадзены момант гэтыя параметры макета яшчэ не адаптыўныя .

Групы карт

Выкарыстоўвайце групы картак, каб візуалізаваць карты як адзіны далучаны элемент са слупкамі роўнай шырыні і вышыні. Групы карт выкарыстоўваюць display: flex;для дасягнення іх аднастайнага памеру.

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

Апошняе абнаўленне 3 хвіліны таму

100%x180
Назва карты

Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.

Апошняе абнаўленне 3 хвіліны таму

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.

Апошняе абнаўленне 3 хвіліны таму

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

Пры выкарыстанні груп картак з ніжнімі калонтытуламі іх змесціва будзе аўтаматычна выстройвацца.

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

100%x180
Назва карты

Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.

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

Калоды карт

Патрэбен набор карт аднолькавай шырыні і вышыні, якія не прымацаваныя адна да адной? Выкарыстоўвайце калоды карт.

100% х 200
Назва карты

Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

Апошняе абнаўленне 3 хвіліны таму

100% х 200
Назва карты

Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.

Апошняе абнаўленне 3 хвіліны таму

100% х 200
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.

Апошняе абнаўленне 3 хвіліны таму

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

Гэтак жа, як і ў выпадку з групамі карт, ніжнія калонтытулы карт у калодах будуць выстройвацца аўтаматычна.

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

100%x180
Назва карты

Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.

100%x180
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.

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

Слупкі карт

Карткі можна арганізаваць у слупкі, падобныя на Masonry.card-columns , з дапамогай толькі CSS, загарнуўшы іх у . Карткі створаны з columnуласцівасцямі CSS замест flexbox для палягчэння выраўноўвання. Карты размешчаны зверху ўніз і злева направа.

Галаву ўверх! Ваш прабег са слупкамі карты можа адрознівацца. Каб карты не разбіваліся па слупках, мы павінны наладзіць іх display: inline-blockтак column-break-inside: avoid, што гэта яшчэ не куленепрабівальнае рашэнне.

100%x160
Назва карткі, якая пераходзіць на новы радок

Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

Нехта вядомы ў назве крыніцы
100%x160
Назва карты

Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.

Апошняе абнаўленне 3 хвіліны таму

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы posuere erat.

Нехта вядомы ў назве крыніцы
Назва карты

Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.

Апошняе абнаўленне 3 хвіліны таму

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.

Нехта вядомы ў назве крыніцы
Назва карты

Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.

Апошняе абнаўленне 3 хвіліны таму

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

Слупкі карт таксама можна пашырыць і наладзіць з дапамогай дадатковага кода. Ніжэй паказана пашырэнне .card-columnsкласа з выкарыстаннем таго ж CSS, які мы выкарыстоўваем — слупкоў CSS — для стварэння набору адаптыўных узроўняў для змены колькасці слупкоў.

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