Шабакаи CSS

Системаи пешфарзии шабакаи 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.

• Ҳамин тавр, бар хилофи .rows, .grids маржаҳои манфӣ надоранд ва утилитаҳои маржа барои тағир додани ҷӯйборҳои шабака истифода намешаванд. Фосилаҳои шабакавӣ ба таври уфуқӣ ва амудӣ ба таври нобаёнӣ истифода мешаванд. Барои тафсилоти бештар ба бахши мутобиқсозӣ нигаред.

• Сабкҳои дарунсохт ва фармоишӣ бояд ҳамчун ҷойгузини синфҳои тағирдиҳанда баррасӣ шаванд (масалан, 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 мо имкон медиҳад, ки лонаҳои осони .grids. Аммо, бар хилофи пешфарз, ин шабака тағйиротро дар сатрҳо, сутунҳо ва холигоҳҳо мерос мегирад. Мисоли зеринро дида бароед:

• Мо шумораи пешфарзии сутунҳоро бо тағирёбандаи маҳаллии 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 танзим кунед.

Ин тағирёбандаҳои 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дар бораи .grids истифода мебарем, аммо 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>

Аз ин сабаб, шумо метавонед gaps-ҳои гуногуни амудӣ ва уфуқӣ дошта бошед, ки метавонанд як арзиши ягона (ҳама ҷонибҳо) ё як ҷуфт арзишҳоро (вертикалӣ ва уфуқӣ) гиранд. Ин метавонад бо услуби 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>