Системаи шабакавӣ
Шабакаи пурқудрати мобилии аввалини флексбоксро барои сохтани тарҳҳои ҳама шакл ва андозаҳо ба шарофати системаи дувоздаҳ сутун, панҷ сатҳи пешфарз, тағирёбандаҳо ва омехтаҳои Sass ва даҳҳо синфҳои пешакӣ муайяншуда истифода баред.
Он чӣ гуна кор мекунад
Системаи шабакаи Bootstrap барои тарҳрезӣ ва мувофиқ кардани мундариҷа як қатор контейнерҳо, сатрҳо ва сутунҳоро истифода мебарад. Он бо flexbox сохта шудааст ва комилан ҷавобгӯ аст. Дар зер як мисол ва назари амиқи он аст, ки чӣ гуна шабака якҷоя мешавад.
Шумо бо flexbox навед ё ношиносед? Ин дастури CSS Tricks flexbox-ро барои замина, истилоҳот, роҳнамо ва порчаҳои код хонед.
Мисоли боло се сутуни паҳнои баробарро дар дастгоҳҳои хурд, миёна, калон ва изофаи калон бо истифода аз синфҳои қаблан муқарраршудаи мо эҷод мекунад. Ин сутунҳо дар маркази саҳифа бо волидайн .container
ҷойгир шудаанд.
Онро тақсим карда, ин аст, ки он чӣ гуна кор мекунад:
- Контейнерҳо барои марказ ва ба таври уфуқӣ ҷойгир кардани мундариҷаи сайти шумо имкон медиҳанд.
.container
Барои паҳнои пикселҳои ҷавобгӯ ё.container-fluid
бароиwidth: 100%
ҳама намуди намоиш ва андозаи дастгоҳ истифода баред . - Сатрҳо парпечкунии сутунҳо мебошанд. Ҳар як сутун дорои уфуқӣ
padding
(ҷуйбор номида мешавад) барои назорати фосилаи байни онҳо. Пасpadding
аз он дар сатрҳои дорои ҳошияҳои манфӣ муқобилат карда мешавад. Ҳамин тариқ, ҳама мундариҷаи сутунҳои шумо ба таври визуалӣ ба тарафи чап мувофиқ карда мешаванд. - Дар тарҳбандии шабака мундариҷа бояд дар дохили сутунҳо ҷойгир карда шавад ва танҳо сутунҳо метавонанд кӯдакони бевоситаи сатрҳо бошанд.
- Бо шарофати flexbox, сутунҳои шабакавӣ бидуни нишондодашуда
width
ба таври худкор ҳамчун сутунҳои паҳнои баробар ҷойгир мешаванд. Масалан, чор мисоли.col-sm
ҳар кадоми онҳо ба таври худкор 25% васеъ аз нуқтаи хурд ва болотар аст. Барои мисолҳои бештар ба бахши сутунҳои тарҳбандии худкор нигаред. - Синфҳои сутунҳо шумораи сутунҳоеро, ки шумо мехоҳед аз 12 сутуни имконпазир дар як сатр истифода баред, нишон медиҳанд. Ҳамин тавр, агар шумо хоҳед, ки се сутуни паҳнои баробар дошта бошед, шумо метавонед -ро истифода баред
.col-4
. - Сутунҳои
width
s бо фоиз муқаррар карда мешаванд, бинобар ин онҳо ҳамеша нисбат ба унсури волидайнашон моеъ ва андоза доранд. - Сутунҳо барои сохтани ҷӯйборҳо байни сутунҳои алоҳида уфуқӣ доранд
padding
, аммо шумо метавонедmargin
аз сатрҳо ваpadding
сутунҳоро.no-gutters
бо.row
. - Барои посухгӯии шабака панҷ нуқтаи кандашавии шабака вуҷуд дорад, ки якто барои ҳар як нуқтаи кандашавии ҷавоб : ҳама нуқтаҳои кандашавӣ (иловагӣ хурд), хурд, миёна, калон ва хеле калон.
- Нуқтаҳои шикастани шабака ба дархостҳои паҳнои ҳадди ақали медиавӣ асос ёфтаанд, яъне онҳо ба як нуқтаи кандашавӣ ва ҳамаи онҳое, ки болотар аз он ҳастанд , татбиқ мешаванд (масалан,
.col-sm-4
ба дастгоҳҳои хурд, миёна, калон ва аз ҳад калон дахл дорад, аммо нуқтаи аввал наxs
). - Шумо метавонед синфҳои қаблан муайяншудаи шабакаро (ба монанди
.col-4
) ё омехтаҳои Sass барои аломатгузории семантикӣ истифода баред.
Аз маҳдудиятҳо ва хатогиҳои атрофи flexbox огоҳ бошед , ба монанди имконнопазирии истифодаи баъзе унсурҳои HTML ҳамчун контейнерҳои флекс .
Имконоти шабака
Дар ҳоле ки Bootstrap em
s ё rem
s-ро барои муайян кардани аксари андозаҳо истифода мебарад, px
s барои нуқтаҳои шикастани шабака ва паҳнои контейнер истифода мешавад. Сабаб дар он аст, ки паҳнои намоиш бо пикселҳо иборат аст ва бо андозаи ҳарф тағир намеёбад .
Бубинед, ки ҷанбаҳои системаи шабакаи Bootstrap дар байни дастгоҳҳои сершумор бо ҷадвали қулай чӣ гуна кор мекунанд.
Хеле хурдтар <576px |
Хурд ≥576px |
Миёна ≥768px |
Калон ≥992px |
Хеле калон ≥1200px |
|
---|---|---|---|---|---|
Бари максималии контейнер | Ҳеҷ (авто) | 540px | 720px | 960px | 1140px |
Префикси синф | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# сутунҳо | 12 | ||||
Бари ҷӯйбор | 30px (15px дар ҳар як тарафи сутун) | ||||
Ҷойгир | Бале | ||||
Тартиби сутун | Бале |
Сутунҳои тарҳбандии худкор
Синфҳои сутуни мушаххаси нуқтаро барои андозагирии осони сутун бидуни синфи рақами дақиқи монанди .col-sm-6
.
Бари баробар
Масалан, дар ин ҷо ду тарҳбандии шабака мавҷуданд, ки ба ҳар як дастгоҳ ва намоишгоҳ xs
аз xl
. Барои ҳар як нуқтаи танаффус, ки ба шумо лозим аст, ягон миқдори синфҳои бе воҳид илова кунед ва ҳар як сутун як паҳно хоҳад буд.
Сутунҳои паҳнои баробарро ба чанд сатр тақсим кардан мумкин аст, аммо хатои Safari flexbox вуҷуд дошт, ки ин корро бидуни возеҳ flex-basis
ё border
. Барои версияҳои кӯҳнаи браузер роҳҳои ҳалкунанда мавҷуданд, аммо агар шумо навсозӣ бошед, онҳо набояд зарур бошанд.
Муқаррар кардани як паҳнои сутун
Тарҳбандии худкор барои сутунҳои шабакаи flexbox инчунин маънои онро дорад, ки шумо метавонед паҳнои як сутунро таъин кунед ва сутунҳои бародариро дар атрофи он ба таври худкор тағир диҳед. Шумо метавонед синфҳои қаблан муайяншудаи шабака (тавре ки дар зер нишон дода шудааст), омехтаҳои шабакавӣ ё паҳнои дохилиро истифода баред. Аҳамият диҳед, ки сутунҳои дигар новобаста аз паҳнои сутуни марказӣ тағир меёбанд.
Мазмуни паҳнои тағйирёбанда
col-{breakpoint}-auto
Барои андозагирии сутунҳо дар асоси паҳнои табиии мундариҷаи онҳо синфҳоро истифода баред .
Паҳнои баробари бисёрқатор
Сутунҳои паҳнои баробар эҷод кунед, ки сатрҳои сершуморро дар бар мегиранд, тавассути ворид кардани .w-100
ҷое, ки мехоҳед сутунҳо ба хати нав канда шаванд. Танаффусҳоро бо омезиши .w-100
баъзе утилитаҳои намоиши ҷавобгӯ .
Синфҳои ҷавобӣ
Шабакаи Bootstrap панҷ қабати синфҳои пешакӣ муайяншударо барои сохтани тарҳҳои мураккаби ҷавобгӯ дар бар мегирад. Андозаи сутунҳои худро дар дастгоҳҳои иловагӣ хурд, хурд, миёна, калон ё аз ҳад калон, ҳарчанд ба шумо мувофиқ меҳисобед, танзим кунед.
Ҳама нуқтаҳо
Барои шабакаҳое, ки аз хурдтарин дастгоҳҳо то калонтарин якхелаанд, синфҳоро истифода .col
баред .col-*
. Вақте ки ба шумо сутуни махсусан калон лозим аст, синфи рақамдорро муайян кунед; дар акси ҳол, озод ҳис кунед, ки ба .col
.
Ба уфуқӣ печонида шудааст
Бо истифода аз маҷмӯи ягонаи .col-sm-*
синфҳо, шумо метавонед як системаи асосии шабакаро эҷод кунед, ки аз stacked оғоз меёбад ва дар нуқтаи хурд ( sm
) уфуқӣ мешавад.
Омезед ва мувофиқат кунед
Оё намехоҳед, ки сутунҳои шумо танҳо дар баъзе сатҳҳои шабака ҷамъ шаванд? Ҳангоми зарурат маҷмӯи синфҳои гуногунро барои ҳар як сатҳ истифода баред. Барои тасаввуроти беҳтар дар бораи он ки ҳама кор мекунад, ба мисоли зер нигаред.
Чуйборхо
Гуттерҳоро тавассути пуркунии нуқтаи мушаххас ва синфҳои фоиданоки маржаи манфӣ ба таври дақиқ танзим кардан мумкин аст. Барои иваз кардани ҷӯйборҳо дар як сатри додашуда, як утилитаи маржаи манфӣ .row
ва утилитаҳои пуркунии мувофиқро дар .col
s ҷуфт кунед. .container
Ё волидайн низ бояд барои пешгирӣ кардани .container-fluid
изофаи номатлуб бо истифода аз утилитаи мувофиқи padding танзим карда шаванд.
Ин аст мисоли танзим кардани шабакаи Bootstrap дар нуқтаи калон ( lg
) ва болотар. Мо .col
пуркуниро бо .px-lg-5
, зиёд кардем, бо он муқобилат кардем ва пас аз он .mx-lg-n5
парпечро бо ..row
.container
.px-lg-5
Ҳамоҳангсозӣ
Барои ба таври амудӣ ва уфуқӣ мувофиқ кардани сутунҳо аз утилитаҳои ҳамоҳангсозии flexbox истифода баред.
Ҳамоҳангсозии амудӣ
Ҳамоҳангсозии уфуқӣ
Не чуйборхо
Ҷӯйборҳои байни сутунҳо дар синфҳои қаблан муайяншудаи мо метавонанд бо .no-gutters
. margin
Ин s манфиро аз .row
ва уфуқӣ padding
аз ҳама сутунҳои кӯдаконаи фаврӣ хориҷ мекунад.
Ин аст рамзи сарчашма барои эҷоди ин услубҳо. Дар хотир доред, ки бекоркунии сутунҳо танҳо ба сутунҳои аввали кӯдакон фаро гирифта шудаанд ва тавассути интихобкунандаи атрибут ҳадаф қарор мегиранд . Дар ҳоле, ки ин як селектори мушаххасро тавлид мекунад, пуркунии сутун ҳоло ҳам метавонад бо утилитҳои фосилавӣ минбаъд танзим карда шавад .
Ба тарроҳии канор ба канор ниёз доред? Падару модарро партоед .container
ё .container-fluid
.
Дар амал, ин аст, ки он чӣ гуна ба назар мерасад. Аҳамият диҳед, ки шумо метавонед онро бо ҳама синфҳои қаблан муайяншудаи шабака истифода баред (аз ҷумла паҳнои сутунҳо, сатҳҳои ҷавобӣ, фармоишҳои такрорӣ ва ғайра).
Печондани сутун
Агар зиёда аз 12 сутун дар як сатр ҷойгир карда шуда бошад, ҳар як гурӯҳи сутунҳои иловагӣ ҳамчун як воҳид ба хати нав печонида мешаванд.
Азбаски 9 + 4 = 13 > 12, ин div-и 4-сутуни васеъ ба хати нав ҳамчун як воҳиди ҳамсоя печонида мешавад.
минбаъда бо хатти нав давом мекунанд.
Танаффусҳои сутун
Шикастани сутунҳо ба хати нав дар flexbox як хаки хурдро талаб мекунад: ба width: 100%
ҳар ҷое, ки мехоҳед сутунҳои худро ба хати нав печонед, як элемент илова кунед. Одатан, ин бо якчанд .row
с анҷом дода мешавад, аммо на ҳама усули татбиқ инро ҳисоб карда метавонад.
Шумо инчунин метавонед ин танаффусро дар нуқтаҳои мушаххас бо утилитаҳои намоишии ҷавобгӯи мо татбиқ кунед .
Тартиби дубора
Тартиб додани синфҳо
Барои назорат кардани тартиби визуалии мундариҷаи худ .order-
дарсҳоро истифода баред . Ин синфҳо ҷавобгӯ мебошанд, аз ин рӯ шумо метавонед нуқтаи танаффусро муқаррар кунед (масалан, ). Дастгирии тавассути тамоми панҷ сатҳи шабакаро дар бар мегирад.order
.order-1.order-md-2
1
12
Инчунин синфҳои ҷавобӣ .order-first
ва .order-last
синфҳо мавҷуданд, ки мувофиқан ва ( ) order
истифода бурдани унсурро тағир медиҳанд. Агар лозим бошад, ин синфҳоро бо синфҳои рақамдор омехта кардан мумкин аст.order: -1
order: 13
order: $columns + 1
.order-*
Баҳисобгирии сутунҳо
Шумо метавонед сутунҳои шабакаро бо ду роҳ ҷуброн кунед: .offset-
синфҳои шабакаи ҷавобии мо ва утилитаҳои маржаи мо . Синфҳои шабака барои мувофиқ кардани сутунҳо андоза карда мешаванд, дар ҳоле ки маржаҳо барои тарҳҳои зуд муфидтаранд, ки паҳнои ҷуброн тағйирёбанда аст.
Синфҳои офсетӣ
.offset-md-*
Бо истифода аз синфҳо сутунҳоро ба рост интиқол диҳед. Ин синфҳо маржаи чапи сутунро ба *
сутунҳо зиёд мекунанд. Масалан, ба чор сутун .offset-md-4
ҳаракат мекунад ..col-md-4
Илова ба тозакунии сутун дар нуқтаҳои ҷавобӣ, шояд ба шумо лозим меояд, ки ҷубронҳоро аз нав танзим кунед. Инро дар амал дар мисоли шабака бубинед .
Утилитҳои маржа
Бо гузаштан ба flexbox дар v4, шумо метавонед утилитаҳои маржаро истифода баред, ба монанди .mr-auto
маҷбур кардани сутунҳои бародар аз ҳамдигар.
Лона кардан
Барои ҷойгир кардани мундариҷаи худ бо шабакаи пешфарз, дар дохили сутуни мавҷуда сутунҳои нав .row
ва маҷмӯи сутунҳоро илова кунед . Сатрҳои лона гузошташуда бояд маҷмӯи сутунҳоро дар бар гиранд, ки то 12 ё камтар аз он илова мекунанд (аз шумо истифода бурдани ҳамаи 12 сутуни дастрас талаб карда намешавад)..col-sm-*
.col-sm-*
Омехтаҳои Sass
Ҳангоми истифодаи файлҳои манбаи Sass Bootstrap, шумо имкон доред, ки тағирёбандаҳо ва омехтаҳои Sass барои эҷоди тарҳҳои фармоишӣ, семантикӣ ва ҷавобгӯи саҳифаҳо истифода баред. Синфҳои шабакаи қаблан муайяншудаи мо ҳамин тағирёбандаҳо ва омехтаҳоро истифода мебаранд, то маҷмӯи пурраи синфҳои ба истифода омодаро барои тарҳбандиҳои зуд ҷавобгӯ таъмин кунанд.
Тағйирёбандаҳо
Тағйирёбандаҳо ва харитаҳо шумораи сутунҳо, паҳнои ҷӯйбор ва нуқтаи дархости медиаро, ки дар он сутунҳои шинокунанда оғоз мешаванд, муайян мекунанд. Мо онҳоро барои тавлиди синфҳои қаблан муайяншудаи шабакаҳои дар боло ҳуҷҷатшуда ва инчунин барои омехтаҳои фармоишии дар поён овардашуда истифода мебарем.
Миксинҳо
Миксинҳо дар якҷоягӣ бо тағирёбандаҳои шабакавӣ барои тавлиди CSS семантикӣ барои сутунҳои шабакаи алоҳида истифода мешаванд.
Намунаи истифода
Шумо метавонед тағирёбандаҳоро ба арзишҳои фармоишии худ тағир диҳед ё танҳо омехтаҳоро бо арзишҳои пешфарзашон истифода баред. Ин аст мисоли истифодаи танзимоти пешфарз барои сохтани тарҳбандии ду сутун бо фосила байни.
Мутобиқсозии шабака
Бо истифода аз тағирёбандаҳо ва харитаҳои шабакаи дарунсохтаи мо, мумкин аст, ки синфҳои қаблан муайяншудаи шабакаро комилан танзим кунед. Шумораи сатҳҳо, андозаҳои пурсишҳои медиавӣ ва паҳнои контейнерро тағир диҳед - пас аз нав тартиб диҳед.
Колоннахо ва чуйборхо
Шумораи сутунҳои шабакаро тавассути тағирёбандаҳои Sass тағир додан мумкин аст. $grid-columns
барои тавлиди паҳнои (бо фоиз) ҳар як сутуни инфиродӣ истифода мешавад, дар ҳоле $grid-gutter-width
ки паҳнои ҷӯйборҳои сутунро муқаррар мекунад.
Сатҳи шабака
Гузаштан аз худи сутунҳо, шумо инчунин метавонед шумораи сатҳҳои шабакаро танзим кунед. Агар шумо танҳо чаҳор қабати шабакаро мехостед, шумо $grid-breakpoints
ва $container-max-widths
-ро ба чунин чизе навсозӣ мекардед:
Ҳангоми ворид кардани ҳама гуна тағирот ба тағирёбандаҳо ё харитаҳои Sass, шумо бояд тағиротҳои худро захира кунед ва дубора тартиб диҳед. Ин кор маҷмӯи нави синфҳои қаблан муайяншудаи шабакаро барои паҳнои сутунҳо, ҷубронҳо ва фармоиш медиҳад. Утилитаҳои намоёни ҷавобгӯ низ барои истифода аз нуқтаҳои танаффусҳои фармоишӣ нав карда мешаванд. Боварӣ ҳосил кунед, ки арзишҳои шабакаро дар px
(на rem
, em
, ё %
) муқаррар кунед.