Bootstrap 4 Nye og kule funksjoner du vil elske

Den neste store utgaven av Bootstrap-rammen er rundt hjørnet. Alfa-versjonen kan allerede lastes ned fra Bootstraps utviklingswebside, og kildekoden er også tilgjengelig på Github.

Twitter Bootstrap er for tiden den mest populære frontendrammen der ute. Det gjør det mulig for utviklere å bygge mobile første og lydhøre nettsteder raskt. Bootstrap gjør det mulig å gjøre bruk av standard HTML5, CSS3 og Javascript frontend-trioen. Den brukes for tiden av over 6 millioner nettsteder på nettet.

Selv om Bootstrap 4 fortsatt er i utviklingsfasen (så ikke bruk den på et nettsted for en gang ennå), har utviklerne gjort en fantastisk jobb. I dette innlegget vil vi se på den nye versjonen som inneholder mange flotte funksjoner som sikkert vil strømlinjeforme og forbedre frontend-utviklings arbeidsflyten.

1. Sass i stedet for mindre

Inntil nå har Bootstrap brukt LESS som sin viktigste CSS-prepocessor, men for den nye store utgivelsen, vil stilreglene bli refactored til Sass, som er mye mer populær blant frontend-utviklere, har en stor bidragsyter base, generelt lettere å bruke og tilbyr mer muligheter. Takket være den kraftige Libsass Sass Complier som er skrevet i C / C++ Bootstrap 4 vil kompilere mye raskere enn før.

2. Ny rutenett for mindre skjermer

Bootstrap har et sofistikert responsivt rutenettsystem som gjør at utviklere kan målrette enheter med forskjellige visningsporte. Bootstrap 3 har for øyeblikket 4 gridklasser for kolonner, .COL-xs-XX for mobiltelefoner, .col-sm-XX for tabletter, .col-md-XX for stasjonære datamaskiner og .col-lg-XX for større stasjonære datamaskiner. Bootstrap 4 vil forbedre rutenettet med en femte som vil lette utviklerne til mål mindre enheter under 480px visningsbredde.

Den nye rutenettklassen har fått navnet på den forrige minste, og dyttet de nåværende navnene til rutenettene oppover med en hakk. I Bootstrap 4 vil de store skrivebordene bruke .col-xl-XX klassevalg. Det er viktig å vite at til tross for det nye navnet, la de ikke til en ny klasse for ekstra store skjermer, men for ekstra små.

3. Innfører Relative CSS Units

Bootstrap 4 faller til slutt støtten til Internet Explorer 8. Det er virkelig et smart skritt som gjør at de kan kvitte seg med pesky polypyfills og konvertere til relative CSS-enheter. I stedet for piksler vil den nye store utgivelsen bruk REMs og EMs som gjør det mulig å implementere responsiv typografi på Bootstrap-nettsteder. Dette vil også øke lesbarheten og gjøre nettsteder mer tilgjengelige for funksjonshemmede brukere.

Hvis du vil prøve ut hvordan relative enheter fungerer med den nye Bootstrap 4, sjekk ut denne demoen på Codepen.

4. Brand New Bootstrap Cards

Utviklingslaget bestemte seg for å forene noen tidligere elementer av Bootstraps brukergrensesnitt, så de bestemte seg for å introdusere en Ny UI komponent kalt Kort. Kortene erstatter de tidligere brønnene, miniatyrbildene og panelene, og gir brukerne en mer strømlinjeformet arbeidsflyt. Ikke bekymre deg, kortene vil holde kjente elementer, som titler, overskrifter og bunntekster av brønner, miniatyrbilder og paneler.

Ettersom kortene blir mer fleksible enn dagens UI-komponenter, vil de gi større plass til kreative implementeringer. Det er noen pionerer der ute som allerede har utført eksperimenter på Codepen med Bootstrap Cards. Du kan sjekke dem ut, eller lage dine egne kort.

5. Ny oppstartsmodul

Den nye Reboot-modulen erstatter den forrige normalize.css tilbakestill fil. Det gjør det ikke grønt; Tvert imot bygger det flere regler på den. Målet med flyttingen var å inkludere alle generiske CSS-selektorer og tilbakestille stiler i a enkelt, brukervennlig SCSS-fil. Du kan se kilden her hvis du vil forstå hvordan den nye modulen fungerer.

Det er godt å vite at de nye tilbakestillingsmodellene smartt angir boksstørrelsen CSS-egenskapen til border-box på element, som derfor er arvet av hvert barnelement på siden. Den nye stilregelen gjør responsive oppsett mer håndterbare. Hvis du vil oppleve forskjellen mellom innholdsrammen og rammeboksens layouttyper, ta en titt på denne praktiske demoen som leveres av CSS-Tricks.com (den ble ikke opprettet for Bootstrap 4, den viser bare hvordan boksformatering fungerer generelt).

6. Opt-in Flexbox Support

Bootstrap 4 gjør det mulig å ta i bruk CSS3s Flexbox Layout, da Internet Explorer 9 ikke støtter flexbox-modulen - standardversjonen av Bootstrap 4 heller bruker float og display CSS egenskaper for å implementere en fluid layout.

Flexbox har et brukervennlig layout som kan brukes utmerket i responsiv design, da det gir en fleksibel beholder som enten ekspanderer eller krymper seg for å fylle ledig plass på den beste måten. Bruk bare opt-in flexbox-funksjonen hvis du ikke må gi støtte til IE9.

7. Strømlinjeformet variabel tilpassing

Alle Sass-variablene som brukes i den nye Bootstrap-utgivelsen, er inkludert i en enkelt fil som heter _variables.scss, som vil effektivisere effektiviseringsprosessen vesentlig. Du trenger ikke å gjøre noe annet enn å kopiere innstillingene fra denne filen til en annen som heter _custom.scss for å endre standardverdiene.

Du kan tilpasse mange ting for eksempel farger, mellomrom, lenke stiler, typografi, tabeller, grid breakpoints og containere, kolonn nummer og rennbrett, og mange andre.

8. Nye verktøysklasser for mellomrom

Bootstrap 3 har allerede mange praktiske verktøysklasser som de som endrer flytende eller clearfix, men Bootstrap 4 legger til enda mer. De nye avstandsklasser la utviklere raskt bytte paddings og margins på sine nettsteder.

Syntaxen for de nye klassene er ganske enkel, for eksempel å legge til .m-a-0 klasse kobler en stilregel som setter marginer til 0 på alle sider av det gitte elementet (margin-all-0). Mens marginer bruker m- prefiks, paddings er stylet med p- prefiks. I utviklingsdokumenter kan du se på alle de nye fordelingsverktøysklassene.

9. Tooltips og Popovers Powered By Tether

I Bootstrap 4 bruker verktøytips og popovers bruk av Tether-biblioteket med superkjøl, en posisjoneringsmotor som gjør det mulig å holde et helt posisjonert element rett ved siden av et annet element på samme side. Dette betyr verktøytips og popovers blir automatisk plassert riktig på Bootstrap 4 nettsteder.

Ikke glem at når Tether er et tredjeparts JavaScript-bibliotek, må du separat legge det inn i HTML-en før bootstrap.js-filen din.

10. Refactored JavaScript Plugins

Utviklingslaget refactored hvert JavaScript-plugin for den nye versjonen ved hjelp av EcmaScript 6. Med den smarte utnyttelsen av de nyeste spesifikasjonene og de nyeste forbedringene de har til hensikt å forbedre frontend-opplevelsen.

Den nye Bootstrap 4 har også gjennomgått andre JavaScript-forbedringer, for eksempel valg type kontroll, generiske teardown metoder, og UMD-støtte, som alle vil jobbe sammen for å få de mest populære frontend-rammene til å løpe mer jevnt enn noen gang før.

Nå Les: 10 lette alternativer til Bootstrap & Foundation