Opi Bootstrap 4 Grid -järjestelmä 10 minuutissa

Bootstrap 4 Grid -järjestelmää käytetään reagoiviin asetteluihin.

Reagoiva asettelu edustaa tapaa, jolla elementit kohdistuvat sivulla eri tarkkuuksilla. On tärkeää, että ymmärrät ruudukon käytön, ennen kuin opit muista Bootstrap 4 -komponenteista, koska mitä tahansa elementtiä käytät, sinun on sijoitettava se jonnekin ruudulle.

Aloitetaan!

Sisällysluettelo

  • Bootstrap 4 -säiliöt
  • Bootstrap 4 riviä
  • Bootstrap 4 saraketta
  • Lisälukemista

Bootstrap 4 -verkko koostuu säiliöistä, riveistä ja sarakkeista. Otamme ne yksitellen ja selitämme ne.

Bootstrap 4 -säiliöt

Bootstrap 4 -säiliö on luokan luokka .container. Säilö on Bootstrap 4 -verkkojärjestelmän juuri ja sitä käytetään asettelun leveyden säätämiseen.

Bootstrap 4 -säiliö sisältää kaikki sivun elementit. Tämä tarkoittaa, että sivullasi tulisi olla seuraava rakenne: ensin HTML-sivun runko, sen sisälle sinun on lisättävä säilö ja kaikki muut säilön sisällä olevat elementit.

 ... 

Yksinkertainen .containerluokka asettaa asettelun leveyden näytön leveydestä riippuen. Se sijoittaa sisällön sivun keskelle kohdistamalla sen vaakasuoraan. Bootstrap 4 -säiliön ja sivun vasemman ja oikean reunan välillä on yhtä suuri tila.

.containerAsteikot alas leveys kuin näytön leveys kapenee ja tulee koko leveydeltään mobiililaitteissa. Säiliön leveys määritetään Bootstrap 4 -kirjaston sisällä jokaiselle näyttökoolle. Näet tarkat koot täältä.

Täysleveä kontti vie 100% näytön koosta näytön leveydestä riippumatta. Jos haluat käyttää sitä, sinun on lisättävä luokka. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Voit tarkastella CodePenia täältä.

Jos haluat nähdä eroja kahden tyyppisten astioiden välillä, avaa kynä konsolissa ja vaihda näytön koon välillä.

Bootstrap 4 riviä

Bootstrap 4 riviä ovat näytön vaakasuoria viipaleita. Niitä käytetään vain pylväiden kääreinä. Tarvitset .rowluokan , jotta voit käyttää niitä .

 ... 

Tässä on tärkeimmät asiat, jotka sinun on muistettava Bootstrap 4 -rivistä:

  • Niitä käytetään vain sarakkeiden sisällyttämiseen. Jos sijoitat muita elementtejä rivin sisään sarakkeiden kanssa, et saa odotettua tulosta.
  • Ne on sijoitettava astioihin. Jos et tee tätä, saat vaakasuoran vierityksen sivullesi. Tämä tapahtuu, koska riveillä on negatiiviset vasen ja oikea marginaali 15. Säiliössä on 15 kuvapisteen täyte, joten se vastustaa marginaaleja.
  • Sarakkeiden on oltava rivin lapsia. Muuten ne eivät kohdistu. Rivit ja sarakkeet on luotu toimimaan yhdessä tässä tiukassa hierarkiassa.

Bootstrap 4 saraketta

Voimme nyt päästä tämän opetusohjelman mukavaan osaan, Bootstrap 4 -sarakkeisiin. Sarakkeet ovat upeita! Ne auttavat sinua jakamaan näytön vaakasuunnassa.

Jos sijoitat yhden sarakkeen rivillesi, se vie koko leveyden. Jos lisäät kaksi saraketta, ne ottavat kumpikin 1/2 leveydestä. Ja niin se pätee mihin tahansa sarakemäärään.

 ... ... ... ... ... ... ... ... 

Näet koodin livenä CodePenissä.

Lisähuomautus: Sarakkeet eivät ole värillisiä. Lisäsin juuri värejä visuaalisesti vakuuttavammaksi kuvaukseksi / joten ne näyttävät kauniilta.

Sarakkeiden koon asettaminen

.colLuokan käyttäminen asettaa sarakkeen leveyden dynaamisesti. Tämä tarkoittaa, että rivin sarakkeiden lukumäärästä riippuen sarakkeen leveys on säiliön leveys jaettuna sarakkeiden määrällä.

Mutta on toinen tapa määrittää sarakkeet. Voit käyttää sarakkeita luokkiin ja määrittää niiden koon.

Oletuksena Bootstrap 4 -ruudukko koostuu 12 sarakkeesta. Sarakkeelle voi valita minkä tahansa koon 1–12. Jos haluat 3 yhtä suurta saraketta, voit käyttää .col-4niitä kullekin (koska 3 * 4 kolikkoa = 12). Tai voit asettaa heille erikokoisia. Tässä on joitain esimerkkejä:

 ... ... ... ... ... ... ... ... 

Näet koodin livenä CodePenissä.

Jos rivisi kolonnien summa ei ole 12, ne eivät täytä koko riviä. Jos sarakkeiden summa ylittää 12, se siirtyy seuraavalle riville. Ensimmäisellä rivillä näkyvät vain ensimmäiset elementit, joiden summa on enintään 12.

Katkaisupisteiden asettaminen sarakkeille

Jos otat yllä olevan esimerkin ja haluat näyttää sen mobiililaitteella, sinulla saattaa olla ongelmia. Viiden sarakkeen näyttäminen mobiililaitteessa tekee sisällöstä luettavissa.

Tässä tulee esiin yksi tehokkaimmista Bootstrap 4 -komponenteista. Jotta eri asettelut olisivat erilaisissa näytöissä, sinun ei tarvitse kirjoittaa mediakyselyjä, vaan voit käyttää sarakkeen katkaisupisteitä.

Katkaisupiste on Bootstrap 4 -muuttuja, joka tarkoittaa näytön tarkkuutta. Kun määrität luokalle katkaisupisteen, käsket luokkaa olemaan aktiivinen vain resoluutioille, jotka ovat vähintään yhtä suuria kuin katkaisupisteen numero.

Yksinkertaisin luokka, josta opimme, on .col-[breakpoint]luokka. Kun käytät tätä luokkaa, määrität sarakkeiden käyttäytymisen vain silloin, kun ne näkyvät laitteissa, joiden resoluutio on vähintään määritetty katkaisupiste. Annettuun katkaisupisteeseen asti sarakkeet kohdistuvat oletusarvoisesti pystysuunnassa. Ja rikkomuspisteen jälkeen ne kohdistuvat vaakasuoraan luokan takia.

Bootstrapissa on 4 katkaisupistettä, joita voit käyttää:

  • .col-sm suuremmille matkapuhelimille (laitteet, joiden resoluutio on ≥ 576px);
  • .col-md tableteille (≥768px);
  • .col-lg kannettaville tietokoneille (≥992px);
  • .col-xl pöytätietokoneille (≥1200px)

Oletetaan, että haluat näyttää kaksi saraketta peräkkäin pystysuunnassa pienillä näytöillä ja samalla rivillä suuremmilla näytöillä. Sinun on määritettävä katkaisupiste, johon sarakkeet menevät samalla rivillä.

Esimerkissämme käytämme .col-lgkatkaisupistettä ja katsomme, kuinka sarakkeet näyttävät eri näytöiltä. Annettua katkaisupistettä (<992px) pienempiä resoluutioita varten sarakkeet näytetään pystysuunnassa. Tämä tarkoittaa, että mobiililaitteilla ja tableteilla sarakkeet näyttävät tältä:

Ja laitteille, joiden resoluutio on suurempi tai yhtä suuri kuin katkaisupiste (≥992px), sarakkeet menevät samalle riville. Tämä tarkoittaa, että kannettavilla tietokoneilla saat tämän tuloksen:

 ... ... 

Näet koodin livenä CodePenissä.Jos avaat Codepenin toisessa ikkunassa ja näet sivun eri tarkkuuksilla, näet sarakkeiden muuttavan niiden sijaintia.

Jos haluat, että 2 saraketta menevät samalla rivillä alkaen käytetyistä suuremmista matkapuhelimista .col-sm, tablet-laitteille .col-mdja erittäin suurille näytöille .col-xl.

Sarakkeiden koon ja taittopisteiden asettaminen

Voit yhdistää koot ja katkaisupisteet ja käyttää yhtä luokkaa muodon kanssa .col-[breakpoint]-[size].

Esimerkiksi, jos haluat, että kolme erikokoista saraketta kohdistuu riville, joka alkaa kannettavan tietokoneen tarkkuudella, sinun on tehtävä tämä:

 ... ... ... 

Saat tämän tuloksen resoluutioilla <992px:

Ja näytöille, jotka ovat ≥992px:

Jälleen kerran näet koodin livenä CodePenissä.

Mutta entä jos haluat näyttää yhden sarakkeen per rivi pienillä mobiilitarkkuuksilla, kaksi saraketta per rivi tableteilla ja neljä sarjoilla kannettavilla tietokoneilla tai laitteilla, joilla on suurempi tarkkuus?

Sitten lisäät useita sarjoja yhteen sarakkeeseen kuvaamaan jokaisen resoluution käyttäytymistä. Useiden luokkien avulla määrität, että sisältö vie kuusi paikkaa tableteilla ja kolme kannettavilla.

 ... ... ... ... 

Tulos näkyy näin tableteilla:

Ja näin kannettavilla tietokoneilla ja suuremmilla tarkkuuksilla:

Tämä esimerkki näkyy myös CodePenissä.

Harjoituksena voit yrittää luoda rivejä, joilla on erilainen sarakemäärä näytön koosta riippuen, ja tarkistaa selainkonsolin toiminta.

Sarakkeiden kuittaus

Jos et halua sarakkeiden olevan vierekkäin, voit käyttää luokkaa .offset-[breakpoint]-[size]yhdessä .col-[breakpoint]-[size].

Tämän luokan käyttö on sama kuin tyhjän sarakkeen lisääminen ennen saraketta. Tässä on yksinkertainen esimerkki:

 ... ... 

Näet koodin livenä CodePenissä.

Voit käyttää luokkaa missä tahansa rivin sarakkeessa. Tässä on muutamia esimerkkejä:

 ... ... ... ... ... 

Pylväiden pesiminen

Tämä voi olla yllätys, mutta voit lisätä rivin sarakkeen sisään!

Kyseinen rivi (jonka emosarakkeen leveys on) jaetaan sitten 12 (pienempään) sarakkeeseen, joihin voit viitata .col-* luokkien kautta .

Katsotaanpa, mitä tapahtuu, kun lisätään uusi rivi sarakkeen sisään:

 ... ... ... ... 

Näet koodin livenä CodePenissä.

Tietäen tämän, voit mennä monella tasolla syvälle järjestääksesi tietojasi. Sarakkeet tarjoavat yksinkertaisen tavan hallita tilaa.

Tämä kerää perustiedot Bootstrap 4 reagoivasta ruudukkojärjestelmästä. Jos sinulla on kysyttävää, ilmoita siitä minulle kommenteissa, vastaan ​​mielelläni.

Lisälukemista

Jos sinulla on enemmän aikaa, tässä on hyödyllisiä resursseja:

  • GetBootstrapin virallinen ruudukkodokumentaatio
  • Video-opas Scrimbalta

Tämä artikkeli julkaistiin alun perin BootstrapBay-blogissa. Se on osa suurempaa Bootstrap 4 -oppaiden sarjaa nimeltä 14 Days of Bootstrap 4. Jos haluat jatkaa Bootstrap 4 -komponenttien oppimista, nämä artikkelit ovat hyvä paikka aloittaa.

Ja jos haluat hypätä aloittamaan kehityksesi Bootstrap-mallilla, voit tutustua markkinapaikkaamme.

Mutta ennen kuin syvennät, ota hetki juhlia äskettäin hankittuja taitojasi !?