Source

Карты

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

Аб

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

Прыклад

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

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

Placeholder Image cap
Назва карты

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

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

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

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

Цела

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

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

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

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

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

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

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

Малюнкі

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

Placeholder Image cap

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

<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 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>

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

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

Placeholder Image cap
Назва карты

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестыбулум і эрас
<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>
Рэкамендаваны
Спецыяльны рэжым тытула

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

Ідзі куды-небудзь
<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="#" 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>

Малюнкі

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

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

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

Placeholder Image cap
Назва карты

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

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

Назва карты

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

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

Placeholder Image cap
<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>

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

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

Placeholder Card image
Назва карты

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

Апошняе абнаўленне 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кропцы перапынку. У залежнасці ад змесціва карты могуць спатрэбіцца дадатковыя карэкціроўкі.

Placeholder Image
Назва карты

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

Апошняе абнаўленне 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>

Утыліты 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;для дасягнення іх аднастайнага памеру.

Placeholder Image cap
Назва карты

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

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

Placeholder Image cap
Назва карты

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

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

Placeholder Image cap
Назва карты

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

Апошняе абнаўленне 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>

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

<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>

Калоды карт

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

Placeholder Image cap
Назва карты

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

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

Placeholder Image cap
Назва карты

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

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

Placeholder Image cap
Назва карты

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

Апошняе абнаўленне 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>

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

<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раздзяленне чатырох карт на аднолькавую шырыню ў некалькіх радках, ад сярэдняй кропкі разрыву ўверх.

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

<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і вы ўбачыце чацвёртую абгортку карты.

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

<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.

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

Гэта кароткая карта.

Placeholder Image cap
Назва карты

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

Placeholder Image cap
Назва карты

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

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

Слупкі карт

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

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

Placeholder Image cap
Назва карткі, якая пераходзіць на новы радок

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

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

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

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

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

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

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

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

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

Placeholder Card image

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;
  }
}