Uzziniet Bootstrap 4 režģa sistēmu 10 minūtēs

Bootstrap 4 režģa sistēma tiek izmantota atsaucīgiem izkārtojumiem.

Reaģējošs izkārtojums parāda veidu, kā elementi izlīdzinās lapā dažādās izšķirtspējās. Pirms uzzināt par jebkuru citu Bootstrap 4 komponentu, ir svarīgi saprast, kā izmantot režģi, jo neatkarīgi no izmantotā elementa tas būs jānovieto kaut kur uz ekrāna.

Sāksim!

Satura rādītājs

  • Bootstrap 4 konteineri
  • Bootstrap 4 rindas
  • Bootstrap 4 kolonnas
  • Papildu lasīšana

Bootstrap 4 režģis sastāv no konteineriem, rindām un kolonnām. Mēs paņemsim tos pa vienam un paskaidrosim.

Bootstrap 4 konteineri

Bootstrap 4 konteiners ir klases elements .container. Konteiners ir Bootstrap 4 režģa sistēmas sakne, un to izmanto, lai kontrolētu izkārtojuma platumu.

Bootstrap 4 konteinerā ir visi lapas elementi. Tas nozīmē, ka jūsu lapai jābūt šādai struktūrai: vispirms HTML lapas pamatteksts, tā iekšpusē jāpievieno konteiners un visi pārējie konteinera iekšpusē esošie elementi.

 ... 

Vienkāršā .containerklase nosaka izkārtojuma platumu atkarībā no ekrāna platuma. Tas ievieto saturu lapas vidū, izlīdzinot to horizontāli. Starp Bootstrap 4 konteineru un lapas kreiso un labo malu ir vienāda vieta.

Kad .containerekrāna platums samazinās un mobilajā ierīcē kļūst par pilnu platumu, tas samazinās platumā. Konteinera platums ir noteikts Bootstrap 4 bibliotēkas iekšienē katram ekrāna izmēram. Precīzus izmērus varat redzēt šeit.

Pilna platuma konteiners aizņem 100% no ekrāna izmēra neatkarīgi no ekrāna platuma. Lai to izmantotu, jums jāpievieno klase. container-fluid.

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

Jūs varat apskatīt CodePen šeit.

Lai redzētu atšķirības starp divu veidu konteineriem, varat konsolē atvērt pildspalvu un pārslēgties starp ekrāna izmēriem.

Bootstrap 4 rindas

Bootstrap 4 rindas ir horizontālas ekrāna šķēles. Tos izmanto tikai kā kolonnu ietinējus. Lai tos izmantotu, nepieciešama .rowklase.

 ... 

Šeit ir vissvarīgākās lietas, kas jums jāatceras par Bootstrap 4 rindām:

  • Tos izmanto tikai kolonnu saturēšanai. Ja jūs ievietojat citus elementus rindas iekšpusē kopā ar kolonnām, jūs nesaņemsit gaidīto rezultātu.
  • Tie ir jāievieto konteineros. Ja jūs to nedarīsit, jūs savā lapā iegūsit horizontālu ritināšanu. Tas notiek tāpēc, ka rindām ir negatīva kreisā un labā maliņa 15. Konteineram ir 15 pikseļu polsterējumi, tāpēc tas neitralizē malas.
  • Kolonnām jābūt rindas bērniem. Pretējā gadījumā tie netiks izlīdzināti. Rindas un kolonnas ir izveidotas, lai darbotos kopā šajā stingrajā hierarhijā.

Bootstrap 4 kolonnas

Tagad mēs varam nokļūt šīs apmācības jaukajā daļā, Bootstrap 4 kolonnās. Kolonnas ir lieliskas! Tie palīdz sadalīt ekrānu horizontāli.

Ja savā rindā ievietojat vienu kolonnu, tā aizņems visu platumu. Ja pievienojat divas kolonnas, katra no tām aizņem 1/2 no platuma. Un tā tas attiecas uz jebkuru kolonnu skaitu.

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

Jūs varat redzēt kodu tiešsaistē vietnē CodePen.

Sānu piezīme: kolonnas nav krāsainas. Es tikko pievienoju krāsas vizuāli pievilcīgākam aprakstam / tāpēc tās izskatās diezgan.

Kolonnu izmēru iestatīšana

Izmantojot .colklasi, dinamiski tiek iestatīts kolonnas platums. Tas nozīmē, ka atkarībā no kolonnu skaita rindā kolonnas platums būs konteinera platums dalīts ar kolonnu skaitu.

Bet ir vēl viens veids, kā definēt kolonnas. Kolonnām varat izmantot klases un definēt to lielumu.

Pēc noklusējuma režģis Bootstrap 4 sastāv no 12 kolonnām. Kolonnai varat izvēlēties jebkuru lielumu no 1 līdz 12. Ja vēlaties 3 vienādas kolonnas, varat izmantot .col-4katrai no tām (jo 3 * 4 kolonnas = 12). Vai arī jūs varat viņiem iestatīt dažādus izmērus. Šeit ir daži piemēri:

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

Jūs varat redzēt kodu tiešsaistē vietnē CodePen.

Ja jūsu rindā esošo kolonnu summa nesasniedz 12, tad tās neaizpilda visu rindu. Ja kolonnu summa pārsniedz 12, tā pāriet uz nākamo rindu. Pirmajā rindā tiks parādīti tikai pirmie elementi, kuru summa ir līdz 12 vai mazāka.

Pārtraukumu punktu iestatīšana kolonnām

Ja izmantojat iepriekš minēto piemēru un vēlaties to parādīt mobilajā ierīcē, var rasties dažas problēmas. Piecu sleju parādīšana mobilajā ierīcē padarīs saturu nelasāmu.

Šeit tiek parādīts viens no jaudīgākajiem Bootstrap 4 komponentiem. Lai dažādos ekrānos būtu dažādi izkārtojumi, jums nebūs jāraksta multivides vaicājumi, tā vietā varat izmantot kolonnu pārtraukuma punktus.

Lūzuma punkts ir mainīgais Bootstrap 4, kas nozīmē ekrāna izšķirtspēju. Norādot klases pārtraukuma punktu, jūs sakāt, ka klasei jābūt aktīvai tikai attiecībā uz izšķirtspējām, kas ir vismaz tikpat lielas kā skaitlis, kas atrodas pārtraukuma punktā.

Vienkāršākā klase, par kuru mēs uzzināsim, ir .col-[breakpoint]klase. Izmantojot šo klasi, kolonnu darbība tiek definēta tikai tad, kad tās tiek rādītas ierīcēs, kuru izšķirtspēja ir vismaz noteiktā pārtraukuma punkts. Līdz norādītajam pārtraukuma punktam jūsu kolonnas pēc noklusējuma tiks izlīdzinātas vertikāli. Un pēc jūsu pārtraukuma klases viņi izlīdzināsies horizontāli.

Bootstrap ir 4 pārtraukuma punkti, kurus varat izmantot:

  • .col-sm lielākiem mobilajiem tālruņiem (ierīcēm ar izšķirtspēju ≥ 576px);
  • .col-md tabletēm (≥768px);
  • .col-lg klēpjdatoriem (≥992px);
  • .col-xl galddatoriem (≥1200px)

Pieņemsim, ka vēlaties uz ekrāniem divas kolonnas vertikāli parādīt mazos ekrānos un uz vienas līnijas uz lielākiem ekrāniem. Jums būs jānorāda pārtraukuma punkts, kur kolonnas iet vienā un tajā pašā līnijā.

Šajā piemērā mēs izmantosim .col-lgpārtraukuma punktu un redzēsim, kā kolonnas izskatās dažādos ekrānos. Izšķirtspējām, kas ir zemākas par doto pārtraukuma punktu (<992px), kolonnas tiks rādītas vertikāli. Tas nozīmē, ka mobilajās ierīcēs un planšetdatoros kolonnas izskatīsies šādi:

Ierīcēm, kuru izšķirtspēja ir lielāka vai vienāda ar pārtraukuma punktu (≥992px), kolonnas tiks ieturētas vienā rindā. Tas nozīmē, ka klēpjdatoros un galddatoros jūs iegūsiet šādu rezultātu:

 ... ... 

Jūs varat redzēt kodu tiešsaistē vietnē CodePen.Ja atverat Codepen citā logā un redzat lapu ar atšķirīgu izšķirtspēju, redzēsiet, ka kolonnas mainīs to izvietojumu.

Ja vēlaties, lai 2 kolonnas būtu vienā rindā, sākot ar lielākiem mobilajiem tālruņiem, kurus izmantojat .col-sm, planšetdatoriem .col-mdun īpaši lieliem ekrāniem .col-xl.

Kolonnu izmēru un pārtraukuma punktu iestatīšana

Jūs varat apvienot izmērus un pārtraukuma punktus un izmantot vienu klasi ar formātu .col-[breakpoint]-[size].

Piemēram, ja vēlaties, lai trīs dažāda lieluma kolonnas tiktu izlīdzinātas rindā, sākot ar klēpjdatora izšķirtspēju, jums tas jādara:

 ... ... ... 

Jūs iegūsiet šo rezultātu ar izšķirtspēju <992px:

Ja ekrāniem ir ≥992px:

Atkal jūs varat redzēt kodu tiešsaistē vietnē CodePen.

Bet ko tad, ja vēlaties parādīt vienu kolonnu vienā rindā ar mazām mobilajām ierīcēm paredzētajām izšķirtspējām, divas kolonnas vienā rindā planšetdatoros un četras - klēpjdatoros vai ierīcēs ar augstāku izšķirtspēju?

Tad jūs pievienojat vairākas klases vienai kolonnai, lai aprakstītu katras izšķirtspējas darbību. Izmantojot vairākas klases, jūs norādāt, ka saturam būs nepieciešamas sešas vietas planšetdatoros un trīs klēpjdatoros.

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

Rezultāts planšetdatoros tiks parādīts šādi:

Šādi klēpjdatoros un augstākās izšķirtspējās:

Šis piemērs ir pieejams arī vietnē CodePen.

Veicot vingrinājumu, varat mēģināt izveidot rindas ar dažādu kolonnu skaitu atkarībā no ekrāna izmēra un pārbaudīt darbību pārlūkprogrammas konsolē.

Kolonnu ieskaite

Ja nevēlaties, lai slejas atrastos blakus, klasi varat izmantot .offset-[breakpoint]-[size]kopā ar .col-[breakpoint]-[size].

Šīs klases izmantošana ir tāda pati kā tukšas kolonnas pievienošana pirms kolonnas. Šeit ir vienkāršs piemērs:

 ... ... 

Jūs varat redzēt kodu tiešsaistē vietnē CodePen.

Klasi var izmantot jebkurā rindas kolonnā. Šeit ir vēl daži piemēri:

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

Ligzdošanas kolonnas

Tas var būt pārsteigums, bet kolonnas iekšpusē varat pievienot rindu!

Attiecīgā rinda (kuras pamatkolonas platums būs) pēc tam tiks sadalīta 12 (mazākās) kolonnās, uz kurām jūs varat atsaukties, izmantojot .col-* klases.

Apskatīsim, kas notiek, kolonnas iekšpusē ievietojot jaunu rindu:

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

Jūs varat redzēt kodu tiešsaistē vietnē CodePen.

Zinot to, varat kārtot informāciju daudzos līmeņos. Kolonnas sniegs vienkāršu veidu, kā pārvaldīt savu vietu.

Tas apkopo pamatzināšanas par Bootstrap 4 atsaucīgo režģu sistēmu. Ja jums ir jautājumi, lūdzu, informējiet mani komentāros, es labprāt atbildēšu.

Papildu lasīšana

Ja jums ir vairāk laika, šeit ir daži noderīgi resursi:

  • Oficiālā tīkla dokumentācija no GetBootstrap
  • Video apmācība no Scrimba

Šis raksts sākotnēji tika ievietots BootstrapBay emuārā. Tā ir daļa no lielākas Bootstrap 4 apmācību sērijas ar nosaukumu 14 Bootstrap 4 dienas. Ja vēlaties turpināt uzzināt par Bootstrap 4 komponentiem, šie raksti ir piemērota vieta, kur sākt.

Un, ja vēlaties sākt savu attīstību, izmantojot Bootstrap veidni, varat apskatīt mūsu tirgu.

Bet, pirms iedziļināties, veltiet mirkli, lai atzīmētu savas jauniegūtās prasmes !?