TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

25

Bootstrap 5 tarjoaa tehokkaan ruudukkoasettelujärjestelmän, joka auttaa luomaan helposti mobiiliystävällisiä asetteluja. Bootstrap -ruudukon asettelujärjestelmässä on kuusi reagoivaa katkaisukohtaa erikokoisille laitteille. Kussakin on 12 saraketta ja sekoittamalla voit luoda haluamasi asettelut. Ruudukkojärjestelmä perustuu joustavaan laatikkoon ja on täysin reagoiva.

Bootstrap 5 Grid Layout -opetusohjelma

Tämä opetusohjelma sisältää seuraavat aiheet:

  1. Ruudukon asettelun perusteet
  2. Tier 5 -verkkojärjestelmä
  3. Yhtä leveä yksinkertainen ruudukko
  4. Yksi sarakkeen leveys ja muuta muiden sarakkeiden kokoa
  5. Muuttuvan leveyden sisältö
  6. Yhden leveyden monirivinen ruudukko
  7. Pinottu vaakaruudukko
  8. Pystysuora kohdistus
  9. Vaakasuora kohdistaminen
  10. Ristikko ilman kouruja
  11. Kääritty pylväsruudukko
  12. Sarakkeen sisällön uudelleenjärjestys ruudukossa
  13. Sarakkeen siirtymä
  14. Pesiminen ruudukon sisällä

1 Bootstrap Grid -järjestelmän perusteet

Ruudukkojärjestelmä käyttää kolmea CSS -pääluokkaa tarvittavan asettelun luomiseen – .container, .row ja .col. Säiliö kattaa koko asettelun ja sen jälkeen rivit ja sitten sarakkeet.

  • Käytä .container-luokkaa sisällön keskittämiseen kiinteällä leveydellä ja .container-fluidia reagoivaan koko leveyden asetteluun.
  • Voit käyttää .row -luokkaa sisällyttääksesi kaikki vaakasarakkeet 12 jaettuun leveyteen.
  • Aseta todellinen sisältö sarakkeiden sisälle käyttämällä .col- tai .col-* -luokkia. Rivi voi esimerkiksi sisältää kaksi saraketta, kuten .col-8 + .col-4. Sarakkeen tulee olla riviluokan välitön lapsi.
  • Kaikki sarakkeet käyttävät flexboxia, mikä tarkoittaa yksinkertaista .col -luokan käyttöä, joka jakaa rivin yhtä leveiksi sarakkeiksi. Jos esimerkiksi käytät kahta .col -luokkaa rivissä, se jakautuu automaattisesti kahteen 50%: n alueeseen.
  • Voit määritellä nimenomaisesti sarakkeen leveyden, kuten .col-sm-8, joka vie 3/4 (75%) rivin leveydestä.
  • Oletuksena sarakkeissa ja riveissä on täyte ja marginaali näkyvyyden parantamiseksi. Voit poistaa reunuksen ja pehmusteen lisäämällä ".noglutter" -luokan ".row" -merkillä.
  • Bootstrap 5 tarjoaa kuusi raja -arvoa – extra small (xs), small (sm), medium (md), large (lg), extra large (xl) ja extra extra large (xxl).
  • Kaikki katkaisupisteiden tasot käyttävät oletuksena .col -luokkaa. Mahdollisia muita luokkia sovelletaan kaikkiin ylemmän tason laitteisiin. Esimerkiksi .col-sm-4 (pieni) käytetään pienissä, keskikokoisissa, suurissa ja erittäin suurissa laitteissa.

2 tason 6 ruudukkojärjestelmä

Alla oleva taulukko näyttää Bootstrap 5: n tarjoamat kuusi raja -arvoa:

Ruudukko Erittäin pieni Pieni Keskikokoinen Suuri XL Extra Extra Large
Katkaisupiste <576 kuvapistettä ≥576 kuvapistettä ≥ 768 kuvapistettä ≥992 kuvapistettä ≥ 1200 kuvapistettä ≥ 1400 kuvapistettä
CSS -luokka .kanssa- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Säiliön suurin leveys Ei mitään (automaattinen) 540 pikseliä 720px 960 kuvapistettä 1140 pikseliä 1320 pikseliä
  • Sarakkeet – Jokainen rivi on jaettu 12 yhtä leveään sarakkeeseen.
  • Kourun leveys – 15 pikseliä sarakkeen kummallakin puolella, yhteensä 30 kuvapistettä.
  • Pesiminen – Kyllä, sarakkeet voidaan sisäistää toiseen sarakkeeseen.
  • Sarakkeiden järjestys – Kyllä, minkä tahansa rivin sarakkeen sisältö voidaan järjestää uudelleen.

Näytämme erilaisia ​​esimerkkejä ruudukkojen ymmärtämiseksi paremmin:

3 Yhden leveyden yksinkertainen ruudukko

Luo yksinkertainen ruudukko, jossa on samanlaiset sarakkeet vain käyttämällä .col -luokkia. Kun käytetään ".col" -luokkia, rivi jaetaan automaattisesti yhtä leveiksi sarakkeiksi. Esimerkiksi kun käytetään kahta ".col" -luokkaa, rivi jaetaan kahteen 1/2+1/2 sarakkeeseen. Alla on esimerkki koodeista, joilla luodaan 1/2+1/2 ja 1/3+1/3+1/3 sarakkeita käyttämällä yksinkertaisia ​​.col -luokkia.

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

Yhtä suuret sarakkeet näytetään selaimessa kuten alla:

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

4 Yksi sarakkeen leveys ja muuta muiden sarakkeiden kokoa

Bootstrap -ruudukkojärjestelmän avulla voit määrittää yhden sarakkeen leveyden ja loput saman rivin sarakkeet säädetään automaattisesti. Jos esimerkiksi määrität rivin "col + col-6 + col", se jaetaan automaattisesti kuten "1/3 + 1/6 + 1/3" -sarakkeet. Alla on kaksi esimerkkiä yhden sarakkeen määrittämisestä ja sitten loput kaksi muuta saraketta säädetään vastaavasti.

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

Alla on koodi sarakkeen ympäröivien sarakkeiden säätämiseksi määritellyllä leveydellä:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Muuttuvan leveyden sisältö

Sarakkeiden leveys voidaan rajoittaa todelliseen sisältöön käyttämällä luokkaa ".col- {breakpoint} -auto", esimerkiksi ".col-md-auto".

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

Yllä olevan esimerkin keskisarakkeet säädetään automaattisesti sisällön leveyteen. Alla on yllä olevan ruudukon ulkoasun koodi:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 saman leveyden monirivinen ruudukko

Luo yksinkertaisesti usean sarakkeen asettelu riville käyttämällä .col -luokkia jatkuvasti. Sinun tarvitsee vain lisätä ".w-100" -luokka, jossa vaaditaan katkaisupiste.

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

Alla on koodi saman leveyden monirivin luomiseksi käyttämällä yhtä "rivi" -luokkaa.

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 pinottu vaakasuora ristikko

Voit luoda pinotun ruudukon asettelun käyttämällä .col-sm- -luokkia, jotka laajennetaan työpöydän vaakasuuntaiseen ruudukkoon .

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

Alla on koodi pinottu vaakasuuntaisen ruudukon asettelun luomiseksi yllä esitetyllä tavalla.

<div class="row"> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> </div>

8 Pystysuuntainen kohdistus

Sarakkeen sisällä olevan sisällön pystysuoraa kohdistusta voidaan säätää lisäämällä yksi seuraavista kolmesta luokasta .row -luokalla, kuten alla:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Vaakasuora kohdistus

Pystysuuntaisen kohdistuksen tapaan voit myös säätää sarakkeiden vaakasuuntaista kohdistusta seuraavasti:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Tämä tuottaa seuraavan tuloksen selaimessa:

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

10 Ruudukko ilman kouruja

Oletuksena sarakkeissa on vaakasuora pehmuste ja riveissä on negatiiviset vaakasuuntaiset marginaalit paremman kohdistuksen takaamiseksi. Voit poistaa reunat ja pehmusteet käyttämällä "ei-kouruja" -luokkaa ja "riviä" alla esitetyllä tavalla.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Se tuottaa seuraavan tuloksen:

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

11 Kääritty pylväsruudukko

Jos rivillä on enemmän kuin 12 saraketta, sarakkeet kääritään automaattisesti seuraavalle riville. Esimerkiksi alla olevat kaksi ensimmäistä saraketta mahtuvat ensimmäiselle riville (9+2 = 11), kun taas kolmas ja neljäs sarake kääritään uudelle riville.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Käärityt sarakkeet näyttävät tältä:

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

12 Sarakkeen sisällön uudelleenjärjestys ruudukossa

Bootstrapin avulla voit järjestää sarakkeen sisällön uudelleen rivin sijainnista riippumatta. Esimerkiksi alla olevassa ruudukkoasettelussa käytetään kolmea saraketta.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Tulos näyttää alla olevalta ilman järjestettyä saraketta, joka on kaikkien muiden järjestettyjen sarakkeiden etusijalla ja näkyy ensimmäisessä sarakkeessa. Sarakkeen sisältö, joka käyttää tilaus-12-luokkaa, siirretään viimeiseen paikkaan. Ja sarakkeen sisältö, joka käyttää tilausta 1, siirretään keskiasentoon (ensimmäinen).

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

13 Sarakkeen siirto

Bootstrap 4: stä he pudottivat sarakkeen siirto -ominaisuuden flexbox -ruudukon asettelun vuoksi. Voit kuitenkin siirtää sarakkeet pois käyttämällä marginaalityökaluluokkia, kuten "ml-auto", "mr-auto" jne.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Alla on tulos sarakkeen korjauksesta marginaaliluokkia käyttäen:

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

14 Pesiminen ruudukon sisällä

Voit myös sijoittaa sarakkeet muihin sarakkeisiin alla olevan kuvan mukaisesti:

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Se tuottaa seuraavan tuloksen:

Kuinka käyttää Bootstrap 5 Grid -asetteluja?

Johtopäätös

Kuten näette, Bootstrap 5 -verkkoasettelujärjestelmällä voidaan luoda paljon oletusasetteluja. On myös mahdollista luoda mukautettuja CSS -tiedostoja mukautettujen asettelujen luomiseen tai jonkin oletusasettelun muokkaamiseen. Vankka flexbox -ruudukon asettelu ja uudelleenkäytettävät komponentit tekevät Bootstrap 5: stä vahvemman kuin edellinen versio.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja