Source

Кортҳо

Кортҳои Bootstrap як контейнери мундариҷаи фасеҳ ва васеъшавандаро бо вариантҳо ва имконоти сершумор таъмин мекунанд.

Дар бораи

Корт як контейнери мундариҷаи чандир ва васеъшаванда аст. Он дорои имконоти сарлавҳаҳо ва поёнтарҳо, доираи васеи мундариҷа, рангҳои заминаи контекстӣ ва имконоти пурқуввати намоишро дар бар мегирад. Агар шумо бо Bootstrap 3 шинос бошед, кортҳо панелҳои кӯҳна, чоҳҳо ва эскизи моро иваз мекунанд. Функсияи шабеҳ ба ин ҷузъҳо ҳамчун синфҳои тағирдиҳанда барои кортҳо дастрас аст.

Мисол

Кортҳо бо нишонаҳо ва услубҳои ҳадди ақалл сохта шудаанд, аммо ба ҳар ҳол тавонистаанд як тонна назорат ва мутобиқсозӣ расонанд. Онҳо бо flexbox сохта шудаанд, ҳамоҳангсозии осонро пешниҳод мекунанд ва бо дигар ҷузъҳои Bootstrap хуб омехта мекунанд. Онҳо ба marginтаври нобаёнӣ надоранд, бинобар ин, агар лозим бошад, утилитаҳои фосиларо истифода баред .

Дар зер намунаи корти асосӣ бо мундариҷаи омехта ва паҳнои собит аст. Кортҳо барои оғоз кардани паҳнои собит надоранд, бинобар ин онҳо табиатан паҳнои пурраи унсури волидайни онро пур мекунанд. Ин ба осонӣ бо имконоти гуногуни андозагирии мо фармоиш дода мешавад.

100% x 180
Сарлавҳаи корт

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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

Намудҳои мундариҷа

Кортҳо доираи васеи мундариҷаро дастгирӣ мекунанд, аз ҷумла тасвирҳо, матн, гурӯҳҳои рӯйхат, истинодҳо ва ғайра. Дар зер намунаҳое ҳастанд, ки дастгирӣ мешаванд.

Бадан

Блоки сохтмони корт ин аст .card-body. Онро ҳар вақте, ки ба шумо қисмати пуркардашуда дар дохили корт лозим аст, истифода баред.

Ин як матн дар дохили корт аст.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Унвонҳои кортҳо тавассути илова .card-titleкардан ба <h*>тег истифода мешаванд. .card-linkБа ҳамин тариқ, истинодҳо бо илова кардани <a>тег илова ва дар паҳлӯи ҳамдигар ҷойгир карда мешаванд .

Субтитрҳо тавассути илова кардани а .card-subtitleба <h*>тег истифода мешаванд. Агар .card-titleва .card-subtitleҷузъҳо дар ягон .card-bodyашё ҷойгир карда шаванд, сарлавҳаи корт ва субтитр ба таври зебо мувофиқат мекунанд.

Сарлавҳаи корт
Субтитрҳои корт

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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

Тасвирҳо

.card-img-topтасвирро дар болои корт ҷойгир мекунад. Бо .card-text, матн метавонад ба корт илова карда шавад. Матн дар дохили .card-textон инчунин метавонад бо барчаспҳои стандартии HTML услубӣ карда шавад.

Сарпӯши тасвир [100%x180]

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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

Рӯйхати гурӯҳҳо

Рӯйхати мундариҷаро дар корт бо гурӯҳи флешдор эҷод кунед.

  • Cras justo odio
  • Dapibus ac facilise дар
  • Вестибулум дар эрос
<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 facilise дар
  • Вестибулум дар эрос
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Равғани ошхона

Якчанд намудҳои мундариҷаро омехта кунед ва мувофиқат кунед, то корти лозимаро созед ё ҳама чизро дар он ҷо партоед. Дар зер сабкҳои тасвирҳо, блокҳо, сабкҳои матн ва гурӯҳи рӯйхат нишон дода шудаанд - ҳама дар корти паҳнои собит печонида шудаанд.

Сарпӯши тасвир [100%x180]
Сарлавҳаи корт

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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

Дар дохили корт сарлавҳа ва/ё поёни факултативиро илова кунед.

Тавсифшуда
Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

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

Сарлавҳаҳои кортро метавон тавассути илова кардани .card-headerэлементҳо <h*>услубӣ кард.

Тавсифшуда
Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

Ба ҷое равед
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Иқтибос

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма
<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 фармоишӣ, синфҳои шабакавӣ, омехтаҳои grid Sass ё утилитаҳо тағир диҳед.

Истифодаи аломатгузории шабака

Бо истифода аз шабака, кортҳоро ба сутунҳо ва сатрҳо мувофиқи зарурат печонед.

Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

Ба ҷое равед
Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

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

Истифодаи коммуналӣ

Барои зуд танзим кардани паҳнои корт аз чанде аз утилитаҳои мавҷудаи андозагирии мо истифода баред.

Сарлавҳаи корт

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

Тугма
Сарлавҳаи корт

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

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

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

Истифодаи CSS фармоишӣ

CSS-и фармоиширо дар варақаҳои сабки худ ё ҳамчун сабкҳои дохилӣ барои муқаррар кардани паҳно истифода баред.

Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

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

Ҳамоҳангсозии матн

Шумо метавонед ҳамоҳангсозии матни ҳама гуна кортҳоро - дар маҷмӯъ ё қисмҳои мушаххас - бо синфҳои ҳамоҳангсозии матни мо зуд тағир диҳед .

Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

Ба ҷое равед
Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

Ба ҷое равед
Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

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

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

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

Бо ҷузъҳои нави Bootstrap ба сарлавҳаи корт (ё блок) каме паймоиш илова кунед .

Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

Ба ҷое равед
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Табобати унвони махсус

Бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ.

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

Тасвирҳо

Кортҳо дорои якчанд имконоти кор бо тасвирҳо мебошанд. Аз замима кардани "сарпӯшҳои тасвир" дар ҳарду охири корт, пӯшонидани тасвирҳо бо мундариҷаи корт ё танҳо ҷойгир кардани тасвирро дар корт интихоб кунед.

Сарпӯши тасвирҳо

Ба монанди сарлавҳаҳо ва поёни кортҳо, кортҳо метавонанд "сарпӯшҳои тасвирӣ" -ро дар боло ё поёни корт дар бар гиранд.

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

Охирин навсозӣ 3 дақиқа пеш

Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

Охирин навсозӣ 3 дақиқа пеш

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

Қабатҳои тасвирӣ

Тасвирро ба заминаи корт табдил диҳед ва матни корти худро дар қабати боло ҷойгир кунед. Вобаста аз тасвир, шумо метавонед ба сабкҳо ё хидматҳои иловагӣ ниёз доред ё надоред.

100% x270
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

Охирин навсозӣ 3 дақиқа пеш

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

Услубҳои корт

Кортҳо дорои имконоти гуногун барои танзими замина, сарҳадҳо ва ранги онҳо мебошанд.

Замина ва ранг

Барои тағир додани намуди корт утилитаҳои матн ва заминаро истифода баред .

Сарлавҳа
Унвони асосии корт

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти дуюм

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти муваффақият

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти хатар

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Сарлавҳаи корти огоҳӣ

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Сарлавҳаи корти маълумот

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти сабук

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти торик

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Интиқоли маъно ба технологияҳои ёрирасон

Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.

Сарҳад

Барои тағир додани корт аз хидматҳои сарҳадӣ истифода баред . border-colorДар хотир доред, ки шумо метавонед .text-{color}дарсҳоро ба волидайн .cardё як қисми мундариҷаи корт тавре ки дар зер нишон дода шудааст, гузоред.

Сарлавҳа
Унвони асосии корт

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти дуюм

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти муваффақият

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти хатар

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Сарлавҳаи корти огоҳӣ

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Сарлавҳаи корти маълумот

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти сабук

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

Сарлавҳа
Унвони корти торик

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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

Утилитҳои Mixins

Шумо инчунин метавонед сарҳадҳои сарлавҳа ва поёни кортро ҳангоми зарурат тағир диҳед ва ҳатто онҳоро background-colorбо .bg-transparent.

Сарлавҳа
Унвони корти муваффақият

Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.

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

Тарҳбандии корт

Илова ба тарҳрезии мундариҷа дар дохили кортҳо, Bootstrap якчанд вариантҳоро барои ҷойгиркунии силсилаи кортҳо дар бар мегирад. Дар айни замон, ин имконоти тарҳбандӣ ҳанӯз ҷавобгӯ нестанд .

Гурӯҳҳои кортҳо

Гурӯҳҳои кортро истифода баред, то кортҳоро ҳамчун як унсури ягонаи замимашуда бо сутунҳои баробар ва баландии паҳнӣ пешниҳод кунед. Гурӯҳҳои кортҳо display: flex;барои расидан ба андозаи якхелаи худ истифода мебаранд.

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

Охирин навсозӣ 3 дақиқа пеш

100% x 180
Сарлавҳаи корт

Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.

Охирин навсозӣ 3 дақиқа пеш

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.

Охирин навсозӣ 3 дақиқа пеш

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

Ҳангоми истифодаи гурӯҳҳои корт бо поёнтар, мундариҷаи онҳо ба таври худкор як қатор мешавад.

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

100% x 180
Сарлавҳаи корт

Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.

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

Табақҳои корт

Маҷмӯи кортҳои паҳнои ва баландии баробар, ки ба ҳамдигар пайваст нестанд, лозим аст? Декҳои кортро истифода баред.

100% x 200
Сарлавҳаи корт

Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

Охирин навсозӣ 3 дақиқа пеш

100% x 200
Сарлавҳаи корт

Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.

Охирин навсозӣ 3 дақиқа пеш

100% x 200
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.

Охирин навсозӣ 3 дақиқа пеш

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

Мисли гурӯҳҳои кортҳо, поёни кортҳо дар саҳнҳо ба таври худкор як қатор мешаванд.

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

100% x 180
Сарлавҳаи корт

Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.

100% x 180
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.

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

Сутунҳои корт

Кортҳоро метавон дар сутунҳои монанди Masonry бо танҳо CSS бо печонидани онҳо дар .card-columns. Кортҳо бо columnхосиятҳои CSS ба ҷои flexbox барои ҳамоҳангсозии осон сохта шудаанд. Кортҳо аз боло ба поён ва чап ба рост фармоиш дода мешаванд.

Сарҳо боло! Масофаи шумо бо сутунҳои корт метавонад фарқ кунад. Барои пешгирӣ кардани шикастани кортҳо дар сутунҳо, мо бояд онҳоро display: inline-blockтавре column-break-inside: avoidгузорем, ки ҳанӯз ҳалли тирногузар нест.

100% x160
Сарлавҳаи корт, ки ба сатри нав печонида мешавад

Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма
100% x160
Сарлавҳаи корт

Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.

Охирин навсозӣ 3 дақиқа пеш

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Дараҷаи бутун.

Шахси машҳур дар Сарлавҳаи Сарчашма
Сарлавҳаи корт

Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.

Охирин навсозӣ 3 дақиқа пеш

100% x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма
Сарлавҳаи корт

Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.

Охирин навсозӣ 3 дақиқа пеш

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

Сутунҳои корт инчунин метавонанд бо баъзе рамзи иловагӣ васеъ ва фармоишӣ карда шаванд. Дар зер васеъшавии .card-columnsсинф бо истифода аз ҳамон CSS - сутунҳои CSS - барои тавлиди маҷмӯи сатҳҳои ҷавобгӯ барои тағир додани шумораи сутунҳо нишон дода шудааст.

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