Намунаҳои grid bootstrap

Тарҳҳои асосии шабака барои шиносоӣ бо сохтмон дар дохили системаи шабакаи Bootstrap.

Дар ин мисолҳо .themed-grid-colсинф ба сутунҳо барои илова кардани баъзе мавзӯъҳо илова карда мешавад. Ин синфе нест, ки бо нобаёнӣ дар Bootstrap дастрас аст.

Панҷ қабати шабака

Дар системаи шабакаи Bootstrap панҷ зина мавҷуд аст, ки барои ҳар як диапазони дастгоҳҳое, ки мо дастгирӣ мекунем, яктоӣ. Ҳар як сатҳ аз андозаи ҳадди ақали намоишгоҳ оғоз мешавад ва ба таври худкор ба дастгоҳҳои калонтар татбиқ мешавад, агар бекор карда нашавад.

.кол-4
.кол-4
.кол-4
.кол-см-4
.кол-см-4
.кол-см-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Се сутуни баробар

Се сутуни паҳнои баробарро аз мизи корӣ оғоз кунед ва миқёси онро ба мизи кории калон табдил диҳед . Дар дастгоҳҳои мобилӣ, планшетҳо ва дар поён, сутунҳо ба таври худкор ҷамъ мешаванд.

.col-md-4
.col-md-4
.col-md-4

Се сутуни нобаробар

Се сутунро аз мизи корӣ оғоз кунед ва миқёси мизи кории калони паҳнои гуногун гиред. Дар хотир доред, ки сутунҳои шабакавӣ бояд барои як блоки уфуқӣ то дувоздаҳ илова кунанд. Бештар аз ин, ва сутунҳо новобаста аз намоишгоҳ ба stacking оғоз мекунанд.

.col-md-3
.col-md-6
.col-md-3

Ду сутун

Ду сутунро аз мизи корӣ оғоз кунед ва миқёс ба мизи кории калон гиред .

.col-md-8
.col-md-4

Бари пурра, сутуни ягона

Барои унсурҳои пурраи васеъ ягон синфҳои шабакавӣ лозим нест.


Ду сутун бо ду сутуни лона

Тибқи ҳуҷҷатҳо, лона гузоштан осон аст - танҳо як қатор сутунҳоро дар дохили сутуни мавҷуда ҷойгир кунед. Ин ба шумо ду сутун медиҳад, ки аз мизи корӣ сар карда, ба мизи кории калон мегузаранд ва ду сутуни дигар (барои баробар) дар дохили сутуни калонтар.

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Омехта: мобилӣ ва мизи корӣ

Системаи шабакаи Bootstrap v4 дорои панҷ зинаи синфҳо мебошад: xs (иловагӣ хурд), sm (хурд), md (миёна), lg (калон) ва xl (хеле калон). Шумо метавонед қариб ҳама омезиши ин синфҳоро барои сохтани тарҳҳои динамикӣ ва фасеҳ истифода баред.

Ҳар як сатҳи синфҳо миқёси калон дорад, яъне агар шумо нақшаи таъин кардани як паҳнои барои xs ва sm дошта бошед, шумо танҳо бояд xs-ро муайян кунед.

.кол-12 .кол-мд-8
.кол-6 .кол-мд-4
.кол-6 .кол-мд-4
.кол-6 .кол-мд-4
.кол-6 .кол-мд-4
.кол-6
.кол-6

Омехта: мобилӣ, планшет ва мизи корӣ

.кол-12.кол-см-6.кол-лг-8
.кол-6 .кол-лг-4
.кол-6 .кол-см-4
.кол-6 .кол-см-4
.кол-6 .кол-см-4