Bootstrap 4 nieuwe en coole functies waar je dol op bent

De volgende grote release van het Bootstrap-framework is om de hoek. De alpha-versie kan al worden gedownload van de ontwikkelwebsite van Bootstrap en de broncode is ook beschikbaar op Github.

Twitter Bootstrap is momenteel het meest populaire frontend framework dat er is. Het stelt ontwikkelaars in staat om bouwen snel en snel mobiele eerste en responsieve websites. Bootstrap maakt het mogelijk om slim gebruik te maken van het standaard HTML5, CSS3 en Javascript frontend trio. Het wordt momenteel gebruikt door meer dan 6 miljoen sites op internet.

Hoewel Bootstrap 4 nog in de ontwikkelingsfase is (dus gebruik het nog niet op een live site), hebben de ontwikkelaars fantastisch werk geleverd. In deze post zullen we een kijkje nemen naar de nieuwe versie die veel geweldige functies bevat die zeker zullen komen stroomlijn en verbeter de workflow voor de ontwikkeling van de frontend.

1. Sass in plaats van MINDER

Tot nu toe heeft Bootstrap LESS gebruikt als de belangrijkste CSS-voorprojector, maar voor de nieuwe grote release worden de stijlregels naar Sass geüpdatet, wat veel populairder is bij frontend-ontwikkelaars, een enorme contributorbasis heeft, over het algemeen gemakkelijker te gebruiken is en meer biedt mogelijkheden. Dank aan de krachtige Libsass Sass Complier geschreven in C / C++ Bootstrap 4 compileert veel sneller dan voorheen.

2. Nieuwe rasterlaag voor kleinere schermen

Bootstrap heeft een geavanceerd responsief rastersysteem waarmee ontwikkelaars apparaten met verschillende viewports kunnen targeten. Bootstrap 3 heeft momenteel 4 rasterklassen voor kolommen, .col-xs-XX voor mobiele telefoons, .col-sm-XX voor tablets, .col-md-XX voor desktops, en .col-lg-XX voor grotere desktops. Bootstrap 4 zal het rastersysteem verbeteren met een vijfde systeem dat ontwikkelaars zal helpen doel kleinere apparaten onder 480px viewport breedte.

De nieuwe rasterklasse heeft de naam van de vorige kleinste genomen en de huidige namen van de rasternatten met één klik naar boven gedrukt. In Bootstrap 4 gebruiken de grote bureaubladen de .col-xl-XX klasse selector. Het is belangrijk om te weten dat ze ondanks de nieuwe naam geen nieuwe les hebben toegevoegd voor extra grote schermen, maar voor extra kleine schermen.

3. Introduceert relatieve CSS-eenheden

Bootstrap 4 laat eindelijk de ondersteuning voor Internet Explorer 8 vallen. Dat is echt een slimme stap omdat het hen in staat stelt vervelende polyfills kwijt te raken en om te zetten naar relatieve CSS-eenheden. In plaats van pixels, zal de nieuwe belangrijke release gebruik REMs en EM's die het mogelijk maken om implementeer responsieve typografie op Bootstrap-sites. Dit zal ook de leesbaarheid vergroten en sites toegankelijker maken voor gebruikers met een handicap.

Als je wilt uitproberen hoe relatieve eenheden met de nieuwe Bootstrap 4 werken, bekijk dan deze demo op Codepen.

4. Gloednieuwe Bootstrap-kaarten

Het ontwikkelteam besloot om enkele eerdere elementen van Bootstrap's gebruikersinterface te verenigen, dus besloten ze om een nieuwe UI-component met de naam Cards. Kaarten vervangen de voormalige putten, miniaturen en panelen en bieden gebruikers een meer gestroomlijnde workflow. Maak je geen zorgen, kaarten zullen vertrouwde elementen bevatten, zoals titels, kop- en voetteksten van putten, miniaturen en panelen.

Omdat kaarten flexibeler zijn dan de huidige UI-componenten, zullen ze meer ruimte bieden voor creatieve implementaties. Er zijn wat pioniers die al experimenten op Codepen met Bootstrap Cards hebben uitgevoerd. Je kunt ze bekijken of je eigen kaarten maken.

5. Nieuwe reboot-module

De nieuwe Reboot-module vervangt de vorige normalize.css reset bestand. Het sloot het niet; integendeel, het bouwt er meer regels aan. Het doel van de verhuizing was om alle generieke CSS selectors op te nemen en stijlen te resetten in a enkel, eenvoudig te gebruiken SCSS-bestand. U kunt hier de broncode bekijken als u beter wilt begrijpen hoe de nieuwe module werkt.

Het is goed om te weten dat de nieuwe resetstijlen de CSS-eigenschap op de box slim maken border-box op de element, dat daarom wordt overgenomen door elk onderliggende element op de pagina. De nieuwe stijlregel maakt responsieve lay-outs beter beheersbaar. Als je het verschil wilt ervaren tussen de lay-outtypen content-box en border-box, bekijk dan deze handige demo van CSS-Tricks.com (deze is niet gemaakt voor Bootstrap 4, maar laat zien hoe box-sizing werkt over het algemeen).

6. Opt-in Flexbox-ondersteuning

Bootstrap 4 maakt het mogelijk om gebruik te maken van de Flexbox-lay-out van CSS3, maar - omdat Internet Explorer 9 de flexbox-module niet ondersteunt - de standaardversie van Bootstrap 4 in plaats van maakt gebruik van de float en geeft CSS-eigenschappen weer om een ​​vloeiende lay-out te implementeren.

Flexbox heeft een gebruiksvriendelijke lay-out die uitstekend kan worden gebruikt in responsief ontwerp, omdat het een flexibele container is die zich uitzet of krimpt om de beschikbare ruimte op de beste manier te vullen. Gebruik de opt-in flexbox-functie alleen als u niet doen moet IE9 ondersteunen.

7. Gestroomlijnde variabele personalisatie

Alle Sass-variabelen die worden gebruikt in de nieuwe Bootstrap-release zijn opgenomen in een enkel bestand met de naam _variables.scss, dat het ontwikkelingsproces aanzienlijk zal stroomlijnen. U hoeft niets anders te doen dan de instellingen van dit bestand naar een andere te kopiëren _custom.scss om de standaardwaarden te wijzigen.

Jij kan pas veel dingen aan zoals kleuren, spatiëring, koppelingsstijlen, typografie, tabellen, grid breekpunten en containers, kolomnummer en gootbreedte en vele andere.

8. Nieuwe Utility Classes voor Spacing

Bootstrap 3 heeft al veel praktische utiliteitsklassen, zoals klassen die zwevend veranderen of de clearfix, maar Bootstrap 4 voegt nog meer toe. De nieuwe afstandsklassen sta ontwikkelaars toe om paddings en marges snel te veranderen op hun sites.

De syntaxis voor de nieuwe klassen is vrij eenvoudig, bijvoorbeeld het toevoegen van de .m-a-0 klasse koppelt een stijlregel aan die stelt marges in op 0 aan alle zijden van het gegeven element (margin-all-0). Terwijl marges de m- voorvoegsel, paddings zijn gestyled met de p- voorvoegsel. In de ontwikkelingsdocumenten kunt u een kijkje nemen naar alle nieuwe spacing-hulpklassen.

9. Tooltips en Popovers Powered by Tether

In Bootstrap 4 maken tooltips en popovers gebruik van de supercool Tether-bibliotheek, een positioneringsengine die het mogelijk maakt om een ​​absoluut gepositioneerd element pal naast een ander element op dezelfde pagina te houden. Dit betekent tooltips en popovers wordt automatisch correct geplaatst op Bootstrap 4 websites.

Vergeet niet dat, aangezien Tether een JavaScript-bibliotheek van een derde partij is, je deze apart moet opnemen in de HTML-code vóór je bootstrap.js-bestand.

10. Refactored JavaScript-plug-ins

Het ontwikkelteam heeft elke JavaScript-plug-in voor de nieuwe versie aangepast met behulp van EcmaScript 6. Met het slimme gebruik van de nieuwste specificaties en de nieuwste verbeteringen zijn ze van plan de frontend-ervaring te verbeteren.

De nieuwe Bootstrap 4 heeft ook andere JavaScript-verbeteringen ondergaan, zoals optie type controle, generieke demonteermethoden, en UMD-ondersteuning, dat zal allemaal samenwerken om ervoor te zorgen dat het meest populaire frontendraamwerk soepel verloopt dan ooit tevoren.

Lees nu: 10 lichtgewicht alternatieven voor Bootstrap & Foundation