CSS челтәре

Bootstrap'ның демократик челтәр системасы дистә елдан артык CSS урнаштыру техникасының кульминациясен күрсәтә, миллионлаган кеше сынап караган. Ләкин, ул шулай ук ​​яңа CSS челтәре кебек браузерларда күргән заманча CSS үзенчәлекләре һәм техникасы булмаса ясалган.

Ничек бу эшли

Bootstrap 5 ярдәмендә без CSS челтәрендә төзелгән, ләкин Bootstrap борылышлары белән аерым челтәр системасын эшләтеп җибәрү мөмкинлеген өстәдек. Сез һаман да дәресләр аласыз, сез җаваплы макетлар төзү өчен теләсәгез дә куллана аласыз, ләкин капот астында бүтән караш белән.

• CSS челтәре оптималь. Килешү буенча челтәр системасын сүндерегез $enable-grid-classes: falseһәм көйләп CSS челтәрен эшләгез $enable-cssgrid: true. Аннары, Сассны кабатлагыз.

• Мисалларны алыштырыгыз .row. .gridКласс .gridHTML белән төзелә display: gridһәм ясый grid-template.

• .col-*Дәресләрне класслар белән алыштырыгыз .g-col-*. Чөнки безнең CSS Челтәр баганалары grid-columnурынына милекне кулланалар width.

• Колонналар һәм чүпрәк зурлыклары CSS үзгәрүчәннәре аша куелган. Аларны ата-аналарга куегыз, .gridтеләсәгез дә көйләгез, стиль таблицасында, --bs-columnsһәм --bs-gap.

Киләчәктә Bootstrap гибрид чишелешкә күчәчәк, чөнки gapмөлкәт флексбокс өчен тулы браузер ярдәменә ирешкән.

Төп аермалар

Килешү челтәре системасы белән чагыштырганда:

• Флекс коммуналь хезмәтләр CSS челтәр баганаларына бер үк дәрәҗәдә тәэсир итмиләр.

• Бушлыклар чокырларны алыштыра. Мөлкәт gapгоризонтальне paddingбезнең челтәр системасыннан алыштыра һәм охшаш функцияләр margin.

• Шулай итеп, лардан аермалы буларак .row, .gridтискәре кырлар юк, һәм челтәр челтәрләрен үзгәртү өчен маржа коммуналь хезмәтләрен кулланып булмый. Челтәр җитешсезлекләре горизонталь һәм вертикаль рәвештә кулланыла. Төгәлрәк мәгълүмат өчен көйләү бүлеген карагыз .

• Эчтәлек һәм махсус стильләр модификатор классларын алмаштыру рәвешендә каралырга тиеш (мәсәлән, style="--bs-columns: 3;"vs class="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>

Onsаваплы

Визит портлары буенча макетыгызны көйләү өчен җаваплы классларны кулланыгыз. Монда без иң тар күренештә ике баганадан башлыйбыз, аннары урта күренешләрдә һәм өстәрәк өч баганага үсәбез.

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

Авто баганалар

Челтәр әйберләре буенча класслар булмаганда (һәр баланың балалары .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. Ләкин, килешүдән аермалы буларак, бу челтәр рәтләр, баганалар һәм бушлыклардагы үзгәрешләрне мирас итеп ала. Түбәндәге мисалны карап чыгыйк:

• Localирле CSS үзгәрүчесе белән баганаларның санын кире кагабыз : --bs-columns: 3.
• Беренче авто-баганада баганалар саны мирас итеп алынган һәм һәр багана булган киңлекнең өчтән бере.
• Икенче авто-баганада без оядагы багана санын .grid12гә үзгәрттек (безнең килешү).
• Өченче авто-баганада эчтәлек юк.

Практикада бу безнең челтәр системасы белән чагыштырганда катлаулырак һәм гадәти макетларга мөмкинлек бирә.

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

Custзенчәләштерү

Колонналар санын, рәтләр санын һәм бушлыкларның киңлеген җирле CSS үзгәрүчәннәре белән көйләгез.

Бу CSS үзгәрүчәннәрнең төп кыйммәте юк; киресенчә, алар җирле инстанция бирелгәнче кулланыла торган кире кыйммәтләрне кулланалар . Мисал өчен, без var(--bs-rows, 1)үзебезнең CSS Челтәр рәтләре өчен кулланабыз, моны санга сукмыйлар --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. Игътибар итегез, без s кулланабыз , gapләкин .gridкирәк булганда үзгәртелергә мөмкин.row-gapcolumn-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>

Шуңа күрә, сездә төрле вертикаль һәм горизонталь gaps булырга мөмкин, алар бер кыйммәтне (барлык якларны) яки пар кыйммәтләрен (вертикаль һәм горизонталь) ала ала. gapБу безнең --bs-gapCSS үзгәрүчесе өчен стиль стиле белән кулланылырга мөмкин .

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

Сасс

CSS челтәренең бер чикләнеше - безнең демократик класслар әле ике Sass үзгәрүчесе белән барлыкка килә, $grid-columnsһәм $grid-gutter-width. Бу безнең тупланган CSSда барлыкка килгән класслар санын эффектив билгели. Сезнең монда ике вариант бар:

• Бу Sass үзгәрешләрен үзгәртегез һәм CSS-ны кабатлагыз.
• Бирелгән классларны арттыру өчен сызык яки махсус стильләрне кулланыгыз.

Мисал өчен, сез багана санын арттыра аласыз, аерма зурлыгын үзгәртә аласыз, аннары "баганаларыгызны" эчке стильләр һәм алдан билгеләнгән CSS Челтәр баганасы класслары катнашында зурлый аласыз (мәс .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>