Кортҳои Bootstrap як контейнери мундариҷаи фасеҳ ва васеъшавандаро бо вариантҳо ва имконоти сершумор таъмин мекунанд.
Дар бораи
Корт як контейнери мундариҷаи чандир ва васеъшаванда аст. Он дорои имконоти сарлавҳаҳо ва поёнтарҳо, доираи васеи мундариҷа, рангҳои заминаи контекстӣ ва имконоти пурқуввати намоишро дар бар мегирад. Агар шумо бо Bootstrap 3 шинос бошед, кортҳо панелҳои кӯҳна, чоҳҳо ва эскизи моро иваз мекунанд. Функсияи шабеҳ ба ин ҷузъҳо ҳамчун синфҳои тағирдиҳанда барои кортҳо дастрас аст.
Мисол
Кортҳо бо нишонаҳо ва услубҳои ҳадди ақалл сохта шудаанд, аммо ба ҳар ҳол тавонистаанд як тонна назорат ва мутобиқсозӣ расонанд. Онҳо бо flexbox сохта шудаанд, ҳамоҳангсозии осонро пешниҳод мекунанд ва бо дигар ҷузъҳои Bootstrap хуб омехта мекунанд. Онҳо ба margin
таври нобаёнӣ надоранд, бинобар ин, агар лозим бошад, утилитаҳои фосиларо истифода баред .
Дар зер намунаи корти асосӣ бо мундариҷаи омехта ва паҳнои собит аст. Кортҳо барои оғоз кардани паҳнои собит надоранд, бинобар ин онҳо табиатан паҳнои пурраи унсури волидайни онро пур мекунанд. Ин ба осонӣ бо имконоти гуногуни андозагирии мо фармоиш дода мешавад.
Placeholder
Image cap
Сарлавҳаи корт
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Ба ҷое равед
Нусхабардорӣ
<div class= "card" style= "width: 18rem;" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href= "#" class= "btn btn-primary" > Go somewhere</a>
</div>
</div>
Намудҳои мундариҷа
Кортҳо доираи васеи мундариҷаро дастгирӣ мекунанд, аз ҷумла тасвирҳо, матн, гурӯҳҳои рӯйхат, истинодҳо ва ғайра. Дар зер намунаҳое ҳастанд, ки дастгирӣ мешаванд.
Бадан
Блоки сохтмони корт ин аст .card-body
. Онро ҳар вақте, ки ба шумо қисмати пуркардашуда дар дохили корт лозим аст, истифода баред.
Ин як матн дар дохили корт аст.
Нусхабардорӣ
<div class= "card" >
<div class= "card-body" >
This is some text within a card body.
</div>
</div>
Унвонҳо, матн ва истинодҳо
Унвонҳои кортҳо тавассути илова .card-title
кардан ба <h*>
тег истифода мешаванд. .card-link
Ба ҳамин тариқ, истинодҳо бо илова кардани <a>
тег илова ва дар паҳлӯи ҳамдигар ҷойгир карда мешаванд .
Субтитрҳо тавассути илова кардани а .card-subtitle
ба <h*>
тег истифода мешаванд. Агар .card-title
ва .card-subtitle
ҷузъҳо дар ягон .card-body
ашё ҷойгир карда шаванд, сарлавҳаи корт ва субтитр ба таври зебо мувофиқат мекунанд.
Сарлавҳаи корт
Субтитрҳои корт
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Истиноди корт Истиноди
дигар
Нусхабардорӣ
<div class= "card" style= "width: 18rem;" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<h6 class= "card-subtitle mb-2 text-muted" > Card subtitle</h6>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href= "#" class= "card-link" > Card link</a>
<a href= "#" class= "card-link" > Another link</a>
</div>
</div>
Тасвирҳо
.card-img-top
тасвирро дар болои корт ҷойгир мекунад. Бо .card-text
, матн метавонад ба корт илова карда шавад. Матн дар дохили .card-text
он инчунин метавонад бо барчаспҳои стандартии HTML услубӣ карда шавад.
Placeholder
Image cap
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Нусхабардорӣ
<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>
Рӯйхати гурӯҳҳо
Рӯйхати мундариҷаро дар корт бо гурӯҳи флешдор эҷод кунед.
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;" >
<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-footer" >
Card footer
</div>
</div>
Равғани ошхона
Якчанд намудҳои мундариҷаро омехта кунед ва мувофиқат кунед, то корти лозимаро созед ё ҳама чизро дар он ҷо партоед. Дар зер сабкҳои тасвирҳо, блокҳо, сабкҳои матн ва гурӯҳи рӯйхат нишон дода шудаанд - ҳама дар корти паҳнои собит печонида шудаанд.
Placeholder
Image cap
Сарлавҳаи корт
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Cras justo odio
Dapibus ac facilise дар
Вестибулум дар эрос
Нусхабардорӣ
<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" > 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= "#" tabindex= "-1" aria-disabled= "true" > 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= "#" tabindex= "-1" aria-disabled= "true" > 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>
Тасвирҳо
Кортҳо дорои якчанд имконоти кор бо тасвирҳо мебошанд. Аз замима кардани "сарпӯшҳои тасвир" дар ҳарду охири корт, пӯшонидани тасвирҳо бо мундариҷаи корт ё танҳо ҷойгир кардани тасвирро дар корт интихоб кунед.
Сарпӯши тасвирҳо
Ба монанди сарлавҳаҳо ва поёни кортҳо, кортҳо метавонанд "сарпӯшҳои тасвирӣ" -ро дар боло ё поёни корт дар бар гиранд.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Охирин навсозӣ 3 дақиқа пеш
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Охирин навсозӣ 3 дақиқа пеш
Placeholder
Image cap
Нусхабардорӣ
<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>
Қабатҳои тасвирӣ
Тасвирро ба заминаи корт табдил диҳед ва матни корти худро дар қабати боло ҷойгир кунед. Вобаста аз тасвир, шумо метавонед ба сабкҳо ё хидматҳои иловагӣ ниёз доред ё надоред.
Placeholder
Card image
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Охирин навсозӣ 3 дақиқа пеш
Нусхабардорӣ
<div class= "card bg-dark text-white" >
<img src= "..." class= "card-img" alt= "..." >
<div class= "card-img-overlay" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" > Last updated 3 mins ago</p>
</div>
</div>
Дар хотир доред, ки мундариҷа набояд аз баландии тасвир калонтар бошад. Агар мундариҷа аз тасвир калонтар бошад, мундариҷа берун аз тасвир нишон дода мешавад.
Уфуқӣ
Бо истифода аз омезиши синфҳои шабакавӣ ва коммуналӣ, кортҳоро метавон ба таври уфуқӣ ба тариқи мобилии дӯстона ва ҷавобгӯ табдил дод. Дар мисоли дар поён овардашуда, мо ҷӯйборҳои шабакаро бо хориҷ мекунем .no-gutters
ва дарсҳоро истифода мебарем .col-md-*
, то кортро дар md
нуқтаи кандашавӣ уфуқӣ гардонем. Вобаста ба мундариҷаи корти шумо метавонад ислоҳоти иловагӣ лозим шавад.
Placeholder
Image
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Охирин навсозӣ 3 дақиқа пеш
Нусхабардорӣ
<div class= "card mb-3" style= "max-width: 540px;" >
<div class= "row no-gutters" >
<div class= "col-md-4" >
<img src= "..." class= "card-img" alt= "..." >
</div>
<div class= "col-md-8" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Услубҳои корт
Кортҳо дорои имконоти гуногун барои танзими замина, сарҳадҳо ва ранги онҳо мебошанд.
Замина ва ранг
Барои тағир додани намуди корт утилитаҳои матн ва заминаро истифода баред .
Унвони асосии корт
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти дуюм
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти муваффақият
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти хатар
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Сарлавҳаи корти огоҳӣ
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Сарлавҳаи корти маълумот
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти сабук
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти торик
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Нусхабардорӣ
<div class= "card text-white bg-primary mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Primary card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card text-white bg-secondary mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Secondary card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card text-white bg-success mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Success card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card text-white bg-danger mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Danger card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card text-white bg-warning mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Warning card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card text-white bg-info mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Info card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card bg-light mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Light card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card text-white bg-dark mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Dark card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-only
синф пинҳоншуда дохил карда мешавад.
Сарҳад
Барои тағир додани корт аз хидматҳои сарҳадӣ истифода баред . border-color
Дар хотир доред, ки шумо метавонед .text-{color}
дарсҳоро ба волидайн .card
ё як қисми мундариҷаи корт тавре ки дар зер нишон дода шудааст, гузоред.
Унвони асосии корт
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти дуюм
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти муваффақият
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти хатар
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Сарлавҳаи корти огоҳӣ
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Сарлавҳаи корти маълумот
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти сабук
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Унвони корти торик
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Нусхабардорӣ
<div class= "card border-primary mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-primary" >
<h5 class= "card-title" > Primary card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-secondary mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-secondary" >
<h5 class= "card-title" > Secondary card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-success mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-success" >
<h5 class= "card-title" > Success card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-danger mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-danger" >
<h5 class= "card-title" > Danger card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-warning mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-warning" >
<h5 class= "card-title" > Warning card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-info mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-info" >
<h5 class= "card-title" > Info card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-light mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body" >
<h5 class= "card-title" > Light card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class= "card border-dark mb-3" style= "max-width: 18rem;" >
<div class= "card-header" > Header</div>
<div class= "card-body text-dark" >
<h5 class= "card-title" > Dark card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Утилитҳои Mixins
Шумо инчунин метавонед сарҳадҳои сарлавҳа ва поёни кортро ҳангоми зарурат тағир диҳед ва ҳатто онҳоро background-color
бо .bg-transparent
.
Унвони корти муваффақият
Якчанд матни мисоли фаврӣ барои сохтани унвони корт ва қисми зиёди мундариҷаи кортро ташкил медиҳад.
Нусхабардорӣ
<div class= "card border-success mb-3" style= "max-width: 18rem;" >
<div class= "card-header bg-transparent border-success" > Header</div>
<div class= "card-body text-success" >
<h5 class= "card-title" > Success card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class= "card-footer bg-transparent border-success" > Footer</div>
</div>
Тарҳбандии корт
Илова ба тарҳрезии мундариҷа дар дохили кортҳо, Bootstrap якчанд вариантҳоро барои ҷойгиркунии силсилаи кортҳо дар бар мегирад. Дар айни замон, ин имконоти тарҳбандӣ ҳанӯз ҷавобгӯ нестанд .
Гурӯҳҳои кортҳо
Гурӯҳҳои кортро истифода баред, то кортҳоро ҳамчун як унсури ягонаи замимашуда бо сутунҳои баробар ва баландии паҳнӣ пешниҳод кунед. Гурӯҳҳои кортҳо аз ҳамҷоя оғоз мешаванд ва display: flex;
барои пайваст шудан бо андозаҳои якхела аз sm
нуқтаи кандашавӣ истифода мешаванд.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Охирин навсозӣ 3 дақиқа пеш
Placeholder
Image cap
Сарлавҳаи корт
Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Охирин навсозӣ 3 дақиқа пеш
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.
Охирин навсозӣ 3 дақиқа пеш
Нусхабардорӣ
<div class= "card-group" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Ҳангоми истифодаи гурӯҳҳои корт бо поёнтар, мундариҷаи онҳо ба таври худкор як қатор мешавад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.
Нусхабардорӣ
<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>
Табақҳои корт
Маҷмӯи кортҳои паҳнои ва баландии баробар, ки ба ҳамдигар пайваст нестанд, лозим аст? Декҳои кортро истифода баред.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Охирин навсозӣ 3 дақиқа пеш
Placeholder
Image cap
Сарлавҳаи корт
Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Охирин навсозӣ 3 дақиқа пеш
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.
Охирин навсозӣ 3 дақиқа пеш
Нусхабардорӣ
<div class= "card-deck" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Мисли гурӯҳҳои кортҳо, поёни кортҳо дар саҳнҳо ба таври худкор як қатор мешаванд.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти васеътар бо матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин корт дорои мундариҷаи ҳатто дарозтар аз аввалинест, ки амали баландии баробарро нишон медиҳад.
Нусхабардорӣ
<div class= "card-deck" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
</div>
Кортҳои шабакавӣ
Системаи шабакаи Bootstrap ва .row-cols
синфҳои онро барои назорат кардани чанд сутуни шабака (дар атрофи кортҳои шумо печонидашуда) дар як сатр нишон диҳед. Масалан, дар ин ҷо .row-cols-1
кортҳо дар як сутун ҷойгир карда мешаванд ва .row-cols-md-2
чор корт ба паҳнои баробар дар сатрҳои сершумор аз нуқтаи шикасти миёна то тақсим карда мешавад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Нусхабардорӣ
<div class= "row row-cols-1 row-cols-md-2" >
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Онро ба тағир диҳед .row-cols-3
ва шумо пӯшиши корти чорумро хоҳед дид.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Нусхабардорӣ
<div class= "row row-cols-1 row-cols-md-3" >
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Вақте ки ба шумо баландии баробар лозим аст, .h-100
ба кортҳо илова кунед. Агар шумо бо нобаёнӣ баландии баробар хоҳед, шумо метавонед $card-height: 100%
дар Sass муқаррар кунед.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти кӯтоҳ аст.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Placeholder
Image cap
Сарлавҳаи корт
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Нусхабардорӣ
<div class= "row row-cols-1 row-cols-md-3" >
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a short card.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Сутунҳои корт
Кортҳоро метавон дар сутунҳои монанди Masonry бо танҳо CSS бо печонидани онҳо дар .card-columns
. Кортҳо бо column
хосиятҳои CSS ба ҷои flexbox барои ҳамоҳангсозии осон сохта шудаанд. Кортҳо аз боло ба поён ва чап ба рост фармоиш дода мешаванд.
Сарҳо боло! Масофаи шумо бо сутунҳои корт метавонад фарқ кунад. Барои пешгирӣ кардани шикастани кортҳо дар сутунҳо, мо бояд онҳоро display: inline-block
тавре column-break-inside: avoid
гузорем, ки ҳанӯз ҳалли тирногузар нест.
Placeholder
Image cap
Сарлавҳаи корт, ки ба хати нав печонида мешавад
Ин як корти дарозтар бо матни дастгирӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад. Ин мундариҷа каме дарозтар аст.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
Placeholder
Image cap
Сарлавҳаи корт
Ин корт дорои матни пуштибонӣ дар зер ҳамчун пешбари табиӣ ба мундариҷаи иловагӣ мебошад.
Охирин навсозӣ 3 дақиқа пеш
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Дараҷаи бутун.
Сарлавҳаи корт
Ин корт дорои унвони муқаррарӣ ва параграфи кӯтоҳи матн дар поён аст.
Охирин навсозӣ 3 дақиқа пеш
Placeholder
Card image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
Сарлавҳаи корт
Ин корти дигар бо унвон ва матни дастгирӣ дар зер аст. Ин корт дорои мундариҷаи иловагӣ мебошад, то онро дар маҷмӯъ каме баландтар кунад.
Охирин навсозӣ 3 дақиқа пеш
Нусхабардорӣ
<div class= "card-columns" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title that wraps to a new line</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class= "card p-3" >
<blockquote class= "blockquote mb-0 card-body" >
<p> 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 src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card bg-primary text-white text-center p-3" >
<blockquote class= "blockquote mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class= "blockquote-footer text-white" >
<small>
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card text-center" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has a regular title and short paragraphy of text below it.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
</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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Сутунҳои корт инчунин метавонанд бо баъзе рамзи иловагӣ васеъ ва фармоишӣ карда шаванд. Дар зер васеъшавии .card-columns
синф бо истифода аз ҳамон CSS - сутунҳои CSS - барои тавлиди маҷмӯи сатҳҳои ҷавобгӯ барои тағир додани шумораи сутунҳо нишон дода шудааст.
Нусхабардорӣ
.card-columns {
@include media-breakpoint-only ( lg ) {
column-count : 4 ;
}
@include media-breakpoint-only ( xl ) {
column-count : 5 ;
}
}