CSS тор
Мисалдар жана код үзүндүлөрү менен CSS Gridде курулган альтернативдүү жайгашуу тутумубузду кантип иштетүүнү, колдонууну жана ыңгайлаштырууну үйрөнүңүз.
Bootstrap демейки тор системасы миллиондогон адамдар тарабынан сыналган жана сыналган CSS макетинин он жылдык ыкмаларынын туу чокусун билдирет. Бирок, ал ошондой эле жаңы CSS Grid сыяктуу браузерлерде көрүп жаткан көптөгөн заманбап 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
тутумубуздан горизонталдыкты алмаштырат жана .padding
margin
-
Ошентип, s айырмаланып
.row
,.grid
s эч кандай терс чектерге ээ жана маржа утилиталарын тордун арыктарын өзгөртүү үчүн колдонууга болбойт. Тор боштуктары демейки боюнча туурасынан жана вертикалдуу колдонулат. Көбүрөөк маалымат алуу үчүн өзгөчөлөштүрүү бөлүмүн караңыз. -
Киргизилген жана ыңгайлаштырылган стилдер өзгөрткүч класстарды алмаштыруу катары каралышы керек (мисалы,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Уюштуруу да ушундай эле иштейт, бирок сизден уячанын ар бир инстанциясында мамычаларыңыздын санын баштапкы абалга келтирүүнү талап кылышы мүмкүн
.grid
. чоо-жайын билүү үчүн уя бөлүмүн карагыла .
Мисалдар
Үч мамыча
Класстарды колдонуу менен бардык көрүү портторунда жана түзмөктөрүндө бирдей кеңдиктеги үч тилке түзүлүшү мүмкүн .g-col-4
. Көрүү портунун өлчөмү боюнча макетти өзгөртүү үчүн жооп берүүчү класстарды кошуңуз .
<div class="grid">
<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">
<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">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Ороо
Туурасынан орун калбай калганда тордун элементтери автоматтык түрдө кийинки сапка өтөт. gap
Бул тордун элементтеринин ортосундагы горизонталдык жана вертикалдык боштуктарга тиешелүү экенин эске алыңыз .
<div class="grid">
<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">
<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">
<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">
<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
. - Биринчи авто-тилкеде тилкелердин саны мураска алынат жана ар бир тилке жеткиликтүү кеңдиктин үчтөн бир бөлүгүн түзөт.
- Экинчи авто-мамычада биз уя салынган тилкелердин санын
.grid
12ге (биздин демейки) баштапкы абалга келтирдик. - Үчүнчү авто-тилкеде уяланган мазмун жок.
Иш жүзүндө бул биздин демейки тор тутумубузга салыштырмалуу татаалыраак жана ыңгайлаштырылган макеттерге мүмкүндүк берет.
<div class="grid" 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
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Мамычалар жана боштуктар
Мамычалардын санын жана боштукту тууралаңыз.
<div class="grid" 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" 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" 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
зарылчылыкка жараша өзгөртүлүшү мүмкүн.
<div class="grid" 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-gap
CSS өзгөрмөбүз менен колдонсо болот .
<div class="grid" 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
).
<div class="grid" 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>