Намунаҳои 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 v5 дорои шаш қабати синфҳо мебошад: xs (аз ҳад хурд, ин инфикси синф истифода намешавад), sm (хурд), md (миёна), lg (калон), xl (x-калон) ва xxl (xx) -калон). Шумо метавонед қариб ҳама омезиши ин синфҳоро барои эҷоди тарҳҳои динамикӣ ва фасеҳ истифода баред.

Ҳар як сатҳи синфҳо миқёси калон дорад, яъне агар шумо нақшаи таъин кардани як паҳнои барои md, lg, xl ва xxl дошта бошед, шумо танҳо бояд 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

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