✅ Išmokti naudotis „Bootstrap Grid“

Turinys

Stulpelis a
B stulpelis
C stulpelis
Stulpelis a
B stulpelis
C stulpelis

Bootstrap valdo tinkleliu pagrįstą struktūrą arba dar vadinamą Tinklelis, o tai yra ne kas kita, kaip išdėstymas ekrane, padedantis mums sutvarkyti savo elementus, tarsi padalijome ekraną į eilutes ir stulpelius ir laikėme jį kaip didelę lentelę.
Šio tipo manipuliacijos verčia mus galvoti apie dizainą „unikaliu“ būdu ir tuo metu, kai turime šiek tiek daugiau patirties Bootstrap Mes pradėsime viską matyti tokiu būdu ir taip įgysime nuoseklumo bei greičio.
Pirmas dalykas, kurį reikia žinoti, yra tai, kad šis dizainas Tinklelis leidžia mums dirbti taip, kad galėtume iš pradžių įdiegti rodinius mobiliesiems, žinoma, iš 3 versijos Bootstrap, nes ši versija buvo sukurta atsižvelgiant į mobilųjį dizainą.
Ankstesnėse sistemos versijose klasės turėjo būti nurodytos tiesiogiai, kad mūsų dizainas galėtų prisitaikyti prie mobiliųjų įrenginių skiriamosios gebos, dabar skirtingų klasių Tinklelis jie tai daro automatiškai.
Norėdami pasinaudoti šia savybe, turime galvoti nuo mažų iki didelių, tai yra, mūsų taikomos klasės visada turi būti laikomos mažiausiomis, o tada jos bus pritaikytos prie kitų rezoliucijų, tai yra, jei apibrėžiame sm klasė (mažas ar mažas), automatiškai Bootstrap daroma prielaida, kad tai yra minimali išraiška ir kad ją galima pakeisti md (mediana) arba lg (didelis).
Prieš pereidami prie daugiau praktinių pavyzdžių, turime suprasti, kokias klases galime naudoti a stulpeliuose Tinklelis Be to, turime žinoti, kokiu atveju kiekvienas iš jų taikomas, tokiu būdu kurdami savo svetainę galime atsižvelgti į mažiausią įrenginį, kurį norime pasiekti.
Taikydami šį metodą galime sukurti svetaines Tinka mobiliesiems, kokios svarbios jos šiandien tampa paieškos sistemoms ir jų rezultatams, taip padedant mums ne tik sukurti geras svetaines, bet ir užsitarnauti tam tikrus mūsų reputacijos taškus SEO, žinoma, su tuo pačiu darbu.
Telefono ekranaiTai yra mažiausias įrenginys, kurį teoriškai galima naršyti pagal mūsų dizainą, nors telefonų skiriamoji geba palaipsniui buvo konvertuojama į „Full HD“, tačiau paprastai tai yra aukščiausios klasės, o vidutinė ir maža-teoriškai dauguma išlaiko daug mažesnę skiriamąją gebą. Tokios rūšies Tinklelis tai taikoma šiam atvejui: col-xs- ir taikoma mažesniems už plotį sprendimams 768 pikseliai.
Tabletės ekranaiTeoriškai jie yra antras mažiausias įrenginys, nes dėl didesnės dydžio planšetinio kompiuterio naršymo paviršius yra didesnis, todėl galime naudoti šiek tiek daugiau turinio nei naudojant telefono ekraną, be to, paprastai planšetiniuose kompiuteriuose navigacija atliekama horizontaliai. Šiam įrenginiui taikoma klasė yra col-sm- ir taikoma rezoliucijoms, kurių plotis didesnis nei 768 pikseliai ir po 992 pikseliai.
Mažo ekrano įrangaPaprastai tai yra tie, kurie priklauso mažiems stalinių ir nešiojamųjų kompiuterių diapazonams, jie gali būti įranga, kurios ekranai yra mažesni nei 15 colių arba kurių tarnavimo laikas yra ilgesnis nei 10 metų, jie taip pat yra nešiojamieji kompiuteriai, skirti studentams ir mažo sektoriaus sektoriui. perkamoji galia, tai yra daugumos sektorius. Šiuo atveju taikoma klasė yra col-md-, o pločio ribinės skiriamosios gebos yra didesnės nei 992 pikseliai ir mažiau nei 1200 pikselių.
Didelio ekrano įrangaČia galime apžiūrėti moderniausią įrangą, taip pat daugiau nei 15 colių ekranus šioje kategorijoje yra nauja įranga, tokia kaip ypač nešiojama, 4K raiška arba QHD taip pat ten, kur matome didesnius nei 1080p. Atmesdami pločius, kuriuos čia tvarkysime, yra didesni nei 1200 pikselių, tai kita versija Bootstrap tikriausiai.
Kadangi mes žinome sistemos teoriją Tinklelis apie Bootstrap, Gera pradėti praktiškai jį taikyti, tačiau prieš pamatydami kodą turime suprasti dar keletą sąvokų, visada pagal susitarimą ir geriausią praktiką turime naudoti elementą su klase konteineris, nes taip bus sukurtas sudėtinis rodinys, kurio pavadinimas nurodo, kad jis išlaikytų skirtingus mūsų stulpelius. Kita sąvoka, kurią turime žinoti, yra tai, kad visada bus 12 stulpelių, todėl į įvairius derinius, kuriuos atliekame, reikia atsižvelgti.
Šiame pavyzdyje mes sukursime kodą 3 didelių stulpelių išdėstymui, mes naudosime klasę col-md- ir kadangi mes norime 3 vienodų stulpelių, kai dalijame 12 iš 3, gauname skaičių 4, todėl tai bus kiekvieno mūsų gauto stulpelio dydis.
Pažvelkime į kodą be jokių papildomų veiksmų:

„Bootstrap“ tinklelis

Pavyzdys, kaip naudoti stulpelius „bootstrap“

Stulpelis a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam palengvina mano in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

B stulpelis

C stulpelis

Struktūra labai paprasta, su klase sukūrėme div konteineris, o viduje div su klase eilė pagaliau pastarajame su klase sukūrėme 3 divus col-md-4 Tai yra nešiojamųjų kompiuterių mažų ekranų klasė, ir mes matome, kaip nukaldiname skaičių 4, o tai rodo, kad kiekvienas jų padalinys atitinka 4 stulpelius Tinklelis. Pažiūrėkime, kaip tai atrodo, kai paleidžiame savo naršyklę:

DIDELIS

Jei pastebime, tada turime 3 didelius stulpelius, bet kas atsitinka, kai sumažiname dydį iki mažesnės skiriamosios gebos nei taikoma klasė, nes stulpeliai bus tiesiog sudėti vienas ant kito, kaip matome šį vaizdą:

DIDELIS

Nors tai nėra blogai, kartais norime, kad mūsų dizainas nesielgtų taip, nes mes galime tiesiogiai įtraukti elgseną į skirtingų rezoliucijų klases, toliau pažiūrėkime, kaip keičiame skirtingi stulpeliai, kad būtų pasiektas skirtingas rezultatas:

„Bootstrap“ tinklelis

Pavyzdys, kaip naudoti stulpelius „bootstrap“

Stulpelis a

B stulpelis

C stulpelis

Dabar, jei pastebime savo kode, viskas išlieka ta pati, išskyrus mūsų klases, kur A ir B stulpeliuose pridėjome klasę col-sm-6 o C skiltyje - klasė col-sm-12, tai reiškia, kad sumažinus skiriamąją gebą, sm klasės bus valdomos, kaip matome šiame paveikslėlyje:

DIDELIS

Matome, kad tokio paties dydžio, kaip ir pirmasis pavyzdys, A ir B stulpeliai tampa ne sukrauti, o tame pačiame regione, o C stulpelis užima vieną eilutę. Čia matome didžiulį naudingumą Tinklelis ypač dizaino, kuris yra orientuotas į reagavimą ir mobilumą.
Tuo baigiame šią pamoką, kurioje sužinojome, kaip veikia sistema Tinklelis apie BootstrapŽinoma, tai tik ledkalnio viršūnė, yra daug daugiau turinio, kurį galime ištirti kituose vadovėliuose, tačiau turėdami šias pagrindines žinias galime pradėti suprasti, kaip logiškiau ir mažiau pastangų suderinti savo dizainą. sistemą.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką