Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

CSS челтәре

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

Бу биттә

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

Башлар - безнең CSS Челтәр системасы эксперименталь һәм v5.1.0 булганга оптималь! Аны сезнең өчен күрсәтү өчен без аны документларыбызның 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Барлык күренешләр һәм җайланмалар буенча өч тигез киңлектәге баганалар класслар ярдәмендә ясалырга мөмкин . Визпорт зурлыгы буенча макетны үзгәртү өчен җаваплы класслар өстәгез.

.g-col-4
.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>

Onsаваплы

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

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.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
.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
.g-col-6
.g-col-6
.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-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>

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

Челтәр әйберләре буенча класслар булмаганда (һәр баланың балалары .grid), һәр челтәр элементы автоматик рәвештә бер баганага зурланачак.

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

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

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

Беренче авто-багана
Авто-багана
Авто-багана
Икенче авто-багана
12 дән 6
12 дән 4
12нең 2
Өченче авто-багана
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>

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

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

Үзгәрүчән Кире кыйммәт Тасвирлау
--bs-rows 1 Челтәр шаблонындагы рәтләр саны
--bs-columns 12 Сезнең челтәр шаблонындагы баганалар саны
--bs-gap 1.5rem Колонналар арасындагы аерманың зурлыгы (вертикаль һәм горизонталь)

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

.g-col-6
.g-col-6
.g-col-6
.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>

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

.g-col-6
.g-col-6
.g-col-6
.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>

Сасс

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

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

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