Карты

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

Аб

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

Прыклад

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

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

Назва карты

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

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

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

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

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

Цела

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

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

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

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

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

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

Назва карты

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

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

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

Малюнкі

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

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

Спіс груп

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

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

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

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

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

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

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

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

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

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

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

Назва карты

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

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

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

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

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

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

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

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

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

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

Цытата

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

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

<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 дні таму

<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">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">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Малюнкі

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

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

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

Назва карты

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

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

Назва карты

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

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

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

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

Назва карты

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

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

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

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

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

Назва карты

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." 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;для прымацавання з аднолькавымі памерамі, пачынаючы з smпункту разрыву.

Назва карты

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

Назва карты

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

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

Назва карты

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

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

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

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

Назва карты

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

Назва карты

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

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

Назва карты

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

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

Калоды карт

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

Назва карты

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

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

Назва карты

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

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

Назва карты

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

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

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

Назва карты

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

Назва карты

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

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

Назва карты

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

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

Карты сеткі

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

Назва карты

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

Назва карты

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

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

Назва карты

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

Назва карты

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

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

Назва карты

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

Назва карты

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

Назва карты

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

Слупкі карт

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

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Card title

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

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

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

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

Назва карты

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

Апошняе абнаўленне 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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

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

Карты

Аб

Прыклад

Назва карты

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

Цела

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

Назва карты

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

Малюнкі

Спіс груп

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

Назва карты

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

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

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

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

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

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

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

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

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

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

Назва карты

Назва карты

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

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

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

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

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

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

Навігацыя

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

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

Малюнкі

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

Назва карты

Назва карты

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

Назва карты

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

Назва карты

Стылі картак

Фон і колер

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

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

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

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

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

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

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

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

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

Граніца

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

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

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

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

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

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

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

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

Утыліты Mixins

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

Макет карты

Групы карт

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Калоды карт

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Назва карты

Карты сеткі