Карты

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

На гэтай старонцы

Аб

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

Прыклад

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

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

Назва карты

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

Ідзі куды-небудзь

html

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

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

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

Цела

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

Гэта некаторы тэкст у целе карты.

html

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

Загалоўкі, тэкст і спасылкі

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

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

Назва карты

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

Спасылка на картку Яшчэ адна спасылка

html

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

Малюнкі

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

html

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

Спіс груп

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

Прадмет
Другі пункт
Трэці пункт

html

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

Рэкамендаваны

Прадмет
Другі пункт
Трэці пункт

html

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

Прадмет
Другі пункт
Трэці пункт

Калонтытул карты

html

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

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

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

Назва карты

Прадмет
Другі пункт
Трэці пункт

Спасылка на картку Яшчэ адна спасылка

html

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

Верхні і ніжні калантытула

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

Рэкамендаваны

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

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

Ідзі куды-небудзь

html

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

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

Рэкамендаваны

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

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

Ідзі куды-небудзь

html

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

Цытата

Добра вядомая цытата, якая змяшчаецца ў элеменце blockquote.

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

html

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

Рэкамендаваны

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

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

Ідзі куды-небудзь

2 дні таму

html

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

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

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

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

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

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

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

Ідзі куды-небудзь

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

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

Ідзі куды-небудзь

html

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

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

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

Назва карты

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

Кнопка

Назва карты

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

Кнопка

html

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

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

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

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

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

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

Ідзі куды-небудзь

html

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

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

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

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

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

Ідзі куды-небудзь

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

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

Ідзі куды-небудзь

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

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

Ідзі куды-небудзь

html

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

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

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

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

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

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

Ідзі куды-небудзь

html

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

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

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

Ідзі куды-небудзь

html

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

Малюнкі

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

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

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

Назва карты

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

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

Назва карты

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

html

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

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

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

Назва карты

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

html

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

Звярніце ўвагу, што змест не павінен перавышаць вышыню выявы. Калі змесціва большае за выяву, змесціва будзе адлюстроўвацца па-за выявай.

Гарызантальны

Выкарыстоўваючы камбінацыю сетак і карысных класаў, карты можна зрабіць гарызантальнымі ў мабільным і спагадным спосабе. У прыведзеным ніжэй прыкладзе мы выдаляем жолабы сеткі .g-0і выкарыстоўваем .col-md-*класы, каб зрабіць карту гарызантальнай у mdкропцы перапынку. У залежнасці ад змесціва карты могуць спатрэбіцца дадатковыя карэкціроўкі.

Назва карты

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

html

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

Стылі картак

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

Фон і колер

Дададзена ў v5.2.0

Ўсталяваць background-colorз кантрасным пярэднім планам colorз нашымі .text-bg-{color}памочнікамі . Раней патрабавалася ўручную спалучаць выбраныя ўтыліты .text-{color}і .bg-{color}ўтыліты для кладкі, якія вы ўсё яшчэ можаце выкарыстоўваць, калі хочаце.

Загаловак

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

Загаловак

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

Загаловак

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

Загаловак

Назва карты небяспекі

Загаловак

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

Загаловак

Назва інфармацыйнай карты

Загаловак

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

Загаловак

Цёмная назва карты

html

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

Перадача значэння дапаможных тэхналогій

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

Граніца

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

Загаловак

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

Загаловак

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

Загаловак

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

Загаловак

Назва карты небяспекі

Загаловак

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

Загаловак

Назва інфармацыйнай карты

Загаловак

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

Загаловак

Цёмная назва карты

html

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

Утыліты Mixins

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

Загаловак

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

Ніжні калонтытул

html

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

Макет карты

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

Групы карт

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

Назва карты

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

Назва карты

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

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

Назва карты

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

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

html

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

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

Назва карты

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

Назва карты

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

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

Назва карты

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

html

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

Карты сеткі

Выкарыстоўвайце сеткавую сістэму Bootstrap і яе .row-colsкласы , каб кантраляваць, колькі слупкоў сеткі (абгорнутых вакол вашых картак) вы паказваеце ў радку. Напрыклад, вось .row-cols-1выкладванне карт у адзін слупок і .row-cols-md-2раздзяленне чатырох карт на аднолькавую шырыню ў некалькіх радках, ад сярэдняй кропкі разрыву ўверх.

Назва карты

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

Назва карты

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

Назва карты

html

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

Зменіце яго на, .row-cols-3і вы ўбачыце чацвёртую абгортку карты.

Назва карты

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

Назва карты

html

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

Калі патрэбна роўная вышыня, дадайце .h-100да карт. Калі вы жадаеце мець аднолькавыя вышыні па змаўчанні, вы можаце ўсталяваць $card-height: 100%у Sass.

Назва карты

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

Назва карты

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

Назва карты

html

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

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

Назва карты

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

Назва карты

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

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

Назва карты

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

html

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

Мураванне

Мы v4выкарыстоўвалі тэхніку толькі CSS, каб імітаваць паводзіны калон, падобных на масонства , але гэтая тэхніка мела шмат непрыемных пабочных эфектаў . Калі вы хочаце мець гэты тып макета ў v5, вы можаце проста скарыстацца плагінам Masonry. Masonry не ўваходзіць у Bootstrap , але мы зрабілі дэма-прыклад , каб дапамагчы вам пачаць.

CSS

Пераменныя

Дададзена ў v5.2.0

У рамках падыходу Bootstrap, які развіваецца да зменных CSS, карткі цяпер выкарыстоўваюць лакальныя зменныя CSS .cardдля палепшанай налады ў рэжыме рэальнага часу. Значэнні для зменных CSS задаюцца праз Sass, таму налада Sass па-ранейшаму падтрымліваецца.

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

Зменныя Sass

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

Карты

Аб

Прыклад

Назва карты

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

Цела

Загалоўкі, тэкст і спасылкі

Назва карты

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

Малюнкі

Спіс груп

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

Назва карты

Верхні і ніжні калантытула

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

Рэкамендаваны

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

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

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

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

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

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

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

Назва карты

Назва карты

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

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

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

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

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

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

Навігацыя

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

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

Малюнкі

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

Назва карты

Назва карты

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

Назва карты

Гарызантальны

Назва карты

Стылі картак

Фон і колер

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

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

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

Назва карты небяспекі

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

Назва інфармацыйнай карты

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

Цёмная назва карты

Перадача значэння дапаможных тэхналогій

Граніца

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

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

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

Назва карты небяспекі

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

Назва інфармацыйнай карты

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

Цёмная назва карты

Утыліты Mixins

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

Макет карты

Групы карт

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Карты сеткі

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты