Bootstrap 4 Nya och coola funktioner du kommer att älska

Nästa stora utgåva av Bootstrap-ramverket är runt hörnet. Alfa-versionen kan redan laddas ner från Bootstraps utvecklingswebbplats, och källkoden finns också på Github.

Twitter Bootstrap är för närvarande den mest populära frontendramen där ute. Det gör det möjligt för utvecklare att snabbt och snabbt bygga mobila först och lyhörda webbplatser. Bootstrap gör det möjligt att smart använda sig av standard HTML5, CSS3 och Javascript frontend-trio. Det används för närvarande av mer än 6 miljoner webbplatser på webben.

Även om Bootstrap 4 fortfarande är i utvecklingsfasen (så använd det inte på en levande webbplats än), har utvecklarna gjort ett fantastiskt jobb. I det här inlägget tar vi en titt på den nya versionen som innehåller många fantastiska funktioner som säkert kommer effektivisera och förbättra frontendutvecklings arbetsflödet.

1. Sass istället för mindre

Hittills har Bootstrap använt LESS som sin främsta CSS-förebudsman, men för den nya stora utgåvan kommer stilreglerna att refactoreras till Sass, som är mycket mer populär bland frontendutvecklare, har en stor bidragsbas, som är mer lättanvänd och erbjuder mer möjligheterna. Tack vare den kraftfulla Libsass Sass Complier skrivs i C / C++ Bootstrap 4 kommer att kompilera mycket snabbare än tidigare.

2. Ny Grid Tier för mindre skärmar

Bootstrap har ett sofistikerat lyhörd system som tillåter utvecklare att rikta in sig på enheter med olika visningsportar. Bootstrap 3 har för närvarande 4 gridklasser för kolumner, .col-xs-XX för mobiltelefoner, .col-sm-XX för tabletter, .col-md-XX för stationära datorer och .col-lg-XX för större skrivbord. Bootstrap 4 kommer att förbättra nätsystemet med en femte som kommer att underlätta utvecklare att rikta mindre enheter under 480px visningsbredd.

Den nya rutnätklassen har tagit namnet på den föregående minsta, och tryckte nuvarande namn på rutnivån uppåt med ett hack. I Bootstrap 4 kommer de stora skrivborden att använda .col-xl-XX klassväljare. Det är viktigt att veta att trots det nya namnet inte de lagt till en ny klass för extra stora skärmar men för extra små.

3. Introducerar relativa CSS-enheter

Bootstrap 4 slår slutligen stödet till Internet Explorer 8. Det är verkligen ett smart steg eftersom det gör att de kan bli av med pesky polypyfills och konvertera till relativa CSS-enheter. I stället för bildpunkter kommer den nya stora utgåvan använd REMs och EMs som gör det möjligt att implementera responsiv typografi på Bootstrap-sidor. Detta ökar också läsbarheten och gör webbplatser mer tillgängliga för funktionshindrade användare.

Om du vill prova hur relativa enheter fungerar med den nya Bootstrap 4, kolla in denna demo på Codepen.

4. Brand New Bootstrap Cards

Utvecklingsgruppen bestämde sig för att förena några tidigare delar av Bootstraps användargränssnitt, så de bestämde sig för att introducera en ny gränssnittskomponent kallad kort. Kort ersätter tidigare brunnar, miniatyrbilder och paneler och ger användarna ett mer strömlinjeformat arbetsflöde. Oroa dig inte, korten kommer att hålla kända element, till exempel titlar, rubriker och sidfot av brunnar, miniatyrer och paneler.

Eftersom kort blir mer flexibla än de nuvarande användargränssnittskomponenterna, kommer de att ge ett större utrymme för kreativa implementeringar. Det finns några pionjärer där ute som redan har utfört experiment på Codepen med Bootstrap Cards. Du kan kolla in dem eller skapa egna kort.

5. Ny ombyggnadsmodul

Den nya Reboot-modulen ersätter föregående normalize.css återställ fil. Det klarar inte det; Tvärtom bygger det mer regler på den. Målet med flytten var att inkludera alla generiska CSS-väljare och nollställ stilar i en enkel, lättanvänd SCSS-fil. Du kan ta en titt på källkoden här om du vill förstå hur den nya modulen fungerar.

Det är bra att veta att de nya nollställningsformaten smartt ställer in CSS-egenskapen för boxformat till border-box på element som därför ärvs av varje barnelement på sidan. Den nya stilregeln gör responsiva layouter mer hanterbara. Om du vill uppleva skillnaden mellan innehållsrutan och rutan för layoutrutor i rutan, ta en titt på den här praktiska demo som tillhandahålls av CSS-Tricks.com (den var inte skapad för Bootstrap 4, den visar bara hur boxningsstorlek fungerar i allmänhet).

6. Opt-in Flexbox Support

Bootstrap 4 gör det möjligt att utnyttja CSS3s Flexbox Layout, eftersom Internet Explorer 9 inte stöder flexboxmodulen - standardversionen av Bootstrap 4 snarare använder sig av float och display CSS egenskaper för att genomföra en fluid layout.

Flexbox har en lättanvänd layout som kan användas utmärkt i responsiv design, eftersom det ger en flexibel behållare som antingen expanderar eller krympar sig för att fylla det lediga utrymmet på bästa sätt. Använd endast opt-in flexbox-funktionen om du inte behöver ge stöd för IE9.

7. Strömlinjad variabel anpassning

Alla Sass-variabler som används i den nya Bootstrap-utgåvan ingår i en enda fil som heter _variables.scss, vilket kommer att effektivisera utvecklingsprocessen betydligt. Du behöver inte göra något annat än att kopiera inställningarna från den här filen till en annan som heter _custom.scss för att ändra standardvärdena.

Du kan anpassa många saker såsom färger, mellanrum, länkstilar, typografi, tabeller, rutnätpunkter och containrar, kolumnnummer och takrännor och många andra.

8. Nya verktygsklasser för spacing

Bootstrap 3 har redan många praktiska verktygsklasser som de som ändras flytande eller clearfix, men Bootstrap 4 lägger till ännu mer. De nya avståndsklasser tillåta utvecklare att snabbt ändra paddingar och marginaler på sina webbplatser.

Syntaxen för de nya klasserna är ganska enkel, till exempel att lägga till .m-a-0-klassen länkar en stilregel som ställer in marginaler till 0 på alla sidor av det givna elementet (margin-all-0). Medan marginaler använder m- prefix, paddlar är utformade med p- prefix. I utvecklingsdokumenten kan du ta en titt på alla de nya distansverktygsklasserna.

9. Tooltips och Popovers Powered By Tether

I Bootstrap 4 använder verktygstips och popovers användningen av Tolk-biblioteket med superkool, en positioneringsmotor som gör det möjligt att hålla ett helt placerat element intill ett annat element på samma sida. Det betyder verktygstips och popovers kommer automatiskt att placeras korrekt på Bootstrap 4 webbplatser.

Glöm inte att eftersom Tether är ett tredjeparts JavaScript-bibliotek måste du separat inkludera det i HTML innan din bootstrap.js-fil.

10. Refactored JavaScript Plugins

Utvecklingslaget refactored varje JavaScript-plugin för den nya versionen med hjälp av EcmaScript 6. Med det smarta utnyttjandet av de senaste specifikationerna och de senaste förbättringarna har de för avsikt att förbättra frontendupplevelsen.

Den nya Bootstrap 4 har också genomgått andra JavaScript-förbättringar, till exempel alternativtypkontroll, generiska teardown metoder, och UMD-stöd, Det kommer alla att fungera tillsammans för att göra de mest populära frontendramarna köra smidigare än någonsin tidigare.

Läs nu: 10 Lätta Alternativ Till Bootstrap & Foundation