Rrjeti CSS
Mësoni se si të aktivizoni, përdorni dhe personalizoni sistemin tonë alternativ të paraqitjes së ndërtuar në CSS Grid me shembuj dhe copa kodi.
Sistemi i paracaktuar i rrjetit të Bootstrap përfaqëson kulmin e më shumë se një dekade të teknikave të paraqitjes së CSS, të provuara dhe të testuara nga miliona njerëz. Por, ai u krijua gjithashtu pa shumë nga veçoritë dhe teknikat moderne të CSS që po shohim në shfletues si rrjeti i ri CSS.
Si punon
Me Bootstrap 5, ne kemi shtuar opsionin për të aktivizuar një sistem të veçantë të rrjetit që është ndërtuar në CSS Grid, por me një kthesë Bootstrap. Ju ende merrni klasa që mund t'i aplikoni sipas dëshirës për të ndërtuar paraqitje të përgjegjshme, por me një qasje të ndryshme nën kapuç.
-
Rrjeti CSS është i zgjedhur. Çaktivizoni sistemin e paracaktuar të rrjetit duke vendosur
$enable-grid-classes: false
dhe aktivizoni rrjetin CSS duke vendosur$enable-cssgrid: true
. Pastaj, ripërpiloni Sass-in tuaj. -
Zëvendësoni shembujt e
.row
me.grid
. Klasa.grid
vendosdisplay: grid
dhe krijon njëgrid-template
që ju e ndërtoni me HTML-në tuaj. -
Zëvendësoni
.col-*
klasat me.g-col-*
klasa. Kjo ndodh sepse kolonat tona të rrjetit CSS përdorin veçorinë nëgrid-column
vend tëwidth
. -
Kolonat dhe madhësitë e ulluqeve vendosen nëpërmjet variablave CSS. Vendosni këto në prind
.grid
dhe personalizoni si të dëshironi, në linjë ose në një fletë stili, me--bs-columns
dhe--bs-gap
.
Në të ardhmen, Bootstrap ka të ngjarë të zhvendoset në një zgjidhje hibride pasi gap
prona ka arritur mbështetje pothuajse të plotë të shfletuesit për flexbox.
Dallimet kryesore
Krahasuar me sistemin e paracaktuar të rrjetit:
-
Shërbimet Flex nuk ndikojnë në kolonat CSS Grid në të njëjtën mënyrë.
-
Boshllëqet zëvendësojnë ulluqet. Prona
gap
zëvendëson horizontalinpadding
nga sistemi ynë i paracaktuar i rrjetit dhe funksionon më shumë simargin
. -
Si të tilla, ndryshe nga
.row
s,.grid
s nuk kanë marzhe negative dhe shërbimet e marzhit nuk mund të përdoren për të ndryshuar ulluqet e rrjetit. Boshllëqet e rrjetit aplikohen horizontalisht dhe vertikalisht si parazgjedhje. Shikoni seksionin e personalizimit për më shumë detaje. -
Stilet inline dhe të personalizuara duhet të shihen si zëvendësues për klasat e modifikuesve (p.sh.,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Vendosja e foleve funksionon në mënyrë të ngjashme, por mund t'ju kërkojë të rivendosni numrin e kolonave në çdo shembull të një ndërlidhjeje
.grid
. Shikoni seksionin e foleve për detaje.
Shembuj
Tre kolona
Tre kolona me gjerësi të barabartë në të gjitha portat e shikimit dhe pajisjet mund të krijohen duke përdorur .g-col-4
klasat. Shtoni klasa të përgjegjshme për të ndryshuar paraqitjen sipas madhësisë së portit të pamjes.
<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>
Të përgjegjshme
Përdorni klasa të përgjegjshme për të rregulluar paraqitjen tuaj nëpër portat e shikimit. Këtu fillojmë me dy kolona në portat më të ngushta të pamjes, dhe më pas rritemi në tre kolona në portat e pamjes mesatare dhe më lart.
<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>
Krahasoni atë me këtë paraqitje dy kolonash në të gjitha portat e shikimit.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Mbështjellja
Artikujt e rrjetës mbyllen automatikisht në rreshtin tjetër kur nuk ka më vend horizontalisht. Vini re se kjo gap
vlen për boshllëqet horizontale dhe vertikale midis artikujve të rrjetit.
<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>
Fillon
Klasat e fillimit synojnë të zëvendësojnë klasat e kompensimit të rrjetit tonë të paracaktuar, por ato nuk janë plotësisht të njëjta. CSS Grid krijon një shabllon rrjeti përmes stileve që u thonë shfletuesve të "fillojnë në këtë kolonë" dhe "përfundojnë në këtë kolonë". Ato prona janë grid-column-start
dhe grid-column-end
. Klasat fillestare janë stenografi për të parën. Çiftojini ato me klasat e kolonave sipas madhësisë dhe rreshtoni kolonat tuaja sipas nevojës. Klasat e fillimit fillojnë me 1
një 0
vlerë të pavlefshme për këto veti.
<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>
Kolonat automatike
Kur nuk ka klasa në artikujt e rrjetit (fëmijët e menjëhershëm të një .grid
), secili artikull i rrjetit do të përmasohet automatikisht në një kolonë.
<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>
Kjo sjellje mund të përzihet me klasat e kolonave të rrjetit.
<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>
Folezimi
Ngjashëm me sistemin tonë të paracaktuar të rrjetit, rrjeti ynë CSS mundëson folezim të lehtë të .grid
s. Megjithatë, ndryshe nga standardi, ky rrjet trashëgon ndryshime në rreshta, kolona dhe boshllëqe. Merrni parasysh shembullin e mëposhtëm:
- Ne anashkalojmë numrin e parazgjedhur të kolonave me një variabël CSS lokale:
--bs-columns: 3
. - Në kolonën e parë automatike, numri i kolonave trashëgohet dhe secila kolonë është një e treta e gjerësisë së disponueshme.
- Në kolonën e dytë automatike, ne kemi rivendosur numrin e kolonave në të mbivendosur
.grid
në 12 (parazgjedhja jonë). - Kolona e tretë automatike nuk ka përmbajtje të ndërthurur.
Në praktikë kjo lejon paraqitje më komplekse dhe më të personalizuara kur krahasohet me sistemin tonë të paracaktuar të rrjetit.
<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>
Përshtatje
Personalizo numrin e kolonave, numrin e rreshtave dhe gjerësinë e boshllëqeve me variabla lokale CSS.
E ndryshueshme | Vlera e kthimit | Përshkrim |
---|---|---|
--bs-rows |
1 |
Numri i rreshtave në shabllonin tuaj të rrjetit |
--bs-columns |
12 |
Numri i kolonave në shabllonin tuaj të rrjetit |
--bs-gap |
1.5rem |
Madhësia e hendekut midis kolonave (vertikale dhe horizontale) |
Këto variabla CSS nuk kanë vlerë të paracaktuar; në vend të kësaj, ata aplikojnë vlera kthimi që përdoren derisa të sigurohet një shembull lokal. Për shembull, ne përdorim var(--bs-rows, 1)
për rreshtat tanë të rrjetit CSS, i cili injoron --bs-rows
sepse nuk është vendosur ende askund. Pasi të jetë, .grid
shembulli do ta përdorë atë vlerë në vend të vlerës së kthimit të 1
.
Nuk ka klasa në rrjet
Elementet e fëmijëve të menjëhershëm të .grid
janë artikuj në rrjet, kështu që ato do të përmasohen pa shtuar në mënyrë të qartë një .g-col
klasë.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kolonat dhe boshllëqet
Rregulloni numrin e kolonave dhe hendekun.
<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>
Shtimi i rreshtave
Shtimi i më shumë rreshtave dhe ndryshimi i vendosjes së kolonave:
<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>
Boshllëqe
Ndryshoni boshllëqet vertikale vetëm duke modifikuar row-gap
. Vini re se ne përdorim gap
në .grid
s, por row-gap
dhe column-gap
mund të modifikohet sipas nevojës.
<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>
Për shkak të kësaj, ju mund të keni s të ndryshme vertikale dhe horizontale gap
, të cilat mund të marrin një vlerë të vetme (të gjitha anët) ose një palë vlerash (vertikale dhe horizontale). Kjo mund të zbatohet me një stil inline për gap
, ose me --bs-gap
ndryshoren tonë 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
Një kufizim i rrjetit CSS është se klasat tona të paracaktuara ende gjenerohen nga dy variabla Sass, $grid-columns
dhe $grid-gutter-width
. Kjo në mënyrë efektive paracakton numrin e klasave të krijuara në CSS-në tonë të përpiluar. Ju keni dy opsione këtu:
- Modifikoni ato variabla të paracaktuar Sass dhe ripërpiloni CSS-në tuaj.
- Përdorni stile inline ose të personalizuara për të shtuar klasat e ofruara.
Për shembull, ju mund të rrisni numrin e kolonave dhe të ndryshoni madhësinë e boshllëqeve, dhe më pas të përmasoni "kolonat" tuaja me një përzierje stilesh inline dhe klasa të kolonave të paracaktuara të rrjetit CSS (p.sh., .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>