Намунаҳои grid bootstrap

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

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

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

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

.кол-4

.кол-см-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

Алтернативаи се сутуни баробар

Бо истифода аз .row-cols-*синфҳо, шумо метавонед ба осонӣ шабакаи дорои сутунҳои баробар эҷод кунед.

.colфарзанди .row-cols-md-3

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

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

.col-md-3

.col-md-6

.col-md-3

Ду сутун

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

.col-md-8

.col-md-4

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

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

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

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

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

.col-md-8

.col-md-6

.col-md-4

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

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

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

.col-md-8

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

.кол-6

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

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

.кол-6 .кол-лг-4

.кол-6 .кол-см-4

Чуйборхо

Бо .gx-*дарсҳо, ҷӯйборҳои уфуқӣ метавонанд танзим карда шаванд.

.colбо .gx-4чуйборхо

.gy-*Барои назорат кардани ҷӯйборҳои амудӣ синфҳоро истифода баред .

.colбо .gy-4чуйборхо

Бо .g-*дарсҳо, ҷӯйборҳоро дар ҳар ду самт танзим кардан мумкин аст.

.colбо .g-3чуйборхо

Контейнерҳо

Синфҳои иловагие, ки дар Bootstrap v4.4 илова карда шудаанд, ба контейнерҳое иҷозат медиҳанд, ки то нуқтаи қатъии мушаххас 100% васеъ бошанд. v5 нуқтаи навро илова мекунад xxl.

.контейнер

.контейнер-см

.контейнер-мд

.контейнер-лг

.container-xl

.container-xxl

.контейнер-моеъ