CSS tinklelis

Numatytoji „Bootstrap“ tinklelio sistema yra daugiau nei dešimtmetį trukusių CSS išdėstymo metodų, kuriuos išbandė ir išbandė milijonai žmonių, kulminacija. Tačiau jis taip pat buvo sukurtas be daugelio šiuolaikinių CSS funkcijų ir metodų, kuriuos matome tokiose naršyklėse kaip naujasis CSS tinklelis.

Kaip tai veikia

Naudodami „Bootstrap 5“ pridėjome parinktį, leidžiančią įjungti atskirą tinklelio sistemą, sukurtą remiantis CSS tinkleliu, bet su „Bootstrap“ pasukimu. Vis tiek gausite pamokų, kuriose galite dalyvauti kurdami interaktyvius maketus, tačiau po gaubtu taikant kitokį požiūrį.

• CSS tinklelis yra pasirenkamas. Išjunkite numatytąją tinklelio sistemą nustatydami $enable-grid-classes: falseir įjunkite CSS tinklelį nustatydami $enable-cssgrid: true. Tada iš naujo sukompiliuokite savo Sass.

• Pakeiskite egzempliorius .rowį .grid. .gridKlasė nustato display: gridir sukuria grid-templateHTML, kuriuo remsitės .

• Pakeiskite .col-*klases .g-col-*klasėmis. Taip yra todėl, kad mūsų CSS tinklelio stulpeliuose naudojama grid-columnypatybė, o ne width.

• Stulpelių ir latakų dydžiai nustatomi naudojant CSS kintamuosius. Nustatykite juos pirminėje .gridir tinkinkite, kaip norite, eilutėje arba stiliaus lape, naudodami --bs-columnsir --bs-gap.

Ateityje „Bootstrap“ greičiausiai pereis prie hibridinio sprendimo, nes gapnuosavybė pasiekė beveik visą „flexbox“ naršyklės palaikymą.

Pagrindiniai skirtumai

Palyginti su numatyta tinklelio sistema:

• „Flex“ priemonės CSS tinklelio stulpeliams nepaveikia vienodai.

• Tarpai pakeičia latakus. Nuosavybė gappakeičia horizontalią paddingiš numatytosios tinklelio sistemos ir veikia panašiai kaip margin.

• Iš esmės , skirtingai nei .rows, .grids neturi neigiamų paraščių ir tinklelio latakų keitimui negalima naudoti maržos paslaugų. Pagal numatytuosius nustatymus tinklelio tarpai taikomi horizontaliai ir vertikaliai. Daugiau informacijos rasite tinkinimo skyriuje .

• Įterptieji ir pasirinktiniai stiliai turėtų būti laikomi modifikatorių klasių pakaitalais (pvz., style="--bs-columns: 3;"vs class="row-cols-3").

• Įdėjimas veikia panašiai, tačiau gali reikėti iš naujo nustatyti kiekvieno įdėto egzemplioriaus stulpelių skaičių .grid. Norėdami gauti daugiau informacijos, žr .

Pavyzdžiai

Trys stulpeliai

.g-col-4Naudojant klases galima sukurti tris vienodo pločio stulpelius visose peržiūros srityse ir įrenginiuose . Pridėkite interaktyvių klasių , kad pakeistumėte išdėstymą pagal peržiūros srities dydį.

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

Atsakingas

Naudokite interaktyvias klases, kad pritaikytumėte išdėstymą peržiūros srityse. Čia pradedame nuo dviejų stulpelių siauriausiose peržiūros srityse, o tada išaugame iki trijų stulpelių vidutinėse ir aukštesnėse peržiūros srityse.

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

Palyginkite tai su šiuo dviejų stulpelių išdėstymu visose peržiūros srityse.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Įvyniojimas

Tinklelio elementai automatiškai perkeliami į kitą eilutę, kai nebėra vietos horizontaliai. Atminkite, kad tai gaptaikoma horizontaliems ir vertikaliems tarpams tarp tinklelio elementų.

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

Prasideda

Pradinių klasių tikslas yra pakeisti numatytąsias tinklelio poslinkio klases, tačiau jos nėra visiškai vienodos. CSS tinklelis sukuria tinklelio šabloną naudodamas stilius, kurie nurodo naršyklėms „pradėti nuo šio stulpelio“ ir „baigti nuo šio stulpelio“. Tos savybės yra grid-column-startir grid-column-end. Pradinės klasės yra trumpalaikiai pirmiesiems. Suporuokite juos su stulpelių klasėmis pagal dydį ir sulygiuokite stulpelius taip, kaip jums reikia. Pradžios klasės prasideda, 1nes 0yra netinkama šių ypatybių reikšmė.

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

Automatiniai stulpeliai

Kai tinklelio elementuose nėra klasių (tiesioginiai a .gridantriniai elementai), kiekvienas tinklelio elementas bus automatiškai priskirtas vienam stulpeliui.

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

Šis elgesys gali būti derinamas su tinklelio stulpelių klasėmis.

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

Lizdas

Panašiai kaip mūsų numatytoji tinklelio sistema, mūsų CSS tinklelis leidžia lengvai įdėti .grids. Tačiau, skirtingai nei numatytasis, šis tinklelis paveldi eilučių, stulpelių ir tarpų pakeitimus. Apsvarstykite toliau pateiktą pavyzdį:

• Pakeičiame numatytąjį stulpelių skaičių vietiniu CSS kintamuoju: --bs-columns: 3.
• Pirmajame automatiniame stulpelyje stulpelių skaičius yra paveldimas ir kiekvienas stulpelis yra trečdalis galimo pločio.
• Antrame automatiniame stulpelyje iš naujo nustatėme įdėtųjų stulpelių skaičių .gridiki 12 (numatytasis).
• Trečiame automatiniame stulpelyje nėra įdėto turinio.

Praktiškai tai leidžia sukurti sudėtingesnius ir pasirinktinius išdėstymus, palyginti su mūsų numatytaja tinklelio sistema.

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

Tinkinimas

Tinkinkite stulpelių skaičių, eilučių skaičių ir tarpų plotį naudodami vietinius CSS kintamuosius.

Šie CSS kintamieji neturi numatytosios reikšmės; vietoj to jie taiko atsargines vertes, kurios naudojamos tol , kol nepateikiamas vietinis egzempliorius. Pavyzdžiui, mes naudojame var(--bs-rows, 1)savo CSS Grid eilutes, kurios nepaiso, --bs-rowsnes dar niekur nenustatyta. Kai tai bus padaryta, .gridegzempliorius naudos tą reikšmę, o ne atsarginę reikšmę 1.

Nėra tinklelio klasių

Tiesioginiai antriniai elementai .gridyra tinklelio elementai, todėl jų dydis bus nustatomas aiškiai nepridedant .g-colklasės.

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

Stulpeliai ir tarpai

Sureguliuokite stulpelių skaičių ir tarpą.

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

Eilučių pridėjimas

Pridėti daugiau eilučių ir pakeisti stulpelių vietą:

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

Tarpai

Vertikalius tarpus pakeiskite tik pakeisdami row-gap. Atkreipkite dėmesį, kad mes naudojame gaps .grid, bet row-gapir column-gapgali būti modifikuojami, jei reikia.

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

Dėl to galite turėti skirtingus vertikalius ir horizontalius gaps, kurie gali turėti vieną reikšmę (visose pusėse) arba reikšmių porą (vertikalią ir horizontalią). Tai gali būti taikoma naudojant eilutinį stilių gaparba su mūsų --bs-gapCSS kintamuoju.

<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

Vienas iš CSS tinklelio apribojimų yra tas, kad mūsų numatytosios klasės vis tiek generuojamos dviem Sass kintamaisiais $grid-columnsir $grid-gutter-width. Tai veiksmingai iš anksto nustato klasių, sugeneruotų mūsų sudarytame CSS, skaičių. Čia turite dvi parinktis:

• Pakeiskite šiuos numatytuosius Sass kintamuosius ir iš naujo sukompiliuokite savo CSS.
• Naudokite įterptuosius arba pasirinktinius stilius, kad papildytumėte pateiktas klases.

Pavyzdžiui, galite padidinti stulpelių skaičių ir pakeisti tarpo dydį, o tada pakeisti savo „stulpelių“ dydį naudodami įterptųjų stilių ir iš anksto nustatytų CSS tinklelio stulpelių klasių derinį (pvz., .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>