in English

CSS тор

Мисалдар жана код үзүндүлөрү менен CSS Gridде курулган альтернативдүү жайгашуу тутумубузду кантип иштетүүнү, колдонууну жана ыңгайлаштырууну үйрөнүңүз.

Бул бетте

Bootstrap демейки тор системасы миллиондогон адамдар тарабынан сыналган жана сыналган CSS макетинин он жылдык ыкмаларынын туу чокусун билдирет. Бирок, ал ошондой эле жаңы CSS Grid сыяктуу браузерлерде көрүп жаткан көптөгөн заманбап CSS функциялары жана ыкмалары жок эле түзүлгөн.

Көңүл буруңуз – биздин CSS Grid системабыз эксперименталдык жана v5.1.0 боюнча кошула алат! Биз аны сизге көрсөтүү үчүн документтерибиздин CSSке киргиздик, бирок ал демейки боюнча өчүрүлгөн. Аны долбоорлоруңузда кантип иштетүүнү билүү үчүн окууну улантыңыз.

Бул кантип иштейт

Bootstrap 5 менен биз CSS Gridге курулган, бирок Bootstrap бурулушу менен өзүнчө тор системасын иштетүү опциясын коштук. Сиз дагы эле класстарды аласыз, сиз жооп берүүчү макеттерди түзүү үчүн каалооңуз боюнча колдоно аласыз, бирок капоттун астында башкача мамиле менен.

CSS Grid кошулган. Орнотуу менен демейки тор системасын өчүрүңүз жана орнотуу $enable-grid-classes: falseменен CSS Gridди иштетиңиз $enable-cssgrid: true. Андан кийин, Sassыңызды кайра түзүңүз.
.rowменен алмаштырылсын .grid. Класс сиз HTML менен курган .gridклассты орнотот display: gridжана түзөт .grid-template
.col-*Класстарды класстар менен алмаштырыңыз .g-col-*. Себеби, биздин CSS Grid мамычалары grid-columnанын ордуна касиетти колдонушат width.
Мамычалардын жана каналдардын өлчөмдөрү CSS өзгөрмөлөрү аркылуу белгиленет. Аларды ата-энеге орнотуп, .gridкаалагандай ыңгайлаштырыңыз, сапта же стилдер жадыбалында --bs-columnsжана менен --bs-gap.

Келечекте, Bootstrap гибриддик чечимге өтүшү мүмкүн, gapанткени мулк flexbox үчүн браузерди дээрлик толук колдоого алган.

Негизги айырмачылыктар

Демейки тор системасы менен салыштырганда:

Flex утилиталары CSS Grid тилкелерине ушундай эле таасир этпейт.
Боштуктар арыктарды алмаштырат. Кыймыл биздин демейки тор gapтутумубуздан горизонталдыкты алмаштырат жана .paddingmargin
Ошентип, s айырмаланып .row, .grids эч кандай терс чектерге ээ жана маржа утилиталарын тордун арыктарын өзгөртүү үчүн колдонууга болбойт. Тор боштуктары демейки боюнча туурасынан жана вертикалдуу колдонулат. Көбүрөөк маалымат алуу үчүн өзгөчөлөштүрүү бөлүмүн караңыз.
Киргизилген жана ыңгайлаштырылган стилдер өзгөрткүч класстарды алмаштыруу катары каралышы керек (мисалы, style="--bs-columns: 3;"vs class="row-cols-3").
Уюштуруу да ушундай эле иштейт, бирок сизден уячанын ар бир инстанциясында мамычаларыңыздын санын баштапкы абалга келтирүүнү талап кылышы мүмкүн .grid. чоо-жайын билүү үчүн уя бөлүмүн карагыла .

Мисалдар

Үч мамыча

Класстарды колдонуу менен бардык көрүү портторунда жана түзмөктөрүндө бирдей кеңдиктеги үч тилке түзүлүшү мүмкүн .g-col-4. Көрүү портунун өлчөмү боюнча макетти өзгөртүү үчүн жооп берүүчү класстарды кошуңуз .

.g-col-4

html

<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>

Жооптуу

Көрүү портторундагы макетиңизди тууралоо үчүн жооп берүүчү класстарды колдонуңуз. Бул жерде биз эң кууш көрүнүштөрдөгү эки тилкеден баштайбыз, андан кийин орто көрүнүштөрдөгү жана андан жогору үч тилкеге чейин өсөбүз.

.g-col-6 .g-col-md-4

html

<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>

Муну бардык көрүү терезелериндеги бул эки мамычанын жайгашуусу менен салыштырыңыз.

.g-col-6

html

<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Бул тордун элементтеринин ортосундагы горизонталдык жана вертикалдык боштуктарга тиешелүү экенин эске алыңыз .

.g-col-6

html

<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

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

<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), ар бир тор элементи автоматтык түрдө бир тилкеге өлчөмдүү болот.

html

<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>

Бул жүрүм-турумду тор мамыча класстары менен аралаштырууга болот.

.g-col-6

html

<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>

Уя салуу

Биздин демейки тор тутумубузга окшоп, биздин CSS торубуз слерди оңой уялоого мүмкүндүк берет .grid. Бирок, демейкиден айырмаланып, бул тор саптардагы, мамычалардагы жана боштуктардагы өзгөрүүлөрдү мурастайт. Төмөнкү мисалды карап көрөлү:

Жергиликтүү CSS өзгөрмөлүү мамычалардын демейки санын жокко чыгарабыз: --bs-columns: 3.
Биринчи авто-тилкеде тилкелердин саны мураска алынат жана ар бир тилке жеткиликтүү кеңдиктин үчтөн бир бөлүгүн түзөт.
Экинчи авто-мамычада биз уя салынган тилкелердин санын .grid12ге (биздин демейки) баштапкы абалга келтирдик.
Үчүнчү авто-тилкеде уяланган мазмун жок.

Иш жүзүндө бул биздин демейки тор тутумубузга салыштырмалуу татаалыраак жана ыңгайлаштырылган макеттерге мүмкүндүк берет.

Биринчи авто-мамыча

Автоматтык тилке

Экинчи автоколонна

6 ичинен 12

4 ичинен 12

2 ичинен 12

Үчүнчү авто-мамыча

html

<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 өзгөрмөлөрү менен тилкелердин санын, саптардын санын жана боштуктардын туурасын ыңгайлаштырыңыз.

Variable	Кайталануучу маани	Description
`--bs-rows`	`1`	Тор шаблонуңуздагы саптардын саны
`--bs-columns`	`12`	Тор шаблонуңуздагы тилкелердин саны
`--bs-gap`	`1.5rem`	Мамычалардын ортосундагы ажырымдын өлчөмү (вертикалдуу жана туурасынан)

Бул CSS өзгөрмөлөрүнүн демейки мааниси жок; анын ордуна, алар жергиликтүү инстанция берилгенге чейин колдонулган кайра баалуулуктарды колдонушат . Мисалы, биз var(--bs-rows, 1)CSS Grid саптарыбыз үчүн колдонобуз, алар этибарга албайт --bs-rows, анткени ал азырынча эч жерде коюла элек. Ал болгондон кийин, .gridинстанция кайра маанисинин ордуна ошол маанини колдонот 1.

Тор класстары жок

Дароо балдар элементтери торчо элементтери болуп саналат, ошондуктан алар классты .gridачык кошпостон өлчөмдүү болот ..g-col

Автоматтык тилке

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Мамычалар жана боштуктар

Мамычалардын санын жана боштукту тууралаңыз.

.g-col-2

html

<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>

.g-col-6

.g-col-4

html

<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>

Катарларды кошуу

Көбүрөөк саптарды кошуу жана мамычалардын жайгашуусун өзгөртүү:

Автоматтык тилке

html

<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Эскертүү, биз s боюнча колдонобуз .grid, бирок row-gapжана column-gapзарылчылыкка жараша өзгөртүлүшү мүмкүн.

.g-col-6

html

<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 болушу мүмкүн. gapБул үчүн сап стили менен же биздин --bs-gapCSS өзгөрмөбүз менен колдонсо болот .

.g-col-6

html

<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>

Sass

CSS торунун бир чектөөсү - биздин демейки класстар дагы эле эки Sass өзгөрмөлөрү тарабынан түзүлөт $grid-columnsжана $grid-gutter-width. Бул биздин түзүлгөн CSSде түзүлгөн класстардын санын натыйжалуу алдын ала аныктайт. Бул жерде сизде эки вариант бар:

Ошол демейки Sass өзгөрмөлөрүн өзгөртүп, CSS'иңизди кайра түзүңүз.
Берилген класстарды көбөйтүү үчүн саптык же ыңгайлаштырылган стилдерди колдонуңуз.

Мисалы, сиз мамычалардын санын көбөйтүп, боштуктун өлчөмүн өзгөртө аласыз, андан кийин "мамычаларыңызды" саптык стилдердин жана алдын ала аныкталган CSS Grid тилке класстарынын аралашмасы менен өлчөй аласыз (мисалы, .g-col-4).

14 тилке

.g-col-4

html

<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>