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.

Sellel lehel

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.

Tähelepanu – meie CSS Grid süsteem on eksperimentaalne ja see on alates versioonist 5.1.0 lubatud! Lisasime selle oma dokumentatsiooni CSS-i, et seda teile näidata, kuid see on vaikimisi keelatud. Jätkake lugemist, et saada teada, kuidas seda oma projektides lubada.

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: falseja lubage CSS Grid, määrates $enable-cssgrid: true. Seejärel kompileerige oma Sass uuesti.
Asendage eksemplarid .row. .gridKlass .gridmäärab display: gridja loob selle grid-template, millele saate oma HTML-i abil tugineda.
Asenda .col-*klassid .g-col-*klassidega. Selle põhjuseks on asjaolu, et meie CSS-ruudustiku veerud kasutavad grid-columnatribuuti width.
Veergude ja vihmaveerennide suurused määratakse CSS-i muutujate kaudu. Seadistage need vanemas .gridja kohandage seda vastavalt oma soovile, kas tekstisiseselt või laaditabel, kasutades --bs-columnsja --bs-gap.

Tulevikus läheb Bootstrap tõenäoliselt üle hübriidlahendusele, kuna gapvara 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 gapasendab paddingmeie vaikevõrgusüsteemi horisontaalset ja toimib rohkem nagu margin.
Erinevalt .rows .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;"vs class="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-4Klasside abil saab luua kolm võrdse laiusega veergu kõigis vaateavades ja seadmetes . Lisage reageerivad klassid , et muuta paigutust vaateava suuruse järgi.

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

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.

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

Võrrelge seda selle kahe veeru paigutusega kõigis vaateportides.

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

Pakkimine

Ruudustiku üksused mähitakse automaatselt järgmisele reale, kui horisontaalselt enam ruumi pole. Pange tähele, et gapkehtib horisontaalsete ja vertikaalsete tühimike kohta ruudustiku elementide vahel.

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

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-startja grid-column-end. Stardiklassid on lühendatud esimesest. Siduge need veeruklassidega vastavalt vajadusele suurusele ja joondamiseks. Klasside algusaeg on 1nende 0atribuutide jaoks kehtetu väärtus.

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

Automaatsed veerud

Kui ruudustiku üksustel pole klasse (vahetu järglased .grid), määratakse iga ruudustiku üksuse suurus automaatselt ühe veeru suuruseks.

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>

Seda käitumist saab segada ruudustiku veergude klassidega.

.g-col-6

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>

Pesitsemine

Sarnaselt meie vaikevõrgusüsteemiga võimaldab meie CSS-võrk .grids-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 .grid12-le (meie vaikeväärtus).
Kolmandal automaatsel veerul pole pesastatud sisu.

Praktikas võimaldab see meie vaikevõrgusüsteemiga võrreldes keerukamaid ja kohandatud paigutusi.

Esimene automaatne veerg

Automaatne veerg

Teine automaatne veerg

6/12

4/12

2 12-st

Kolmas automaatne veerg

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>

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-rowskuna seda pole veel kuskil seadistatud. Kui see on olemas, kasutab .grideksemplar seda väärtust varuväärtuse asemel 1.

Ruudustiku klasse pole

Kohesed alamelemendid .gridon ruudustiku üksused, nii et nende suurus määratakse ilma .g-colklassi selgesõnaliselt lisamata.

Automaatne veerg

html

<div class="grid text-center" 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.

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

Ridade lisamine

Rohkemate ridade lisamine ja veergude paigutuse muutmine:

Automaatne veerg

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>

Lüngad

Muutke vertikaalseid lünki ainult muutes row-gap. Pange tähele, et me kasutame gaps-l .grid, kuid row-gapja column-gapseda saab vastavalt vajadusele muuta.

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

Seetõttu võivad teil olla erinevad vertikaalsed ja horisontaalsed gaps-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 gapvõi meie --bs-gapCSS-i muutujaga.

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

Sass

Üks CSS-ruudustiku piirang on see, et meie vaikeklassid genereerivad endiselt kaks Sassi muutujat $grid-columnsja $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.

14 veergu

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