Bootstrap 4 Nye og Cool Egenskaber, du vil elske

Den næste store udgave af Bootstrap-rammen er rundt om hjørnet. Alfa-versionen kan allerede hentes fra Bootstraps udviklingswebsted, og kildekoden er også tilgængelig på Github.

Twitter Bootstrap er i øjeblikket den mest populære frontend ramme derude. Det gør det muligt for udviklere at hurtigt og hurtigt at opbygge mobil-første og lydhøre websites. Bootstrap gør det muligt at udnytte standard HTML5, CSS3 og Javascript frontend-trio. Det er i øjeblikket udnyttet af mere end 6 millioner websteder på internettet.

Selvom Bootstrap 4 stadig er i udviklingsfasen (så brug det ikke på et live site endnu), har udviklerne gjort et fantastisk arbejde. I dette indlæg vil vi se på den nye version, der indeholder mange fantastiske funktioner, der helt sikkert vil strømline og forbedre frontend udviklings-workflow.

1. Sass i stedet for mindre

Indtil nu har Bootstrap brugt LESS som hoved CSS-forløber, men for den nye store udgivelse vil stilreglerne blive refactored til Sass, som er meget mere populær blandt frontend-udviklere, har en stor bidragyderbase, som er lettere at bruge og tilbyder mere muligheder. Takket være den kraftfulde Libsass Sass Complier, der er skrevet i C / C++ Bootstrap 4 vil kompilere meget hurtigere end før.

2. Ny grid Tier for mindre skærme

Bootstrap har et sofistikeret lydsystem, der giver udviklere mulighed for at målrette enheder med forskellige visningsporte. Bootstrap 3 har i øjeblikket 4 gitterklasser for kolonner, .col-xs-XX til mobiltelefoner, .col-sm-XX til tabletter, .col-md-XX til desktops og .col-Ig-XX til større desktops. Bootstrap 4 vil forbedre gridsystemet med en femte, der vil lette udviklere til mål mindre enheder under 480px visningsbredde.

Den nye gitterklasse har taget navnet på den forrige mindste og skubbet de nuværende navne på gitteret opad med et indhak. I Bootstrap 4 vil de store desktops bruge .col-xl-XX klassevælger. Det er vigtigt at vide, at på trods af det nye navn tilføjede de ikke en ny klasse til ekstra store skærme, men for ekstra små.

3. Introducerer relative CSS-enheder

Bootstrap 4 dræber endelig støtten til Internet Explorer 8. Det er virkelig et smart skridt, da det giver dem mulighed for at slippe af med irriterende polyfiller og konvertere til relative CSS-enheder. I stedet for pixels vil den nye store udgivelse brug REM'er og EM'er det gør det muligt at implementere responsiv typografi på Bootstrap-websteder. Dette vil også øge læsbarheden og gøre websteder mere tilgængelige for handicappede brugere.

Hvis du vil prøve, hvordan relative enheder arbejder med den nye Bootstrap 4, kan du tjekke denne demo på Codepen.

4. Brand nye Bootstrap Cards

Udviklingsholdet besluttede at forene nogle tidligere elementer af Bootstraps brugergrænseflade, så de besluttede at introducere en ny brugergrænseflade komponent kaldet kort. Kort erstatter de tidligere brønde, miniaturebilleder og paneler og giver brugerne en mere strømlinet arbejdsgang. Du skal ikke bekymre dig, kort vil holde kendte elementer, såsom titler, overskrifter og foden af ​​brønde, miniaturer og paneler.

Da kort bliver mere fleksible end de nuværende UI-komponenter, vil de give større plads til kreative implementeringer. Der er nogle pionerer derude, der allerede har udført eksperimenter på Codepen med Bootstrap Cards. Du kan tjekke dem ud, eller oprette dine egne kort.

5. Ny Reboot Module

Det nye Reboot-modul erstatter det forrige normalize.css nulstil fil. Det grøfter det ikke; Tværtimod bygger det flere regler på det. Målet med flytningen var at inkludere alle generiske CSS-selektorer og nulstil stilarter i en enkelt, brugervenlig SCSS-fil. Du kan se kilden her, hvis du vil forstå, hvordan det nye modul fungerer.

Det er godt at vide, at de nye nulstillingsstile smartt sætter boksstørrelses CSS-ejendommen til border-box på den element, der derfor er arvet af hvert barnelement på siden. Den nye stilregel gør responsive layouter mere håndterbare. Hvis du vil opleve forskellen mellem indholdsrammerne og grænseformatlayouttyperne, skal du kigge på denne praktiske demo, der leveres af CSS-Tricks.com (den blev ikke oprettet til Bootstrap 4, det viser bare, hvordan boksformatering fungerer generelt).

6. Opt-in Flexbox Support

Bootstrap 4 gør det muligt at udnytte CSS3's Flexbox Layout, da Internet Explorer 9 ikke understøtter flexbox-modulet - standardversionen af ​​Bootstrap 4 heller gør brug af float og display CSS egenskaber til at implementere et fluid layout.

Flexbox har et brugervenligt layout, som kan udnyttes fremragende i lydhørt design, da det giver en fleksibel beholder, der enten udvider eller krymper sig for at fylde det ledige rum den bedste måde. Brug kun opt-in flexbox-funktionen, hvis du gør ikke nødt til at yde støtte til IE9.

7. Streamlined Variable Customization

Alle Sass-variabler, der anvendes i den nye Bootstrap-udgivelse, er inkluderet i en enkelt fil, der hedder _variables.scss, der vil strømline udviklingsprocessen betydeligt. Du behøver ikke gøre noget andet bortset fra at kopiere indstillingerne fra denne fil til en anden, der hedder _custom.scss for at ændre standardværdierne.

Du kan Tilpas mange ting f.eks. farver, mellemrum, linkformater, typografi, tabeller, gitterbrudspunkter og containere, kolonneantal og rendebredde og mange andre.

8. Nye værktøjsklasser til afstand

Bootstrap 3 har allerede mange praktiske brugsklasser som dem, der ændrer flydende eller clearfix, men Bootstrap 4 tilføjer endnu mere. Det nye afstandsklasser tillade udviklere hurtigt at ændre paddings og margener på deres websteder.

Syntaxen for de nye klasser er ret ligetil, for eksempel at tilføje .m-a-0 klasse forbinder en stilregel der sætter margener til 0 på alle sider af det givne element (margen-alle-0). Mens margener bruger m- præfiks, paddings er stylet med p- præfiks. I udviklingsdokumenterne kan du kigge på alle de nye distributionsværktøjsklasser.

9. Tooltips og Popovers Powered By Tether

I Bootstrap 4 bruger værktøjstips og popovers brug af superkool Tether biblioteket, en positioneringsmotor, der gør det muligt at holde et helt positioneret element lige ved siden af ​​et andet element på samme side. Det betyder værktøjstips og popovers vil automatisk blive placeret korrekt på Bootstrap 4 hjemmesider.

Glem ikke, at da Tether er et tredjeparts JavaScript-bibliotek, skal du separat indføje det i HTML'en før din bootstrap.js-fil.

10. Refactored JavaScript Plugins

Udviklingsholdet refactored hvert JavaScript-plugin til den nye version ved hjælp af EcmaScript 6. Med den smarte udnyttelse af de nyeste specifikationer og de nyeste forbedringer, har de til hensigt at forbedre frontendoplevelsen.

Den nye Bootstrap 4 har også gennemgået andre JavaScript forbedringer, som f.eks valg type kontrol, generiske teardown metoder, og UMD support, Det vil alle arbejde sammen for at gøre de mest populære frontend-rammer køre mere glat end nogensinde før.

Læs nu: 10 lette alternativer til Bootstrap & Foundation