Bootstrap 5 ruudukkojärjestelmä

Verkkojärjestelmä

Bootstrapin verkkojärjestelmä rakennetaan flexboxin pohjalta, ja sivulla voidaan käyttää enintään 12 saraketta.

Jos et halua käyttää yksinään kaikkia 12 saraketta, voit yhdistää ne luodaksesi leveämpiä sarakkeita:

Verkkojärjestelmä vastaa nopeasti, ja sarakkeet uudelleenjärjestäytyvät automaattisesti näytön kokoon.

Varmista, että summa on tai pienempi kuin 12 (ei tarvitse käyttää kaikkia 12 saatavilla olevaa saraketta).

Verkkoluokat

Bootstrap 5 -verkkojärjestelmä tarjoaa kuusi luokkaa:

  • .col- (Erittäin pienet laitteet - näyttöleveys on pienempi kuin 576px)
  • .col-sm- (Pientä laitteita - näyttöleveys on 576px tai suurempi)
  • .col-md- (Keskimääräiset laitteet - näyttöleveys on 768px tai suurempi)
  • .col-lg- (Suuret laitteet - näyttöleveys on 992px tai suurempi)
  • .col-xl- (Erittäin suuret laitteet - näyttöleveys on 1200px tai suurempi)
  • .col-xxl- (Erittäin suuret laitteet - näyttöleveys on 1400px tai suurempi)

Yhdistämällä yllä olevia luokkia voit luoda dynaamisempia ja joustavampia asetteluja.

Vinkki:Jokainen luokka suurenee suhteellisesti, joten jos haluat asettaa saman leveyden sm ja md, sinun tarvitsee vain määrittää sm.

Bootstrap 5 -verkkojen perusrakenne

Tässä on Bootstrap 5 -verkkojen perusrakenne:

/* Hallitse sarakkeiden leveyttä ja niiden näyttämistä eri laitteilla */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* Tai anna Bootstrap käsitellä asettelu automaattisesti */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Kokeile itse

Ensimmäinen esimerkki: Luo rivi (<div class = "row">). Lisää tarvittava määrä sarakkeita (kuten .col-*-* luokan merkinnät). Ensimmäinen tähti (*) edustaa vastaanottavuutta: sm, md, lg, xl tai xxl, ja toinen tähti edustaa numeroa, joka kertyy rivillä 12.

Toinen esimerkki: Älä anna jokaiselle col Lisää numeron sijaan anna bootstrap käsitellä asettelua, jotta luot yhtä leveitä sarakkeita: kaksi "col" Elementti = jokaisen sarakkeen 50% leveys, ja kolme saraketta = jokaisen sarakkeen 33.33% leveys. Neljä saraketta = 25% leveys jne. Voit myös käyttää .col-sm|md|lg|xl|xxl Tekee sarakkeista vastaanottavaisia.

Verkkorakenteen vaihtoehdot

Seuraavassa taulukossa esitetään, miten Bootstrap 5 -verkkorakenteet toimivat eri näyttökoossa:

Erittäin pieni (<576px) Pieni (>=576px) Keskitetty (>=768px) Suuri (>=992px) Erityisen suuri (>=1200px) Erittäin suuri (>=1400px)
Luokan etuliite .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Verkkorakenteen käyttäytyminen Aina vaakatasossa Laitteen yläpuolella, rullataan alaspäin, vaakatasossa Laitteen yläpuolella, rullataan alaspäin, vaakatasossa Laitteen yläpuolella, rullataan alaspäin, vaakatasossa Laitteen yläpuolella, rullataan alaspäin, vaakatasossa Laitteen yläpuolella, rullataan alaspäin, vaakatasossa
容器的宽度 Ei (auto) 540px 720px 960px 1140px 1320px
Sopii Puhelin pystyasennossa Puhelin vaakatasossa Tabletti Läppäri Läppärit ja tietokoneet Läppärit ja tietokoneet
Sarakkeiden # 12 12 12 12 12 12
Gutter-leveys 1.5rem (sarakkeen kummassakin puolella .75rem) 1.5rem (sarakkeen kummassakin puolella .75rem) 1.5rem (sarakkeen kummassakin puolella .75rem) 1.5rem (sarakkeen kummassakin puolella .75rem) 1.5rem (sarakkeen kummassakin puolella .75rem) 1.5rem (sarakkeen kummassakin puolella .75rem)
Upotettavissa Kyllä Kyllä Kyllä Kyllä Kyllä Kyllä
Siirtymä Kyllä Kyllä Kyllä Kyllä Kyllä Kyllä
Sarakkeiden järjestäminen Kyllä Kyllä Kyllä Kyllä Kyllä Kyllä