Bootstrap 4 Nove in kul funkcije vam bodo všeč

Naslednja večja izdaja okvirja Bootstrap je za vogalom. Verzijo alfa lahko že prenesete iz Bootstrapovega razvojnega spletnega mesta, izvorna koda pa je na voljo tudi v Githubu.

Twitter Bootstrap je trenutno najbolj priljubljen okvir frontend tam zunaj. To omogoča razvijalcem hitro izdelajte mobilne spletne strani in odzivne spletne strani. Bootstrap omogoča pametno uporabo standardnega trio HTML5, CSS3 in Javascript. Trenutno ga uporablja več kot 6 milijonov spletnih mest na spletu.

Čeprav je Bootstrap 4 še vedno v razvojni fazi (zato ga ne uporabljajte na spletnem mestu), so razvijalci opravili čudovito delo. V tem prispevku si bomo ogledali novo različico, ki vključuje številne odlične funkcije, ki bodo zagotovo racionalizira in izboljša potek dela v prednjem delu.

1. Sass Namesto MANJ

Do sedaj je Bootstrap uporabil LESS kot svojega glavnega predavatelja CSS-ja, vendar pa bo za novo glavno izdajo preoblikovana pravila za Sass, ki je veliko bolj priljubljena med razvijalci frontendov, ima veliko bazo podatkov, ki je na splošno lažja za uporabo in ponuja več. možnosti. Zahvaljujoč zmogljivemu Libsass Sass Complierju, napisani v C / C++ Bootstrap 4 se bo prevajal veliko hitreje kot prej.

2. Nova mreža za manjše zaslone

Bootstrap ima prefinjen odzivni omrežni sistem, ki razvijalcem omogoča, da ciljno usmerijo naprave z različnimi pogledi. Bootstrap 3 ima trenutno 4 razrede za stolpce, .col-xs-XX za mobilne telefone, .col-sm-XX za tablete, .col-md-XX za namizja in .col-lg-XX za večja namizja. Bootstrap 4 bo izboljšal omrežni sistem s petim, ki bo razvijalcem olajšal ciljno usmerite manjše naprave pod širino zaslona 480px.

Novi razred mreže je vzel ime prejšnjega najmanjšega in je za eno zarezo potisnil trenutna imena ravni mreže navzgor. V Bootstrap 4 bodo velika namizja uporabljala .col-xl-XX izbirnik razreda. Pomembno je vedeti, da kljub novemu imenu niso dodali novega razreda za ekstra velike ekrane, ampak za ekstra majhne.

3. Uvaja relativne CSS enote

Bootstrap 4 končno zmanjša podporo za Internet Explorer 8. To je res pameten korak, saj jim omogoča, da se znebijo nadležnih polifillov in se pretvorijo v relativne enote CSS. Namesto pikslov bo nova velika izdaja uporabo REMs in EMs ki omogočajo izvajati odzivno tipografijo na spletnih mestih Bootstrap. To bo tudi povečalo berljivost in naredilo mesta bolj dostopna za uporabnike invalide.

Če želite preizkusiti, kako relativne enote delujejo z novim Bootstrap 4, si oglejte ta demo na Codepen.

4. Brand New Bootstrap kartice

Razvojna ekipa se je odločila za poenotenje nekaterih prejšnjih elementov Bootstrapovega uporabniškega vmesnika, zato so se odločili za uvedbo a nova komponenta uporabniškega vmesnika, imenovana kartice. Kartice bodo nadomestile nekdanje vodnjake, sličice in plošče, uporabnikom pa bodo omogočili bolj poenostavljen potek dela. Ne skrbite, kartice bodo vsebovale znane elemente, kot so naslovi, glave in noge vodnjakov, sličic in plošč.

Ker bodo kartice bolj prilagodljive od trenutnih komponent uporabniškega vmesnika, bodo omogočile več prostora za ustvarjalne izvedbe. Obstajajo nekateri pionirji, ki so že izvedli poskuse na Codepen z karticami Bootstrap. Lahko jih preverite ali ustvarite lastne kartice.

5. Nov modul za ponovni zagon

Novi modul za ponovni zagon nadomesti prejšnji normalize.css ponastavi datoteko. Ne izniči ga; nasprotno, gradi več pravil na njej. Cilj poteze je bil vključiti vse splošne selektorje CSS in ponastaviti sloge v a enojna, enostavna za uporabo SCSS datoteko. Tukaj lahko pogledate izvorno kodo, če želite bolje razumeti delovanje novega modula.

Dobro je vedeti, da novi stil ponastavitve pametno nastavi lastnost CSS, ki meri velikost škatle obrobo na element, ki je tako podedovan z vsakim podrejenim elementom na strani. Novo pravilo sloga omogoča bolj prilagodljivo odzivno postavitev. Če želite izkusiti razliko med vrsto postavitve vsebine in obrobe, si oglejte ta priročen demo, ki ga ponuja CSS-Tricks.com (ni bil ustvarjen za zagonsko različico 4, ampak samo kaže, kako velikost škatle na splošno deluje).

6. Opt-in podpora za Flexbox

Bootstrap 4 pa omogoča, da vzamete vzvod CSS3-jevega Flexbox Layout-a - ker Internet Explorer 9 ne podpira modula flexbox - privzeta različica Bootstrap 4 uporablja lastnosti float in CSS za izvedbo postavitve tekočine.

Flexbox ima preprosto postavitev, ki jo je mogoče odlično uporabiti pri odzivnem oblikovanju, saj zagotavlja prilagodljiv zabojnik, ki se razširi ali skrči in tako najbolje zapolni prostor, ki je na voljo. Uporabite samo funkcijo optičnega vmesnika, če ne podporo za IE9.

7. Poenostavljena prilagoditev spremenljivk

Vse spremenljivke Sass, uporabljene v novi izdaji zagonskega zapisa, so vključene v eno datoteko _variables.scss, ki bo bistveno racionalizirala razvojni proces. Ni vam treba storiti ničesar drugega, razen kopiranja nastavitev iz te datoteke v drugega _custom.scss , da spremenite privzete vrednosti.

Ti lahko prilagodite veliko stvari kot so barve, razmiki, slogi povezav, tipografija, tabele, mrežne točke in zabojniki, številka stolpca in širina žleba ter mnogi drugi.

8. Novi pomožni razredi za razmik

Bootstrap 3 že ima veliko praktičnih pripomočkov, kot so tisti, ki spreminjajo plavajoče ali clearfix, vendar Bootstrap 4 dodaja še več. The nove razrede razmika razvijalcem omogoči hitro spreminjanje oblog in robov na svojih spletnih mestih.

Sintaksa za nove razrede je precej enostavna, na primer dodajanje .Razred m-a-0 povezuje pravilo stila, ki nastavi robove na 0 na vseh straneh danega elementa (margin-all-0). Medtem ko marže uporabljajo m- predpone, obloge so oblikovane z str- predpona. V razvojnih dokumentih si lahko ogledate vse nove razrede pomožnih programov.

9. Orodja in Popovers Powered by Tether

V Bootstrap 4 opisih orodij in popoverjih je uporabljena knjižnica superhladnega Tethera, mehanizma za določanje položaja, ki omogoča ohranjanje popolnoma pozicioniranega elementa tik ob drugem elementu na isti strani. To pomeni nasvete in popovers bo samodejno pravilno nameščen na spletnih mestih Bootstrap 4.

Ne pozabite, da ker je Tether JavaScript knjižnica tretje osebe, jo morate ločeno vključiti v HTML pred datoteko bootstrap.js.

10. Vgrajeni vtičniki JavaScripta

Razvojna ekipa je preoblikovala vsak vtičnik JavaScript za novo izdajo z uporabo programa EcmaScript 6. S pametno uporabo najnovejših specifikacij in najnovejših izboljšav nameravajo izboljšati izkušnjo s frontendi..

Novi zagonski trak 4 je bil tudi podvržen drugim izboljšavam JavaScripta, kot je npr preverjanje vrste možnosti, splošne metode, in Podpora UMD, da bodo vsi delali skupaj, da bi najbolj priljubljen okvir frontendov tekel bolj gladko kot kdajkoli prej.

Sedaj preberite: 10 lahkih alternativ za Bootstrap & Foundation