Õppige Bootstrap 4 Grid süsteemi 10 minutiga

Bootstrap 4 Grid süsteemi kasutatakse tundlike paigutuste jaoks.

Tundlik paigutus tähistab seda, kuidas elemendid joonduvad lehel erineva eraldusvõimega. Enne kui saate teada Bootstrap 4 muudest komponentidest, on oluline, et teaksite, kuidas võrku kasutada, sest ükskõik millist elementi kasutate, peate selle paigutama kuhugi ekraanile.

Alustame!

Sisukord

  • Bootstrap 4 konteinerid
  • Bootstrap 4 rida
  • Bootstrap 4 veergu
  • Lisalugemist

Võrk Bootstrap 4 koosneb konteineritest, ridadest ja veergudest. Võtame need ükshaaval ja selgitame.

Bootstrap 4 konteinerid

Bootstrap 4 konteiner on klassiga element .container. Konteiner on võrgusüsteemi Bootstrap 4 juur ja seda kasutatakse paigutuse laiuse kontrollimiseks.

Konteiner Bootstrap 4 sisaldab kõiki lehe elemente. See tähendab, et teie lehel peaks olema järgmine struktuur: kõigepealt HTML-lehe keha, selle sisse peaksite lisama konteineri ja kõik muud elemendid konteineri sees.

 ... 

Lihtne .containerklassi määrab laius paigutus sõltuvalt ekraani laiusest. See asetab sisu lehe keskele, joondades selle horisontaalselt. Bootstrap 4 konteineri ning lehe vasaku ja parema serva vahel on võrdne ruum.

Kui .containerekraanilaius kitseneb ja muutub mobiilseadmes täislaiuseks, vähendatakse laiust. Konteineri laius määratakse Bootstrap 4 teegi sees iga ekraanisuuruse jaoks. Täpseid suurusi näete siit.

Täislaiuses konteiner võtab 100% ekraani suurusest olenemata ekraani laiusest. Selle kasutamiseks peate lisama klassi. container-fluid.

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

CodePenit saate vaadata siit.

Kahe tüüpi konteinerite erinevuste nägemiseks võite konsoolis avada pliiatsi ja vahetada ekraani suuruse vahel.

Bootstrap 4 rida

Bootstrap 4 rida on ekraani horisontaalsed viilud. Neid kasutatakse ainult veergude ümbristena. Nende kasutamiseks on vaja .rowklassi.

 ... 

Siin on kõige olulisemad asjad, mida peate Bootstrap 4 rida meeles pidama:

  • Neid kasutatakse ainult veergude hoidmiseks. Kui asetate rea sisse koos veergudega muid elemente, ei saa te oodatud tulemust.
  • Need tuleb panna anumatesse. Kui te seda ei tee, saate oma lehel horisontaalse kerimise. See juhtub seetõttu, et ridadel on negatiivne vasak ja parem veeriserv 15. Konteineril on 15px padjad, nii et see neutraliseerib veerised.
  • Veerud peavad olema rea ​​lapsed. Vastasel juhul ei joondu. Ridad ja veerud on loodud selles ranges hierarhias koos töötamiseks.

Bootstrap 4 veergu

Nüüd jõuame selle õpetuse kena osani, veergudeni Bootstrap 4. Veergud on suurepärased! Need aitavad teil ekraani horisontaalselt jagada.

Kui asetate ritta ühe veeru, võtab see kogu laiuse. Kui lisate kaks veergu, võtavad need mõlemad laiusest 1/2. Ja nii see käib suvalise arvu veergude kohta.

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

Näete koodi reaalajas CodePenil.

Kõrvalmärkus: veerud pole värvilised. Lisasin värvid visuaalselt veenvamaks kirjelduseks / et need näeksid ilusad välja.

Veergude suuruste määramine

Kasutades .colklassi komplektid laiusesse kolonni dünaamiliselt. See tähendab, et olenevalt rea veergude arvust jagatakse veeru laiuseks konteineri laius veergude arvuga.

Kuid veergude määratlemiseks on veel üks viis. Klasside jaoks saate kasutada veerge ja määratleda nende suuruse.

Vaikimisi koosneb võrk Bootstrap 4 12 veerust. Veergu saate valida ükskõik millise suuruse vahemikus 1–12. Kui soovite 3 võrdset veergu, saate neid kasutada .col-4iga veeru jaoks (kuna 3 * 4 veergu = 12). Või saate neile erineva suuruse määrata. siin on mõned näidised:

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

Näete koodi reaalajas CodePenil.

Kui teie rea koolituste summa ei jõua 12-ni, ei täida need tervet rida. Kui veergude summa ületab 12, liigub see järgmisele reale. Esimesel real kuvatakse ainult esimesed elemendid, mille summa on kuni 12.

Murdepunktide määramine veergude jaoks

Kui võtate ülaltoodud näite ja soovite seda mobiilseadmes kuvada, võib teil tekkida probleeme. Viie veeru kuvamine mobiilseadmes muudab sisu loetamatuks.

Siin tuleb mängu üks võimsamaid Bootstrap 4 komponente. Erinevatel ekraanidel erineva paigutuse saamiseks ei pea meediapäringuid kirjutama, vaid võite kasutada veergude katkestuspunkte.

Murdepunkt on Bootstrap 4 muutuja, mis tähistab ekraani eraldusvõimet. Kui määrate klassi katkestuspunkti, ütlete klassile, et see oleks aktiivne ainult resolutsioonide puhul, mis on vähemalt sama suured kui katkestuspunktis olev arv.

Lihtsaim klass, mille saame teada, on .col-[breakpoint]klass. Selle klassi kasutamisel määratlete veergude käitumise ainult siis, kui neid kuvatakse seadmetes, mille eraldusvõime on vähemalt määratletud murdepunkt. Kuni antud murdepunktini joondatakse teie veerud vaikimisi vertikaalselt. Ja pärast teie murdepunkti joondavad nad klassi tõttu horisontaalselt.

Bootstrapil on 4 murdepunkti, mida saate kasutada:

  • .col-sm suuremate mobiiltelefonide jaoks (seadmed eraldusvõimega ≥ 576 pikslit);
  • .col-md tablettide jaoks (≥768px);
  • .col-lg sülearvutite jaoks (≥992px);
  • .col-xl lauaarvutite jaoks (≥1200px)

Oletame, et soovite kuvada kaks veergu üksteise järel vertikaalselt väikestel ekraanidel ja samal real suurematel ekraanidel. Peate määrama murdepunkti, kuhu veerud lähevad samal real.

Meie näites kasutame .col-lgmurdepunkti ja näeme, kuidas veerud erinevatel ekraanidel välja näevad. Lahutusvõime korral, mis on madalam kui antud murdepunkt (<992px), kuvatakse veerge vertikaalselt. See tähendab, et mobiilseadmetes ja tahvelarvutites näevad veerud välja järgmised:

Ja seadmete puhul, mille eraldusvõime on kõrgem või võrdne murdepunktiga (≥992px), lähevad veerud samale reale. See tähendab, et sülearvutitel ja lauaarvutitel saate selle tulemuse:

 ... ... 

Näete koodi reaalajas CodePenil.Kui avate Codepeni teises aknas ja näete lehte erineva eraldusvõimega, näete, et veerud muudavad nende positsiooni.

Kui soovite, et kaks veergu läheksid samale reale, alustades kasutatavatest suurematest mobiiltelefonidest .col-sm, tahvelarvutite .col-mdja eriti suurte ekraanide jaoks .col-xl.

Veergude suuruste ja murdepunktide määramine

Võite ühendada suurused ja murdepunktid ning kasutada vorminguga ühte klassi .col-[breakpoint]-[size].

Näiteks kui soovite, et kolm erineva suurusega veergu joonduksid real, alustades sülearvuti eraldusvõimega, peate seda tegema:

 ... ... ... 

Selle tulemuse saate resolutsioonidega <992px:

Ja ekraanide puhul, mille suurus on ≥992 pikslit:

Jällegi näete koodi reaalajas CodePenil.

Aga mis siis, kui soovite kuvada ühe veeru rea kohta väikeste mobiiliresolutsioonide korral, kaks veergu rea kohta tahvelarvutites ja neli sülearvutites või suurema eraldusvõimega seadmetes?

Seejärel lisate ühe veeru jaoks mitu klassi, et kirjeldada iga resolutsiooni käitumist. Mitme klassi kasutamisel määrate, et sisu võtab tahvelarvutites kuus ja sülearvutites kolme pesa.

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

Tulemus kuvatakse tahvelarvutites järgmiselt:

Ja nii sülearvutitel ja kõrgema eraldusvõimega:

See näide on saadaval ka CodePenil.

Harjutusena saate proovida luua erineva veergude arvuga ridu sõltuvalt ekraanisuurusest ja kontrollida käitumist oma brauseri konsoolis.

Veergude tasaarvestamine

Kui te ei soovi, et teie veerud oleksid üksteise kõrval, saate klassi kasutada .offset-[breakpoint]-[size]koos .col-[breakpoint]-[size].

Selle klassi kasutamine on sama, mis enne veergu lisada tühi veerg. Siin on lihtne näide:

 ... ... 

Näete koodi reaalajas CodePenil.

Klassi saate kasutada mis tahes rea veerus. Siin on veel mõned näited:

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

Veergude pesitsemine

See võib tulla üllatusena, kuid veeru sisse saate lisada rea!

Kõnealune rida (mille vanema veeru laius on) jagatakse seejärel 12 (väiksemaks) veerguks, millele saate .col-* klasside kaudu viidata .

Vaatame, mis juhtub, kui lisame veeru sisse uue rea:

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

Näete koodi reaalajas CodePenil.

Seda teades saate oma teabe korrastamiseks minna mitmel tasandil. Veerud pakuvad teile lihtsat viisi oma ruumi haldamiseks.

See koondab põhiteadmised Bootstrap 4 reageeriva võrgusüsteemi kohta. Kui teil on küsimusi, palun andke mulle kommentaarides teada, vastan meeleldi.

Lisalugemist

Kui teil on rohkem aega, on siin mõned kasulikud ressursid:

  • Ametlik võrgudokumentatsioon GetBootstrapilt
  • Videoõpetus Scrimbalt

See artikkel postitati algselt BootstrapBay ajaveebi. See on osa suuremast Bootstrap 4 õpetuste sarjast, mis kannab nime 14 päeva Bootstrap 4. Kui soovite Bootstrap 4 komponentide tundmaõppimist jätkata, on need artiklid hea koht alustamiseks.

Ja kui soovite oma arengut alustada Bootstrapi malliga, saate tutvuda meie turuga.

Kuid enne süvenemist võta hetk oma värskelt omandatud oskuste tähistamiseks !?