Mreža CSS
Naučite se omogočiti, uporabljati in prilagoditi naš alternativni sistem postavitve, zgrajen na CSS Grid, s primeri in delčki kode.
Bootstrapov privzeti mrežni sistem predstavlja vrhunec več kot desetletja tehnik postavitve CSS, ki so jih preizkusili in preizkusili milijoni ljudi. Vendar pa je bil ustvarjen tudi brez številnih sodobnih funkcij in tehnik CSS, ki jih vidimo v brskalnikih, kot je nova mreža CSS.
Kako deluje
Z Bootstrap 5 smo dodali možnost za omogočanje ločenega mrežnega sistema, ki je zgrajen na CSS Grid, vendar z zasukom Bootstrap. Še vedno dobite tečaje, ki jih lahko uporabite za ustvarjanje odzivnih postavitev, vendar z drugačnim pristopom pod pokrovom.
-
CSS Grid je opt-in. Onemogočite privzeti mrežni sistem z nastavitvijo
$enable-grid-classes: false
in omogočite mrežo CSS z nastavitvijo$enable-cssgrid: true
. Nato znova prevedite svoj Sass. -
Zamenjajte primerke
.row
z.grid
. Razred.grid
nastavidisplay: grid
in ustvari, nagrid-template
katerem gradite s svojim HTML-jem. -
Zamenjajte
.col-*
razrede z.g-col-*
razredi. To je zato, ker naši stolpci mreže CSS uporabljajogrid-column
lastnost namestowidth
. -
Velikosti stolpcev in žlebov se nastavijo s spremenljivkami CSS. Nastavite jih na nadrejeni
.grid
in prilagodite, kakor želite, v vrstici ali v slogovni tabeli, z--bs-columns
in--bs-gap
.
V prihodnosti se bo Bootstrap verjetno preusmeril na hibridno rešitev, saj je gap
lastnost dosegla skoraj popolno podporo brskalnika za flexbox.
Ključne razlike
V primerjavi s privzetim mrežnim sistemom:
-
Pripomočki Flex ne vplivajo na stolpce CSS Grid na enak način.
-
Vrzeli nadomeščajo žlebove. Lastnost
gap
nadomešča vodoravnopadding
iz našega privzetega mrežnega sistema in deluje bolj kotmargin
. -
Kot tak, za razliko od
.row
s,.grid
s nima negativnih robov in pripomočkov za rob ni mogoče uporabiti za spreminjanje žlebov mreže. Mrežne vrzeli so privzeto uporabljene vodoravno in navpično. Za več podrobnosti glejte razdelek o prilagajanju . -
Sloge v vrstici in sloge po meri je treba obravnavati kot zamenjavo za razrede modifikatorjev (npr.
style="--bs-columns: 3;"
vs.class="row-cols-3"
). -
Gnezdenje deluje podobno, vendar boste morda morali ponastaviti štetje stolpcev za vsak primerek ugnezdenega
.grid
. Za podrobnosti si oglejte razdelek o gnezdenju .
Primeri
Trije stolpci
.g-col-4
Z uporabo razredov je mogoče ustvariti tri enako široke stolpce v vseh pogledih in napravah . Dodajte odzivne razrede , da spremenite postavitev glede na velikost vidnega polja.
<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>
Odzivna
Uporabite odzivne razrede, da prilagodite svojo postavitev v pogledih. Tukaj začnemo z dvema stolpcema na najožjih vidnih oknih, nato pa povečamo na tri stolpce na srednjih vidnih oknih in višje.
<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>
Primerjajte to s to postavitvijo dveh stolpcev na vseh pogledih.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Zavijanje
Elementi mreže se samodejno prelomijo v naslednjo vrstico, ko vodoravno ni več prostora. Upoštevajte, da gap
velja za vodoravne in navpične vrzeli med elementi mreže.
<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>
Začne
Namen začetnih razredov je nadomestiti razrede odmikov naše privzete mreže, vendar niso povsem enaki. CSS Grid ustvari mrežno predlogo prek slogov, ki brskalnikom sporočajo, naj se »začnejo pri tem stolpcu« in »končajo pri tem stolpcu«. Te lastnosti so grid-column-start
in grid-column-end
. Začetni razredi so okrajšava za prvo. Združite jih z razredi stolpcev, da določite velikost in poravnate svoje stolpce, kakor želite. Začetek razredov se začne pri 1
as 0
je neveljavna vrednost za te lastnosti.
<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>
Samodejni stolpci
Če na mrežnih postavkah (neposrednih podrejenih elementih) ni razredov .grid
, bo vsaka mrežna postavka samodejno prilagojena velikosti enega stolpca.
<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>
To vedenje je mogoče mešati z razredi stolpcev mreže.
<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>
Gnezdenje
Podobno kot naš privzeti mrežni sistem tudi naš CSS Grid omogoča enostavno gnezdenje .grid
s. Vendar pa ta mreža za razliko od privzete podeduje spremembe v vrsticah, stolpcih in vrzeli. Razmislite o spodnjem primeru:
- Privzeto število stolpcev preglasimo z lokalno spremenljivko CSS:
--bs-columns: 3
. - V prvem samodejnem stolpcu je število stolpcev podedovano in vsak stolpec ima eno tretjino razpoložljive širine.
- V drugem samodejnem stolpcu smo ponastavili število stolpcev v ugnezdenih
.grid
na 12 (naša privzeta vrednost). - Tretji samodejni stolpec nima ugnezdene vsebine.
V praksi to omogoča bolj zapletene in prilagojene postavitve v primerjavi z našim privzetim mrežnim sistemom.
<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>
Prilagajanje
Prilagodite število stolpcev, število vrstic in širino vrzeli z lokalnimi spremenljivkami CSS.
Spremenljivka | Nadomestna vrednost | Opis |
---|---|---|
--bs-rows |
1 |
Število vrstic v vaši mrežni predlogi |
--bs-columns |
12 |
Število stolpcev v vaši mrežni predlogi |
--bs-gap |
1.5rem |
Velikost vrzeli med stolpci (navpično in vodoravno) |
Te spremenljivke CSS nimajo privzete vrednosti; namesto tega uporabijo nadomestne vrednosti, ki se uporabljajo, dokler ni na voljo lokalni primerek. Na primer, uporabljamo var(--bs-rows, 1)
za naše vrstice CSS Grid, ki jih prezre, --bs-rows
ker še niso bile nikjer nastavljene. Ko je, bo .grid
primerek uporabil to vrednost namesto nadomestne vrednosti 1
.
Brez mrežnih razredov
Neposredni podrejeni elementi .grid
so elementi mreže, zato se jim bo velikost določila brez izrecnega dodajanja .g-col
razreda.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Stolpci in vrzeli
Prilagodite število stolpcev in razmik.
<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>
Dodajanje vrstic
Dodajanje več vrstic in spreminjanje postavitve stolpcev:
<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>
Vrzeli
Spremenite navpične vrzeli samo tako, da spremenite row-gap
. Upoštevajte, da uporabljamo gap
na .grid
s, vendar row-gap
in column-gap
ju lahko po potrebi spremenimo.
<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>
Zaradi tega lahko imate različne navpične in vodoravne gap
s, ki lahko sprejmejo eno vrednost (vse strani) ali par vrednosti (navpično in vodoravno). To lahko uporabite z vgrajenim slogom za gap
ali z našo --bs-gap
spremenljivko 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
Ena od omejitev mreže CSS je, da naše privzete razrede še vedno generirata dve spremenljivki Sass $grid-columns
in $grid-gutter-width
. To dejansko vnaprej določa število razredov, ustvarjenih v našem prevedenem CSS. Tukaj imate dve možnosti:
- Spremenite te privzete spremenljivke Sass in znova prevedite svoj CSS.
- Uporabite vgrajene sloge ali sloge po meri, da razširite ponujene razrede.
Na primer, lahko povečate število stolpcev in spremenite velikost vrzeli, nato pa prilagodite svoje »stolpce« z mešanico vgrajenih slogov in vnaprej določenih razredov stolpcev mreže CSS (npr. .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>