Naučite Bootstrap 4 Grid System u 10 minuta

Sustav rešetke Bootstrap 4 koristi se za prilagodljive izglede.

Prilagodljivi izgled predstavlja način poravnavanja elemenata na stranici u različitim razlučivostima. Važno je da razumijete kako koristiti mrežu prije nego što naučite o bilo kojoj drugoj komponenti Bootstrap 4, jer koji god element da koristite, morat ćete ga smjestiti negdje na zaslon.

Započnimo!

Sadržaj

  • Bootstrap 4 spremnici
  • Bootstrap 4 reda
  • Bootstrap 4 stupca
  • Daljnje čitanje

Rešetka Bootstrap 4 sastoji se od spremnika, redaka i stupaca. Uzet ćemo ih jednog po jednog i objasniti im.

Bootstrap 4 spremnici

Spremnik Bootstrap 4 element je s klasom .container. Spremnik je korijen mrežnog sustava Bootstrap 4 i koristi se za kontrolu širine izgleda.

Spremnik Bootstrap 4 sadrži sve elemente na stranici. To znači da bi vaša stranica trebala imati sljedeću strukturu: prvo tijelo HTML stranice, unutar nje biste trebali dodati spremnik i sve ostale elemente unutar spremnika.

 ... 

Jednostavna .containerklasa postavlja širinu izgleda ovisno o širini zaslona. Sadržaj postavlja na sredinu stranice poravnavajući ga vodoravno. Između spremnika Bootstrap 4 i lijevog i desnog ruba stranice postoji jednak prostor.

U .containervaga dolje u širinu kao zaslon širina sužava i postaje pune širine na mobitelu. Širina spremnika definirana je unutar knjižnice Bootstrap 4 za svaku veličinu zaslona. Točne veličine možete vidjeti ovdje.

Spremnik pune širine zauzima 100% veličine zaslona bez obzira na širinu zaslona. Da biste ga koristili, morate dodati razred. container-fluid.

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

CodePen možete pogledati ovdje.

Da biste vidjeli razlike između dvije vrste spremnika, možete otvoriti olovku na konzoli i prebacivati ​​se između veličina zaslona.

Bootstrap 4 reda

Bootstrap 4 retka vodoravne su kriške zaslona. Koriste se samo kao omoti za stupce. Da biste ih koristili, potreban vam je .rowrazred.

 ... 

Evo najvažnijih stvari koje morate imati na umu o Bootstrap 4 redovima:

  • Koriste se samo za sadržavanje stupaca. Ako unutar reda smjestite druge elemente zajedno sa stupcima, nećete dobiti očekivani rezultat.
  • Moraju se staviti u kontejnere. Ako to ne učinite, dobit ćete vodoravni pomak na vašoj stranici. To se događa jer retci imaju negativne lijeve i desne margine od 15. Spremnik ima uloške od 15 piksela, tako da se suprotstavlja marginama.
  • Stupci moraju biti djeca reda. Inače se neće poravnati. Redovi i stupci stvoreni su za zajednički rad u ovoj strogoj hijerarhiji.

Bootstrap 4 stupca

Sada možemo doći do lijepog dijela ovog vodiča, stupaca Bootstrap 4. Kolone su sjajne! Oni vam pomažu da vodoravno podijelite zaslon.

Ako u svoj red postavite jedan stupac, on će zauzeti svu širinu. Ako dodate dva stupca, svaki će zauzimati 1/2 širine. I to vrijedi za bilo koji broj stupaca.

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

Kôd možete vidjeti uživo na CodePenu.

Napomena: Stupci nisu obojeni. Upravo sam dodala boje za vizualno uvjerljiviji opis / tako da izgledaju lijepo.

Postavljanje veličina za stupce

Korištenje .colklase dinamički postavlja širinu stupca. To znači da će, ovisno o broju stupaca u redu, širina stupca biti širina spremnika podijeljena s brojem stupaca.

Ali postoji drugi način definiranja stupaca. Za stupce možete koristiti klase i definirati njihovu veličinu.

Prema zadanim postavkama mreža Bootstrap 4 sastoji se od 12 stupaca. Za stupac možete odabrati bilo koju veličinu od 1 do 12. Ako želite 3 jednaka stupca, možete koristiti .col-4za svaki (jer su 3 * 4 stupca svaki = 12). Ili im možete postaviti različite veličine. Evo nekoliko primjera:

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

Kôd možete vidjeti uživo na CodePenu.

Ako zbroj stupaca u vašem retku ne dosegne 12, oni ne ispunjavaju cijeli redak. Ako zbroj stupaca prijeđe 12, preći će na sljedeći redak. U prvom retku prikazivat će se samo prvi elementi koji dodaju do 12 ili manje.

Postavljanje točaka prijelaza za stupce

Ako uzmete gornji primjer i želite ga prikazati na mobitelu, mogli biste naići na neke probleme. Prikazivanje pet stupaca na mobilnom uređaju učinit će sadržaj nečitkim.

Tu dolazi do izražaja jedna od najsnažnijih komponenata Bootstrap 4. Da biste imali različite izglede na različitim zaslonima, nećete trebati pisati medijske upite, umjesto toga možete koristiti točke prijeloma stupaca.

Točka prijeloma je varijabla Bootstrap 4 koja označava razlučivost zaslona. Kada specificirate točku prekida za klasu, poručujete klasi da bude aktivna samo za razlučivosti koje su najmanje toliko velike kao broj koji ima točka prekida.

Najjednostavniji razred o kojem ćemo naučiti je .col-[breakpoint]razred. Kada koristite ovu klasu, definirate ponašanje stupaca samo kada su prikazani na uređajima koji imaju razlučivost barem definirane točke prekida. Do zadane točke prekida, stupci će se prema zadanim postavkama poravnati vertikalno. A nakon vaše točke prijeloma, poravnat će se vodoravno zbog klase.

Bootstrap ima 4 točke prekida koje možete koristiti:

  • .col-sm za veće mobilne telefone (uređaji s rezolucijama ≥ 576px);
  • .col-md za tablete (≥768px);
  • .col-lg za prijenosna računala (≥992 px);
  • .col-xl za radne površine (≥1200px)

Recimo da želite prikazati dva stupca jedan za drugim vertikalno na malim zaslonima i u istoj liniji na većim zaslonima. Morat ćete odrediti točku prekida gdje stupci idu u istoj liniji.

U našem ćemo primjeru upotrijebiti .col-lgtočku prekida i vidjeti kako stupci izgledaju na različitim zaslonima. Za razlučivosti niže od zadane točke prekida (<992px) stupci će se prikazivati ​​okomito. To znači da će na mobilnim uređajima i tabletima stupci izgledati ovako:

A za uređaje koji imaju razlučivost veću ili jednaku točki prekida (≥992px) stupci će ići u isti redak. To znači da ćete na prijenosnim i stolnim računalima dobiti ovaj rezultat:

 ... ... 

Kôd možete vidjeti uživo na CodePenu.Ako otvorite Codepen u drugom prozoru i vidite stranicu u različitim rezolucijama, vidjet ćete kako stupci mijenjaju svoje pozicioniranje.

Ako želite da 2 stupca idu u istoj liniji, počevši od većih mobilnih telefona koje biste koristili .col-sm, za tablete .col-mdi za izuzetno velike zaslone .col-xl.

Postavljanje veličina i prijelaza za stupce

Možete kombinirati veličine i točke prekida i koristiti jednu klasu s formatom .col-[breakpoint]-[size].

Na primjer, ako želite da se tri stupca različitih veličina poravnaju u redu počevši od razlučivosti prijenosnog računala, morate to učiniti:

 ... ... ... 

Ovaj rezultat dobit ćete na rezolucijama <992px:

A za zaslone veličine ≥992px:

Opet, kod možete vidjeti uživo na CodePenu.

Ali što ako želite prikazati jedan stupac po retku na malim mobilnim razlučivostima, dva stupca po retku na tabletima i četiri na prijenosnim računalima ili uređajima s višim razlučivostima?

Zatim dodate više klasa za jedan stupac da biste opisali ponašanje svake rezolucije. Korištenjem više klasa odredite da će sadržaj zauzimati šest mjesta na tabletima i tri na prijenosnim računalima.

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

Rezultat će se ovako prikazati na tabletama:

I ovako na prijenosnim računalima i većim rezolucijama:

Ovaj je primjer također uživo na CodePenu.

Kao vježbu možete pokušati stvoriti retke s različitim brojem stupaca ovisno o veličini zaslona i provjeriti ponašanje u konzoli preglednika.

Prebijanje stupaca

Ako ne želite da vaši stupci budu jedan pored drugog, možete upotrijebiti razred .offset-[breakpoint]-[size]zajedno s .col-[breakpoint]-[size].

Korištenje ove klase isto je što i dodavanje praznog stupca prije stupca. Evo jednostavnog primjera:

 ... ... 

Kôd možete vidjeti uživo na CodePenu.

Predmet možete koristiti na bilo kojem stupcu u retku. Evo još nekoliko primjera:

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

Gniježđenje stupaca

To može iznenaditi, ali možete dodati redak unutar stupca!

Dotični redak (koji će imati širinu nadređenog stupca) tada će biti podijeljen u 12 (manjih) stupaca koje možete uputiti kroz .col-* klase.

Pogledajmo što se događa kada umetnemo novi redak u stupac:

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

Kôd možete vidjeti uživo na CodePenu.

Znajući to, možete ići na mnogo razina kako biste organizirali svoje podatke. Stupci će vam pružiti jednostavan način upravljanja prostorom.

Ovim se završava osnovno znanje o sustavu mrežnih reakcija Bootstrap 4. Ako imate pitanja, javite mi u komentarima, rado ću odgovoriti.

Daljnje čitanje

Ako imate više vremena, evo nekoliko korisnih resursa:

  • Službena mrežna dokumentacija s GetBootstrapa
  • Video vodič iz Scrimbe

Ovaj je članak prvotno objavljen na blogu BootstrapBay. Dio je veće serije tutorijala za Bootstrap 4 pod nazivom 14 dana Bootstrapa 4. Ako želite nastaviti učiti o komponentama Bootstrap 4, ovi su članci dobro mjesto za početak.

A ako želite započeti razvoj s predloškom Bootstrap, možete provjeriti naše tržište.

Ali prije nego što dublje zađete, odvojite trenutak da proslavite svoje novostečene vještine !?