CSS-võrk
Siit saate teada, kuidas lubada, kasutada ja kohandada meie alternatiivset paigutussüsteemi, mis on üles ehitatud CSS-võrgustikule näidete ja koodilõikudega.
Bootstrapi vaikevõrgusüsteem kujutab endast üle kümne aasta kestnud CSS-i paigutustehnikate kulminatsiooni, mida on proovinud ja testinud miljonid inimesed. Kuid see loodi ka ilma paljude kaasaegsete CSS-i funktsioonide ja tehnikateta, mida me näeme sellistes brauserites nagu uus CSS-võrk.
Kuidas see töötab
Bootstrap 5-ga oleme lisanud võimaluse lubada eraldi ruudustikusüsteem, mis on üles ehitatud CSS Gridile, kuid Bootstrapi keerdkäiguga. Saate endiselt kursusi, mida saate oma kapriisi järgi tundlike paigutuste loomiseks rakendada, kuid kapoti all on erinev lähenemisviis.
-
CSS Grid on lubatud. Keelake vaikimisi ruudustikusüsteem, määrates
$enable-grid-classes: false
ja lubage CSS Grid, määrates$enable-cssgrid: true
. Seejärel kompileerige oma Sass uuesti. -
Asendage eksemplarid
.row
..grid
Klass.grid
määrabdisplay: grid
ja loob sellegrid-template
, millele saate oma HTML-i abil tugineda. -
Asenda
.col-*
klassid.g-col-*
klassidega. Selle põhjuseks on asjaolu, et meie CSS-ruudustiku veerud kasutavadgrid-column
atribuutiwidth
. -
Veergude ja vihmaveerennide suurused määratakse CSS-i muutujate kaudu. Seadistage need vanemas
.grid
ja kohandage seda vastavalt oma soovile, kas tekstisiseselt või laaditabel, kasutades--bs-columns
ja--bs-gap
.
Tulevikus läheb Bootstrap tõenäoliselt üle hübriidlahendusele, kuna gap
vara on saavutanud flexboxi brauseri peaaegu täieliku toe.
Peamised erinevused
Võrreldes vaikevõrgusüsteemiga:
-
Flexi utiliidid ei mõjuta CSS-i ruudustiku veerge samal viisil.
-
Vahed asendavad vihmaveerennid. Atribuut
gap
asendabpadding
meie vaikevõrgusüsteemi horisontaalset ja toimib rohkem nagumargin
. -
Erinevalt
.row
s.grid
-st ei ole s-l negatiivseid veerisid ja veerise utiliite ei saa kasutada võrgu rennide muutmiseks. Võrguvahed rakendatakse vaikimisi horisontaalselt ja vertikaalselt. Lisateabe saamiseks vaadake kohandamise jaotist . -
Tekstisiseseid ja kohandatud stiile tuleks vaadelda muuteklasside (nt
style="--bs-columns: 3;"
vsclass="row-cols-3"
) asendustena. -
Pesastamine toimib sarnaselt, kuid võib osutuda vajalikuks lähtestada veergude arv iga pesastatud eksemplari puhul
.grid
. Vaadake üksikasju pesastamise jaotisest .
Näited
Kolm veergu
.g-col-4
Klasside abil saab luua kolm võrdse laiusega veergu kõigis vaateavades ja seadmetes . Lisage reageerivad klassid , et muuta paigutust vaateava suuruse järgi.
<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>
Vastutulelik
Kasutage reageerivaid klasse, et kohandada oma paigutust vaateavade lõikes. Siin alustame kahe veeruga kõige kitsamates vaateavades ja kasvame seejärel kolmeks veeruks keskmistel ja kõrgematel vaateavadel.
<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>
Võrrelge seda selle kahe veeru paigutusega kõigis vaateportides.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Pakkimine
Ruudustiku üksused mähitakse automaatselt järgmisele reale, kui horisontaalselt enam ruumi pole. Pange tähele, et gap
kehtib horisontaalsete ja vertikaalsete tühimike kohta ruudustiku elementide vahel.
<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>
Käivitub
Algklasside eesmärk on asendada meie vaikeruudustiku nihkeklassid, kuid need pole täiesti samad. CSS Grid loob ruudustiku malli stiilide kaudu, mis käsivad brauseritel "alustada sellest veerust" ja "lõpetada selles veerus". Need omadused on grid-column-start
ja grid-column-end
. Stardiklassid on lühendatud esimesest. Siduge need veeruklassidega vastavalt vajadusele suurusele ja joondamiseks. Klasside algusaeg on 1
nende 0
atribuutide jaoks kehtetu väärtus.
<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>
Automaatsed veerud
Kui ruudustiku üksustel pole klasse (vahetu järglased .grid
), määratakse iga ruudustiku üksuse suurus automaatselt ühe veeru suuruseks.
<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>
Seda käitumist saab segada ruudustiku veergude klassidega.
<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>
Pesitsemine
Sarnaselt meie vaikevõrgusüsteemiga võimaldab meie CSS-võrk .grid
s-ide hõlpsat pesastamist. Kuid erinevalt vaikeseadest pärib see ruudustik ridade, veergude ja lünkade muudatused. Kaaluge allolevat näidet:
- Alistame veergude vaikearvu kohaliku CSS-i muutujaga:
--bs-columns: 3
. - Esimeses automaatses veerus päritakse veergude arv ja iga veerg on üks kolmandik saadaolevast laiusest.
- Teises automaatses veerus lähtestasime pesastatud veergude arvu
.grid
12-le (meie vaikeväärtus). - Kolmandal automaatsel veerul pole pesastatud sisu.
Praktikas võimaldab see meie vaikevõrgusüsteemiga võrreldes keerukamaid ja kohandatud paigutusi.
<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>
Kohandamine
Kohandage kohalike CSS-muutujate abil veergude arvu, ridade arvu ja lünkade laiust.
Muutuv | Varuväärtus | Kirjeldus |
---|---|---|
--bs-rows |
1 |
Teie ruudustikumalli ridade arv |
--bs-columns |
12 |
Veergude arv teie ruudustikumallis |
--bs-gap |
1.5rem |
Veergude vahelise pilu suurus (vertikaalne ja horisontaalne) |
Nendel CSS-i muutujatel ei ole vaikeväärtust; selle asemel rakendavad nad varuväärtusi, mida kasutatakse kuni kohaliku eksemplari pakkumiseni. Näiteks kasutame var(--bs-rows, 1)
oma CSS-ruudustiku ridu, mis ignoreerib, --bs-rows
kuna seda pole veel kuskil seadistatud. Kui see on olemas, kasutab .grid
eksemplar seda väärtust varuväärtuse asemel 1
.
Ruudustiku klasse pole
Kohesed alamelemendid .grid
on ruudustiku üksused, nii et nende suurus määratakse ilma .g-col
klassi selgesõnaliselt lisamata.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Veerud ja lüngad
Reguleerige veergude arvu ja vahet.
<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>
Ridade lisamine
Rohkemate ridade lisamine ja veergude paigutuse muutmine:
<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>
Lüngad
Muutke vertikaalseid lünki ainult muutes row-gap
. Pange tähele, et me kasutame gap
s-l .grid
, kuid row-gap
ja column-gap
seda saab vastavalt vajadusele muuta.
<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>
Seetõttu võivad teil olla erinevad vertikaalsed ja horisontaalsed gap
s-d, millel võib olla üks väärtus (kõik küljed) või väärtuste paar (vertikaalne ja horisontaalne). Seda saab rakendada tekstisisese stiiliga gap
või meie --bs-gap
CSS-i muutujaga.
<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
Üks CSS-ruudustiku piirang on see, et meie vaikeklassid genereerivad endiselt kaks Sassi muutujat $grid-columns
ja $grid-gutter-width
. See määrab tõhusalt ette meie koostatud CSS-is loodud klasside arvu. Siin on kaks võimalust:
- Muutke neid Sassi vaikemuutujaid ja kompileerige oma CSS uuesti.
- Kasutage pakutavate klasside täiendamiseks tekstisiseseid või kohandatud stiile.
Näiteks saate suurendada veergude arvu ja muuta tühiku suurust ning seejärel määrata veergude suurust tekstisiseste stiilide ja eelnevalt määratletud CSS-ruudustiku veeruklasside (nt .g-col-4
) abil.
<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>