Кортҳо

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

Дар бораи

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

Мисол

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

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

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

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

Ба ҷое равед

<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 услубӣ карда шавад.

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

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

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

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

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

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

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>

Тавсифшуда

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

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

Ба ҷое равед

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 фармоишӣ, синфҳои шабакавӣ, омехтаҳои 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>

Тасвирҳо

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

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

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

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

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

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

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

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

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

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

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

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

Охирин навсозӣ 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;барои расидан ба андозаи якхелаи худ истифода мебаранд.

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

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

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

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

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

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

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

Охирин навсозӣ 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>

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

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

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

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

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

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

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

Охирин навсозӣ 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>
    </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>

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

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

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

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

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

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

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

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

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

Охирин навсозӣ 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>

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

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

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

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

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

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

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

Охирин навсозӣ 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 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гузорем, ки ҳанӯз ҳалли тирногузар нест.

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

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

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

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

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

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

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

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

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

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

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

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

Кортҳо

Дар бораи

Мисол

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

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

Бадан

Унвонҳо, матн ва истинодҳо

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

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

Тасвирҳо

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

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

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

Сарлавҳа ва поёнот

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

Тавсифшуда

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

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

Андоза

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

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

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

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

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

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

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

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

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

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

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

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

Навигатсия

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

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

Тасвирҳо

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

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

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

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

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

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

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

Унвони асосии корт

Унвони корти дуюм

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

Унвони корти хатар

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

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

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

Унвони корти торик

Интиқоли маъно ба технологияҳои ёрирасон

Сарҳад

Унвони асосии корт

Унвони корти дуюм

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

Унвони корти хатар

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

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

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

Унвони корти торик

Утилитҳои Mixins

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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