Share
Bootstrap, een van de meest populaire front-end frameworks voor webontwerpers, is onlangs gelanceerd heel langverwachte versie 4! Laten we eens kijken naar wat er nieuw is, wat er is verwijderd en wat je ermee kunt doen.
We zijn nooit gestopt met geloven, en hopen dat je dat ook niet hebt gedaan! Bootstrap 4.0.0 is eindelijk geland! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18 januari 2018
Deze iteratie van Bootstrap, volgens Mark Otto en het team, is een "belangrijke herschrijving van het hele project". Dat belooft veel verbeteringen, en suggereert ook dat er veel is om je gang te gaan als je van plan bent om bestaande projecten naar deze nieuwe versie te migreren. Er zijn geen "brekende veranderingen", maar er is veel om in te nemen. Tijd om in te springen en de belangrijkste functies te bekijken.
Traditioneel werd de lay-out van Bootstrap mogelijk gemaakt door float-gebaseerde stijlen. In recente versies werd een flexbox-alternatief beschikbaar gesteld, maar gezien zijn brede browserondersteuning is flexbox nu de meester van Bootstrap-rasters. De CSS-technologie achter Bootstrap-rasters maakt geen groot verschil, maar flexbox biedt meer flexibiliteit dan drijvers, dus op flexbox gebaseerde rasters komen met nog een paar andere opties. Als u bijvoorbeeld flexbox gebruikt, kunt u één kolom definiëren en ervoor zorgen dat de bijbehorende siblings automatisch worden aangepast.
De overstap naar het bevorderen van flexbox zorgde in feite voor een andere verandering: browserondersteuning. Bootstrap v4 heeft officieel de ondersteuning voor Internet Explorer 8, 9 en iOS 6 laten vallen. Dit betekent dat uw Bootstrap-websites alleen IE10 + en iOS 7+ ondersteunen. Het vermelden waard.
Fans van Sass zullen blij zijn te horen dat Bootstrap nu officieel een Sass-eerste project is. Als u de Bootstrap-bron downloadt, vindt u een map met de naam "Sass" waarin u alle benodigde partials ziet. "_Variables.scss" bevat alle variabelen en instellingen die u nodig hebt, vervolgens "bootstrap.scss" bevat alle @importeren richtlijnen, zodat u uw Bootstrap-installatie kunt aanpassen door alle componenten die u wenst op te nemen of uit te sluiten.
Op alle plaatsen afgezien van mediaquery's heeft Bootstrap v4 pixels laten vallen ten gunste van relatieve maateenheden zoals rems. Dit maakt het hele ding schaalbaarder, dus als je nog niet bent gewend aan remeenheden, zou dit een goed moment zijn om deze bronnen te bekijken:
Naast de overgang van Bootstrap van op float gebaseerde lay-outs, komt de responsiviteit nu ook met een extra laag. Vanaf nu kun je deze vijf standaardwaarden aanpassen:
$ grid-breakpoints: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)! standaard;
De volgende opmerkelijke verandering komt in de vorm van een nieuw resetbestand. "Opnieuw opstarten" neemt de resets van Normalize op, die alleen element selectors gebruiken, en daarop voortbouwen met een aantal eigenzinnige op klassen gebaseerde resetstijlen (u vindt .tafel en .Rooster grenst begraven daar met verschillende anderen).
Als je ooit een eerdere versie van Bootstrap hebt gedownload, ben je bekend met de online aanpasser. Met deze tool kunt u diverse aspecten van het Bootstrap-framework controleren en uitschakelen om uw ideale versie te maken.
Wel, het is weg.
In plaats daarvan richt Bootstrap zich nu op zijn eigen modulaire structuur, zodat u Sass van uw kant kunt gebruiken, alleen kunt opnemen wat u nodig hebt en uw eigen inzetbare eindresultaat kunt samenstellen .
Doe het zelfBootstrap bevat niet langer Glyphicons. In plaats daarvan wordt u geadviseerd om uw eigen favorieten te vinden en deze op elke gewenste manier op te nemen. Het Bootstrap-team geeft zelf de voorkeur aan de volgende sets, die we u aanraden te implementeren als SVG in plaats van het gebruik van weblettertypepictogrammen:
De thumbs-up van IconicEerdere versies van Bootstrap bevatten Grunt-ondersteuning om veel van de veelvoorkomende taken te automatiseren; dat is nu weg. In plaats daarvan wordt Bootstrap nu geleverd met een aantal npm-scripts die u kunt vinden in het bestand "package.json". Je kunt deze gebruiken om dingen te doen, zoals je Sass-bestanden bekijken op veranderingen, pluistests uitvoeren op je JavaScript of gewoon gebruiken voer npm dist uit alles doen en een distributieversie van uw voltooide website samenstellen.
Voor meer informatie over hoe Bootstrap en Node.js werken, bekijkt u de documentatie van de buildtool of bekijkt u de volgende zelfstudies:
Naast deze grote wijzigingen zijn er een aantal kleine wijzigingen in de nieuwste Bootstrap. Fans van componenten zoals panelen, miniaturen en putjes zullen teleurgesteld zijn als ze horen dat deze zijn verwijderd. Ze hebben echter plaatsgemaakt voor een allesomvattend onderdeel, de 'kaart', wat eigenlijk een grote verbetering is. U kunt alles over deze wijzigingen lezen en meer op de migratiepagina.
Blijf luisteren naar meer Bootstrap 4-tutorials en cursussen over Tuts +, en ik zie je de volgende keer!
Accentsconagua