Шабакаи CSS
Омӯзед, ки чӣ гуна системаи тарҳбандии алтернативии мо, ки дар CSS Grid сохта шудааст, бо мисолҳо ва порчаҳои кодҳо фаъол, истифода ва танзим кунед.
Системаи пешфарзии шабакаи Bootstrap авҷи беш аз даҳсолаи усулҳои тарҳбандии CSS мебошад, ки аз ҷониби миллионҳо одамон озмуда ва санҷида шудааст. Аммо, он инчунин бидуни бисёре аз хусусиятҳо ва усулҳои муосири CSS сохта шудааст, ки мо дар браузерҳо ба монанди CSS Grid нав мебинем.
Он чӣ гуна кор мекунад
Бо Bootstrap 5, мо имкон додем, ки системаи шабакаи алоҳидаро фаъол созем, ки дар CSS Grid сохта шудааст, аммо бо печутоби Bootstrap. Шумо то ҳол дарсҳо мегиред, ки шумо метавонед бо хоҳиши худ барои сохтани тарҳҳои ҷавобгӯ муроҷиат кунед, аммо бо равиши дигар дар зери он.
-
CSS Grid обуна аст. Системаи шабакаи пешфарзро тавассути танзим ғайрифаъол
$enable-grid-classes: false
кунед ва CSS Gridро тавассути танзимот фаъол созед$enable-cssgrid: true
. Сипас, Sass-и худро дубора тартиб диҳед. -
Намунаҳои
.row
бо.grid
..grid
Синф якеро муқаррар мекунадdisplay: grid
ва эҷод мекунад,grid-template
ки шумо онро бо HTML-и худ сохтаед. -
.col-*
Синфҳоро бо синфҳо иваз.g-col-*
кунед. Сабаб дар он аст, ки сутунҳои CSS Grid мо баgrid-column
ҷоиwidth
. -
Сутунҳо ва андозаи ҷӯйборҳо тавассути тағирёбандаҳои CSS муқаррар карда мешаванд. Инҳоро дар волидайн насб кунед ва мувофиқи
.grid
хоҳишатон, дар сатр ё дар ҷадвали услубҳо бо--bs-columns
ва танзим--bs-gap
кунед.
Дар оянда, Bootstrap эҳтимол ба ҳалли гибридӣ мегузарад, зеро gap
амвол тақрибан ба дастгирии пурраи браузер барои flexbox ноил шудааст.
Фарқиятҳои асосӣ
Дар муқоиса бо системаи шабакаи пешфарз:
-
Утилитҳои Flex ба сутунҳои CSS Grid ҳамин тавр таъсир намерасонанд.
-
Ҷойгоҳҳо ҷӯйборҳоро иваз мекунанд.
gap
Амвол уфуқиро аз системаи пешфарзии мо иваз мекунад ваpadding
бештар ба монандиmargin
. -
Ҳамин тавр, бар хилофи
.row
s,.grid
s маржаҳои манфӣ надоранд ва утилитаҳои маржа барои тағир додани ҷӯйборҳои шабака истифода намешаванд. Фосилаҳои шабакавӣ ба таври уфуқӣ ва амудӣ ба таври нобаёнӣ истифода мешаванд. Барои тафсилоти бештар ба бахши мутобиқсозӣ нигаред. -
Сабкҳои дарунсохт ва фармоишӣ бояд ҳамчун ҷойгузини синфҳои тағирдиҳанда баррасӣ шаванд (масалан,
style="--bs-columns: 3;"
противclass="row-cols-3"
). -
Nesting ҳамин тавр кор мекунад, аммо метавонад аз шумо талаб кунад, ки ҳисобҳои сутуни худро дар ҳар як мисоли лона аз нав танзим кунед
.grid
. Барои тафсилот ба бахши лона нигаред.
Мисолхо
Се сутун
.g-col-4
Бо истифода аз синфҳо се сутуни паҳнои баробарро дар тамоми намоишгоҳҳо ва дастгоҳҳо сохтан мумкин аст . Барои тағир додани тарҳ аз рӯи андозаи намоиш синфҳои ҷавобгӯро илова кунед.
<div class="grid text-center">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
Ҷавобгар
Барои танзими тарҳбандии худ дар саросари намоишгоҳҳо синфҳои ҷавобгӯро истифода баред. Дар ин ҷо мо аз ду сутун дар тангтарин портҳои намоишӣ оғоз мекунем ва сипас ба се сутун дар портҳои миёна ва болотар мерасем.
<div class="grid text-center">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
Онро бо ин тарҳбандии ду сутун дар ҳама намоишгоҳҳо муқоиса кунед.
<div class="grid text-center">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Печондани
Ҷузъҳои шабакавӣ ба таври худкор ба сатри навбатӣ мегузаранд, вақте ки ба таври уфуқӣ ҷой дигар нест. Дар хотир доред, ки ин gap
ба холигоҳҳои уфуқӣ ва амудӣ байни ҷузъҳои шабака дахл дорад.
<div class="grid text-center">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Сар мешавад
Ҳадафи синфҳои ибтидоӣ иваз кардани синфҳои офсетии шабакаи пешфарзии моро доранд, аммо онҳо комилан якхела нестанд. CSS Grid тавассути услубҳо як қолаби шабакаро эҷод мекунад, ки ба браузерҳо мегӯянд, ки "аз ин сутун оғоз кунед" ва "дар ин сутун анҷом диҳед". Ин хосиятҳо grid-column-start
ва grid-column-end
. Синфҳои ибтидоӣ барои синфҳои аввал стенография мебошанд. Онҳоро бо синфҳои сутун барои андоза ва мувофиқ кардани сутунҳои худ мувофиқи он, ки ба шумо лозим аст, ҷуфт кунед. Синфҳои ибтидоӣ аз он оғоз мешаванд, 1
зеро 0
арзиши ин хосиятҳо нодуруст аст.
<div class="grid text-center">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
Сутунҳои худкор
Вақте ки дар ҷузъҳои шабака ягон синф мавҷуд нест (фарзандони бевоситаи a .grid
), ҳар як унсури шабака ба таври худкор ба як сутун андоза карда мешавад.
<div class="grid text-center">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Ин рафторро бо синфҳои сутуни шабака омехта кардан мумкин аст.
<div class="grid text-center">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Лона кардан
Монанди системаи пешфарзии мо, Grid CSS мо имкон медиҳад, ки лонаҳои осони .grid
s. Аммо, бар хилофи пешфарз, ин шабака тағйиротро дар сатрҳо, сутунҳо ва холигоҳҳо мерос мегирад. Мисоли зеринро дида бароед:
- Мо шумораи пешфарзии сутунҳоро бо тағирёбандаи маҳаллии CSS бекор мекунем:
--bs-columns: 3
. - Дар сутуни худкор шумораи сутунҳо мерос гирифта мешавад ва ҳар як сутун аз се як ҳиссаи паҳнои дастрас аст.
- Дар сутуни дуюми худкор, мо шумори сутуни лонаро
.grid
ба 12 барқарор кардем (пешфарзи мо). - Сутуни автоматии сеюм мундариҷаи лона надорад.
Дар амал ин имкон медиҳад, ки тарҳҳои мураккабтар ва фармоишӣ дар муқоиса бо системаи пешфарзии мо.
<div class="grid text-center" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
Мутобиқсозӣ
Шумораи сутунҳо, шумораи сатрҳо ва паҳнои холигоҳҳоро бо тағирёбандаҳои маҳаллии CSS танзим кунед.
Тағйирёбанда | Арзиши бозгашт | Тавсифи |
---|---|---|
--bs-rows |
1 |
Шумораи сатрҳо дар қолаби шабакаи шумо |
--bs-columns |
12 |
Шумораи сутунҳо дар қолаби шабакаи шумо |
--bs-gap |
1.5rem |
Андозаи фосилаи байни сутунҳо (вертикалӣ ва уфуқӣ) |
Ин тағирёбандаҳои CSS арзиши пешфарз надоранд; ба ҷои ин, онҳо арзишҳои бозгаштро истифода мебаранд, ки то пешниҳоди мисоли маҳаллӣ истифода мешаванд. Масалан, мо var(--bs-rows, 1)
барои сатрҳои CSS Grid-и худ истифода мебарем, ки онро нодида мегиранд --bs-rows
, зеро он ҳанӯз дар ягон ҷо муқаррар нашудааст. Пас аз он, .grid
мисол ин арзишро ба ҷои арзиши бозгашти 1
.
Дарсҳои шабакавӣ нест
Унсурҳои кӯдаконаи фаврии онҳо ҷузъҳои .grid
шабака мебошанд, бинобар ин онҳо бидуни илова кардани .g-col
синф ба таври возеҳ андоза карда мешаванд.
<div class="grid text-center" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Сутунҳо ва холигоҳҳо
Шумораи сутунҳо ва фосиларо танзим кунед.
<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
Илова кардани сатрҳо
Илова кардани сатрҳои бештар ва тағир додани ҷойгиркунии сутунҳо:
<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
Норасоиҳо
Ҷойҳои амудиро танҳо бо тағир додани row-gap
. Аҳамият диҳед, ки мо gap
дар бораи .grid
s истифода мебарем, аммо row-gap
ва column-gap
ҳангоми зарурат тағир додан мумкин аст.
<div class="grid text-center" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Аз ин сабаб, шумо метавонед gap
s-ҳои гуногуни амудӣ ва уфуқӣ дошта бошед, ки метавонанд як арзиши ягона (ҳама ҷонибҳо) ё як ҷуфт арзишҳоро (вертикалӣ ва уфуқӣ) гиранд. Ин метавонад бо услуби inline барои gap
, ё бо --bs-gap
тағирёбандаи CSS-и мо татбиқ карда шавад.
<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Сасс
Як маҳдудияти Grid CSS дар он аст, ки синфҳои пешфарзии мо то ҳол аз ҷониби ду тағирёбандаи Sass тавлид мешаванд $grid-columns
ва $grid-gutter-width
. Ин ба таври муассир шумораи синфҳоеро, ки дар CSS-и тартибдодаи мо тавлид шудаанд, муайян мекунад. Дар ин ҷо шумо ду интихоб доред:
- Ин тағирёбандаҳои пешфарзии Sass-ро тағир диҳед ва CSS-и худро дубора тартиб диҳед.
- Барои васеъ кардани синфҳои пешниҳодшуда сабкҳои дохилӣ ё фармоиширо истифода баред.
Масалан, шумо метавонед шумораи сутунҳоро зиёд кунед ва андозаи холигоҳро тағир диҳед ва сипас "сутунҳо"-и худро бо омехтаи сабкҳои дарунсохт ва синфҳои сутуни пешакӣ муайяншудаи CSS Grid андоза кунед (масалан, .g-col-4
).
<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>