Sužinokite „Bootstrap 4 Grid“ sistemą per 10 minučių

„Bootstrap 4“ tinklelio sistema naudojama reaguojantiems išdėstymams.

Interaktyvus išdėstymas rodo, kaip elementai lygiuojasi puslapyje skirtingomis skiriamosiomis raiškomis. Svarbu, kad prieš sužinodami apie bet kurį kitą „Bootstrap 4“ komponentą, suprantate, kaip naudotis tinkleliu, nes bet kokį naudojamą elementą turėsite įdėti kažkur į ekraną.

Pradėkime!

Turinys

  • „Bootstrap 4“ konteineriai
  • Bootstrap 4 eilutės
  • Bootstrap 4 stulpeliai
  • Papildoma literatūra

„Bootstrap 4“ tinklelį sudaro konteineriai, eilutės ir stulpeliai. Mes paimsime juos po vieną ir paaiškinsime.

„Bootstrap 4“ konteineriai

„Bootstrap 4“ konteineris yra klasės elementas .container. Konteineris yra „Bootstrap 4“ tinklelio sistemos šaknis ir jis naudojamas valdyti išdėstymo plotį.

„Bootstrap 4“ talpykloje yra visi puslapio elementai. Tai reiškia, kad jūsų puslapio struktūra turėtų būti tokia: pirmiausia HTML puslapio turinį, jo viduje turėtumėte pridėti sudėtinį rodinį ir visus kitus elementus, esančius sudėtiniame rodinyje.

 ... 

Paprasta .containerklasė nustato išdėstymo plotį, priklausomai nuo ekrano pločio. Turinys dedamas puslapio viduryje, sulygiuojant jį horizontaliai. Tarp „Bootstrap 4“ talpyklos ir kairiojo bei dešiniojo puslapio krašto yra vienoda erdvė.

Į .containersvarstyklės žemyn pločio kaip ekrano plotis siaurėjant ir tampa visą plotį mobili. „Bootstrap 4“ bibliotekoje talpyklos plotis nustatomas kiekvienam ekrano dydžiui. Tikslius dydžius galite pamatyti čia.

Viso pločio konteineris užima 100% ekrano dydžio, neatsižvelgiant į ekrano plotį. Norėdami jį naudoti, turite pridėti klasę. container-fluid.

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

„CodePen“ galite peržiūrėti čia.

Norėdami pamatyti dviejų tipų talpyklų skirtumus, galite atidaryti rašiklį konsolėje ir perjungti ekrano dydžius.

Bootstrap 4 eilutės

„Bootstrap 4“ eilutės yra horizontalios ekrano skiltelės. Jie naudojami tik kaip kolonų pakuotės. Norint juos naudoti, reikia .rowklasės.

 ... 

Čia yra svarbiausi dalykai, kuriuos turite atsiminti apie „Bootstrap 4“ eilutes:

  • Jie naudojami tik stulpeliams laikyti. Jei eilutės viduje kartu su stulpeliais įdėsite kitus elementus, negausite laukiamo rezultato.
  • Jie turi būti dedami į konteinerius. Jei to nepadarysite, savo puslapyje gausite horizontalų slinkimą. Taip atsitinka todėl, kad eilutėse yra neigiamos kairės ir dešinės paraštės - 15. Talpykloje yra 15 taškų paklotai, todėl ji neutralizuoja paraštes.
  • Stulpeliai turi būti eilės vaikai. Priešingu atveju jie nesusilygins. Eilutės ir stulpeliai yra sukurti veikti kartu šioje griežtoje hierarchijoje.

Bootstrap 4 stulpeliai

Dabar galime patekti į gražią šios pamokos dalį - „Bootstrap 4“ stulpelius. Stulpeliai yra puiku! Jie padeda padalyti ekraną horizontaliai.

Jei eilutėje įdėsite vieną stulpelį, jis užims visą plotį. Jei pridėsite du stulpelius, jie kiekvienas paims 1/2 nuo pločio. Taigi tai taikoma bet kokiam stulpelių skaičiui.

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

Kodą galite pamatyti tiesiogiai „CodePen“.

Šoninė pastaba: stulpeliai nėra spalvoti. Aš ką tik pridėjau spalvas, kad aprašymas būtų labiau vizualus, kad jos atrodytų gražiai.

Stulpelių dydžių nustatymas

Naudojant .colklasę dinamiškai nustatomas stulpelio plotis. Tai reiškia, kad atsižvelgiant į stulpelių skaičių eilutėje, stulpelio plotis bus konteinerio plotis, padalytas iš stulpelių skaičiaus.

Tačiau yra dar vienas būdas apibrėžti stulpelius. Stulpeliams galite naudoti klases ir apibrėžti jų dydį.

Pagal numatytuosius nustatymus „Bootstrap 4“ tinklelį sudaro 12 stulpelių. Savo stulpeliui galite pasirinkti bet kokį dydį nuo 1 iki 12. Jei norite 3 vienodų stulpelių, galite naudoti .col-4juos kiekvienam (nes po 3 * 4 stulpelius = 12). Arba galite nustatyti skirtingus jų dydžius. Štai keletas pavyzdžių:

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

Kodą galite pamatyti tiesiogiai „CodePen“.

Jei jūsų eilutėje esančių kolonų suma nesiekia 12, tai jie neužpildo visos eilutės. Jei stulpelių suma viršija 12, ji pereis į kitą eilutę. Pirmoje eilutėje bus rodomi tik pirmieji elementai, kurių suma yra iki 12 ar mažiau.

Stulpelių lūžio taškų nustatymas

Jei pasinaudosite aukščiau pateiktu pavyzdžiu ir norite jį rodyti mobiliajame telefone, gali kilti tam tikrų problemų. Jei mobiliajame telefone bus rodomi penki stulpeliai, turinys bus neįskaitomas.

Čia atsiranda vienas iš galingiausių „Bootstrap 4“ komponentų. Kad skirtinguose ekranuose būtų skirtingi išdėstymai, nereikės rašyti medijos užklausų, o galite naudoti stulpelių lūžio taškus.

Lūžio taškas yra „Bootstrap 4“ kintamasis, reiškiantis ekrano skiriamąją gebą. Nurodydami klasės pertraukos tašką, jūs sakote, kad klasė turi būti aktyvi tik toms rezoliucijoms, kurios yra bent jau tokios pat didelės kaip skaičius, kurį turi lūžio taškas.

Paprasčiausia klasė, kurią sužinosime, yra .col-[breakpoint]klasė. Kai naudojate šią klasę, stulpelių elgesį apibrėžiate tik tada, kai jie rodomi įrenginiuose, kurių skiriamoji geba yra bent jau apibrėžta lūžio taško. Pagal numatytą lūžio tašką stulpeliai pagal numatytuosius nustatymus bus sulygiuojami vertikaliai. Po jūsų lūžio taško jie susilygins horizontaliai dėl klasės.

„Bootstrap“ turi 4 lūžio taškus, kuriuos galite naudoti:

  • .col-sm didesniems mobiliesiems telefonams (įrenginiams, kurių skiriamoji geba ≥ 576 piks.);
  • .col-md tabletėms (≥768px);
  • .col-lg nešiojamiesiems kompiuteriams (≥992px);
  • .col-xl staliniams kompiuteriams (≥1200px)

Tarkime, kad norite rodyti du stulpelius vienas po kito vertikaliai mažuose ekranuose ir toje pačioje eilutėje didesniuose ekranuose. Turėsite nurodyti lūžio tašką, kur stulpeliai eina ta pačia linija.

Mūsų pavyzdyje naudosime .col-lglūžio tašką ir pamatysime, kaip stulpeliai atrodo skirtinguose ekranuose. Jei skiriamoji geba yra mažesnė už nurodytą lūžio tašką (<992 taškų), stulpeliai bus rodomi vertikaliai. Tai reiškia, kad mobiliuosiuose įrenginiuose ir planšetiniuose kompiuteriuose stulpeliai atrodys taip:

Įrenginių, kurių skiriamoji geba yra didesnė arba lygi lūžio taškui (≥992px), stulpeliai eis į tą pačią eilutę. Tai reiškia, kad nešiojamiesiems ir staliniams kompiuteriams gausite šį rezultatą:

 ... ... 

Kodą galite pamatyti tiesiogiai „CodePen“.Jei atidarysite „Codepen“ kitame lange ir pamatysite skirtingos skiriamosios gebos puslapį, pamatysite, kad stulpeliai keičia jų padėtį.

Jei norite, kad 2 stulpeliai eitų ta pačia linija, pradedant didesniais mobiliaisiais telefonais, kuriuos naudotumėte .col-sm, planšetiniams kompiuteriams .col-mdir ypač dideliems ekranams .col-xl.

Stulpelių dydžių ir lūžio taškų nustatymas

Galite derinti dydžius ir lūžio taškus bei naudoti vieną klasę su formatu .col-[breakpoint]-[size].

Pvz., Jei norite, kad trys skirtingo dydžio stulpeliai susilygintų eilėje, pradedant nešiojamojo kompiuterio skiriamąja geba, turite tai padaryti:

 ... ... ... 

Šį rezultatą gausite, kai skiriamoji geba yra <992px:

Jei ekranas yra ≥992px:

Vėlgi, jūs galite pamatyti kodą tiesiogiai „CodePen“.

Bet ką daryti, jei norite rodyti po vieną stulpelį vienoje eilutėje mažomis skiriamosiomis gebomis mobiliesiems, du stulpelius kiekvienoje eilutėje planšetiniuose kompiuteriuose ir keturis - nešiojamuosiuose kompiuteriuose ar didesnės skiriamosios gebos įrenginiuose?

Tada prie vieno stulpelio pridedate kelias klases, kad apibūdintumėte kiekvienos skiriamosios gebos elgseną. Naudodami kelias klases nurodote, kad turinys užims šešis lizdus planšetiniuose kompiuteriuose ir tris nešiojamuosiuose.

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

Rezultatas bus rodomas taip planšetiniuose kompiuteriuose:

Ir šitaip nešiojamuosiuose kompiuteriuose ir didesnėje skiriamojoje geboje:

Šis pavyzdys taip pat yra „CodePen“.

Kaip pratimą, galite pabandyti sukurti eilučių su skirtingu stulpelių skaičiumi, priklausomai nuo ekrano dydžio, ir patikrinti savo elgesį naršyklės konsolėje.

Stulpelių užskaita

Jei nenorite, kad stulpeliai būtų vienas šalia kito, galite naudoti klasę .offset-[breakpoint]-[size]kartu su .col-[breakpoint]-[size].

Šios klasės naudojimas yra tas pats, kas tuščio stulpelio pridėjimas prieš stulpelį. Štai paprastas pavyzdys:

 ... ... 

Kodą galite pamatyti tiesiogiai „CodePen“.

Klasę galite naudoti bet kuriame eilutės stulpelyje. Štai keletas pavyzdžių:

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

Lizdinės kolonos

Tai gali nustebinti, tačiau stulpelio viduje galite pridėti eilutę!

Atitinkama eilutė (kurios pagrindinio stulpelio plotis bus) bus padalyta į 12 (mažesnių) stulpelių, į kuriuos galite kreiptis per .col-* klases.

Pažvelkime, kas nutinka, kai įterpiame naują eilutę stulpelio viduje:

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

Kodą galite pamatyti tiesiogiai „CodePen“.

Tai žinodami galite pereiti daug lygių, kad sutvarkytumėte savo informaciją. Stulpeliai suteiks paprastą būdą valdyti savo erdvę.

Tai sukaupia pagrindines žinias apie „Bootstrap 4“ reaguojančią tinklelio sistemą. Jei turite klausimų, praneškite man komentaruose, mielai atsakysiu.

Papildoma literatūra

Jei turite daugiau laiko, pateikiame keletą naudingų šaltinių:

  • Oficiali „GetBootstrap“ tinklelio dokumentacija
  • Vaizdo pamoka iš „Scrimba“

Šis straipsnis iš pradžių buvo paskelbtas „BootstrapBay“ tinklaraštyje. Tai yra didesnės „Bootstrap 4“ mokymo programos, vadinamos „14 dienų„ Bootstrap 4 “, dalimi. Jei norite toliau mokytis apie„ Bootstrap 4 “komponentus, šie straipsniai yra gera vieta pradėti.

Ir jei norite pradėti savo kūrimą, naudokite „Bootstrap“ šabloną, galite apsilankyti mūsų rinkoje.

Bet prieš gilindamiesi, skirkite šiek tiek laiko švęsti savo naujai įgytus įgūdžius !?