Кортҳо

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

Дар ин саҳифа

Дар бораи

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

Мисол

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

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

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

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

Ба ҷое равед

html

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

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

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

Бадан

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

Ин як матн дар дохили корт аст.

html

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

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

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

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

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

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

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

Истиноди корт Истиноди дигар

html

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

Тасвирҳо

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

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

html

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

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

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

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

html

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

Тавсифшуда

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

html

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

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Поёни корт

html

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

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

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

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

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

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Истиноди корт Истиноди дигар

html

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

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

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

Тавсифшуда

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

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

Ба ҷое равед

html

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

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

Тавсифшуда

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

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

Ба ҷое равед

html

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

Иқтибос

Иқтибоси маъруф, ки дар унсури блоки иқтибос мавҷуд аст.

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

html

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

Тавсифшуда

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

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

Ба ҷое равед

2 руз пеш

html

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

Андоза

Кортҳо widthбарои оғоз кардан ягон мушаххас надоранд, аз ин рӯ онҳо 100% васеъ хоҳанд буд, агар тартиби дигаре пешбинӣ нашуда бошад. Шумо метавонед инро дар ҳолати зарурӣ бо CSS фармоишӣ, синфҳои шабакавӣ, омехтаҳои grid Sass ё утилитаҳо тағир диҳед.

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

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

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

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

Ба ҷое равед

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

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

Ба ҷое равед

html

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

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

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

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

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

Тугма

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

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

Тугма

html

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

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

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

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

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

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

Ба ҷое равед

html

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

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

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

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

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

Ба ҷое равед

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

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

Ба ҷое равед

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

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

Ба ҷое равед

html

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

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

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

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

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

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

Ба ҷое равед

html

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

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

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

Ба ҷое равед

html

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

Тасвирҳо

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

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

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

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

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

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

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

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

html

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

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

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

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

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

html

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

Дар хотир доред, ки мундариҷа набояд аз баландии тасвир калонтар бошад. Агар мундариҷа аз тасвир калонтар бошад, мундариҷа берун аз тасвир нишон дода мешавад.

Уфуқӣ

Бо истифода аз омезиши синфҳои шабакавӣ ва коммуналӣ, кортҳоро метавон ба таври уфуқӣ ба тариқи мобилии дӯстона ва ҷавобгӯ табдил дод. Дар мисоли дар поён овардашуда, мо ҷӯйборҳои шабакаро бо хориҷ мекунем .g-0ва дарсҳоро истифода мебарем .col-md-*, то кортро дар mdнуқтаи кандашавӣ уфуқӣ гардонем. Вобаста ба мундариҷаи корти шумо метавонад ислоҳоти иловагӣ лозим шавад.

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

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

html

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

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

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

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

Дар v5.2.0 илова карда шудааст

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

html

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

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

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

Сарҳад

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

Сарлавҳа

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

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

html

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

Утилитҳои Mixins

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

Сарлавҳа

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

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

Поёнтар

html

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

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

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

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

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

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

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

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

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

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

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

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

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

html

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

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

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

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

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

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

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

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

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

html

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

Кортҳои шабакавӣ

Системаи шабакаи Bootstrap ва .row-colsсинфҳои онро барои назорат кардани чанд сутуни шабака (дар атрофи кортҳои шумо печонидашуда) дар як сатр нишон диҳед. Масалан, дар ин ҷо .row-cols-1кортҳо дар як сутун ҷойгир карда мешаванд ва .row-cols-md-2чор корт ба паҳнои баробар дар сатрҳои сершумор аз нуқтаи шикасти миёна то тақсим карда мешавад.

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

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

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

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

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

html

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

Онро ба тағир диҳед .row-cols-3ва шумо пӯшиши корти чорумро хоҳед дид.

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

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

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

html

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

Вақте ки ба шумо баландии баробар лозим аст, .h-100ба кортҳо илова кунед. Агар шумо бо нобаёнӣ баландии баробар хоҳед, шумо метавонед $card-height: 100%дар Sass муқаррар кунед.

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

Ин як корти кӯтоҳ аст.

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

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

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

html

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

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

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

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

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

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

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

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

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

html

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

Масон

Дар v4мо як техникаи танҳо CSS-ро барои тақлид кардани рафтори сутунҳои ба монанди Masonry истифода мебурдем, аммо ин техника бо бисёр оқибатҳои ногувор дучор омад . Агар шумо хоҳед, ки ин намуди тарҳро дар v5. Masonry ба Bootstrap дохил карда нашудааст , аммо мо як мисоли намоишӣ додем , то ба шумо дар оғози кор кӯмак кунад.

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, кортҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .cardбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

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

Тағйирёбандаҳои Sass

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

Кортҳо

Дар бораи

Мисол

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

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

Бадан

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

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

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

Тасвирҳо

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

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

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

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

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

Тавсифшуда

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

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

Андоза

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

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

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

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

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

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

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

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

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

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

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

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

Навигатсия

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

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

Тасвирҳо

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

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

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

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

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

Уфуқӣ

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

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

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

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

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

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

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

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

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

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

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

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

Сарҳад

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

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

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

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

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

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

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

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

Утилитҳои Mixins

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

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

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

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

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

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

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

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

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

Кортҳои шабакавӣ

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

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

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

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

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

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

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