Share
Op 19th van augustus 2015 is Bootstrap 4 alpha vrijgegeven aan het publiek, precies vier jaar na hun eerste officiële aankondiging van Bootstrap v1 (wat een toeval toch?).
Woohoo! Twitter Bootstrap, een open source CSS / HTML-framework van mezelf en @fat, is net live gegaan: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19 augustus 2011
Het immer populaire front-end framework heeft een complete make-over ondergaan en als grote fan van Bootstrap ben ik best enthousiast om een paar nieuwe functies te bemachtigen!
De startpagina van BootstrapNa ongeveer een jaar van ontwikkeling te hebben doorgemaakt, zijn 1.100 commits en 120.000 regels code veranderd; er is een hoop veranderingen en nieuwe functies waar we over kunnen kwijlen. Om je alle moeite te besparen bij het doorzoeken van het wijzigingslogboek, heb ik een lijst samengesteld met functies die ik interessant vond.
Laten we beginnen waar elk raamwerk begint, de resetmodule. Bootstrap's nieuwe reboot-module bouwt voort op het traditionele normalize.css en nu worden alle generieke elementselectoren verplaatst en worden stijlen teruggezet in een enkel toegankelijk scss-bestand.
Je zult ook een handige truc opmerken, die de traditionele zet box-sizing: border-box naar de html element, dan globaal naar alle elementen via overerving:
html box-sizing: border-box; *, *: before, *: after box-sizing: inherit;
Dit stelt ons in staat om de instelling beter op te heffen (indien nodig) zonder de specificiteit te verhogen of te gebruiken !belangrijk.
Krediet gaat naar Jon Neal voor het oorspronkelijke idee en CSS-Tricks voor het diepgaande overzicht van deze methode.
In een poging om de CSS te stroomlijnen, heeft Bootstrap v4 alpha IE8-ondersteuning en een groot aantal hacky CSS3-polyvullingen laten vallen. Door IE9 + te ondersteunen, kon het enkele geliefde CSS-modules omarmen. Een daarvan is de rem (root em) -eenheid, die de lettergrootte berekent ten opzichte van het wortelelement (html).
Door remeenheden verder te nemen, kunnen we ons echt gaan verdiepen in responsieve typografie. Aangezien alle lettertypebestanden gebaseerd zijn op ons rootelement, kunnen we mediaquery's maken om de grootte op verschillende breekpunten te wijzigen. Combineer dit met de nieuwe grid breakpoint mixins en voila!
Een voorbeeld van het wijzigen van de lettergrootte op onze website wanneer deze op extra kleine apparaten wordt bekeken:
html font-size: 16px; // Creëert een mediaquery voor extra kleine apparaten (0 - 34em) @omvang media-breekpunt-omhoog (xs) html font-size: 18px;
Lees meer in de uitgebreide handleiding van Kezz Bracey: Wanneer moet ik Em vs. Rem gebruiken?.
Out of the box Bootstrap v4 ondersteunt geen Flexbox, maar gebruikt meer traditionele float- of weergavetabelmethoden. Het ontbreken van standaard Flexbox-integratie helpt bij de ondersteuning van IE9 +, maar als u bereid bent om van deze ondersteuning af te zien en het op te schroeven naar IE10 +, kunt u Flexbox inschakelen voor uw project. Dit wordt gedaan door de Booleaanse variabele in het bestand _variables.scss te wijzigen; uw gecompileerde CSS zal nu Flexbox-stijlen bevatten. Flexbox wordt niet alleen alleen op het net gebruikt, maar ook verschillende andere elementen, waaronder het nieuwe kaartonderdeel, invoergroepen en mediacomponenten.
Laten we een voorbeeld bekijken van waar Flexbox ons helpt. Heel vaak zal ik een reeks inline kolommen hebben (zoals hieronder afgebeeld) waarbij de inhoud in een van de kolommen de hoogte ver voorbij de andere kolommen zal verlengen. Een klassiek CSS-dilemma. Een van de vele voordelen van het inschakelen van Flexbox is dat we de kolomhoogten gelijk kunnen maken. Er is geen aanvullende CSS vereist!
Zonder Flexbox
Met FlexboxOh, btw-Bootstrap 4 staat in SCSS. En als je erom geeft, zal v5 waarschijnlijk in PostCSS zijn, omdat heilige rotzooi dat cool klinkt.
- Mark Otto (@mdo) 23 april 2015
SCSS heeft LESS als de eerste CSS-preprocessor van keuze voor Bootstrap v4 toegeëigend. De volledige basis van de CSS-code is als SCSS aangepast, zonder officiële LESS-poort op het moment van schrijven. Mark legde een deel van zijn redenering in een tweet uit:
Als je redenen wilt: meer mensen gebruiken SCSS, libsass is gek snel, syntaxis is explicieter duidelijk, en ik ben lui en gebruik SCSS op GitHub.
- Mark Otto (@mdo) 23 april 2015
Als je een grote fan bent van de originele LESS-build, heeft Mark om hulp gevraagd bij het maken en onderhouden van de LESS-poort.
Bootstrap v4 heeft zijn componenten opgeruimd met het verwijderen van de klassieker goed, paneel en thumbnail componenten. In plaats daarvan een nieuw onderdeel: kaarten!
Het nieuwe kaartonderdeel heeft de vertrouwde aspecten van panelen, zoals titels, kop- en voetteksten, en rolt ze allemaal in een nette en flexibele inhoudcontainer.
En er is meer:
U kunt een kaartachtergrond met een afbeelding instellen en de tekst en andere inhoud van de kaart over elkaar leggen. Dit gebeurt zonder extra CSS door het volgende element toe te voegen aan uw kaart:
De klas toevoegen card-inverse stelt de letterkleur in op wit, zodat u een donkerdere achtergrond kunt instellen als u dat wenst.
Over achtergronden gesproken, de traditionele kleurvarianten kunnen ook op de kaart worden toegepast en de achtergrond daarop afstemmen. Bijvoorbeeld, card-primair stelt de kaart in op de primaire kleur, enzovoort, enzovoort.
Naast het standaard raster met goten, vindt u ook de optie om kaarten samen te groeperen, de afstand tussen beide te verwijderen en vervolgens elke kolom op een uniforme hoogte in te stellen. Standaard wordt dit bereikt door te gebruiken weergave: tafel en tabelopmaak: vast, Als u echter Flexbox heeft ingeschakeld, wordt deze gebruikt weergave: flex in plaats daarvan.
De kaartcomponent wordt ook geleverd met een metselwerkachtige kolomconfiguratie waarmee kaarten dicht op elkaar kunnen worden gestapeld op basis van de beschikbare verticale ruimte. Deze optie is niet ondersteund in IE9-het vereist IE10 en hoger!
Eerdere versies van Bootstrap hebben verschillende klassen met de naam "hulpprogramma's" opgenomen om een snelle en eenvoudige aanpassing van de inhoud buiten de componentspecifieke stijlen mogelijk te maken. Meestal is dit beperkt gebleven tot enkele vrij eenvoudige wijzigingen, zoals zwevend (pull-linker, pull-rechts), kleur (.text-primaire etc), clearfix (.Clearfix) en enkele anderen.
In Bootstrap v4 alpha hebben we toegang tot een hele reeks nieuwe hulpprogramma klassen rond opvulling en marges. Deze mogelijk controversiële zet zal het gebruikers van Bootstrap v4 mogelijk maken om snel content te pushen en uit te lijnen binnen uniforme incrementen. Sommige gebruikers denken dat utiliteitsklassen één stap verwijderd zijn van inline-stijlen, maar ze bieden wel de mogelijkheid om snel en uniform een component te stijlen zonder een specifieke selector te maken om dit te doen.
De klassen voor marge en padding worden gemaakt in veelvouden van een uniforme spacer-waarde. bijvoorbeeld:
// $ spacer is een sass-variabele die gelijk is aan 1rem of 16px .m-a-0 margin: 0! important; .m-a margin: $ spacer! important; .m-a-md margin: ($ spacer * 1.5)! important; .m-a-lg margin: ($ spacer * 3)! belangrijk;
Hier .m-a betekent margin aan eenll kanten. Er zijn klassen voor individuele zijden, assen, verschillende groottes (zoals aangegeven door -0, -md en -lg) en voor opvulling.
Hier is een blik op enkele van de andere klassen:
// Breng standaard opvulling aan alle kanten aan .p-a opvulling: $ spacer! Belangrijk; // Breng standaard opvulling aan op de bovenste .p-t padding-top: $ spacer-y! Important; // Pas standaard padding toe op de juiste .p-r padding-right: $ spacer-x! Important; // Breng standaard opvulling aan op de onderkant .p-b padding-bottom: $ spacer-y! Important; // Pas standaard padding toe op de linker .p-l padding-left: $ spacer-x! Important; // Pas standaardpadding toe op de x-as (rechts en links) .p-x padding-right: $ spacer-x! Important; padding-left: $ spacer-x! important; // Pas standaardpadding toe op de y-as (boven en onder) .p-y padding-top: $ spacer-y! Important; padding-bottom: $ spacer-y! important;
Het idee hier is om de hoeveelheid zeer specifieke aangepaste klassen te verminderen die zijn gemaakt om de inhoud aan te duwen, in plaats daarvan ze om te zetten in een uniforme en consistente methode voor inhouduitlijning.
Ik had een gesprek met Mark Otto (@mdo mede-bedenker van Bootstrap) op hun openbare Slack-kanaal en besprak het gebruik van deze klassen, zei hij:
"We vonden dat we ze nodig hadden en vaak de standaardwaarden voor veel componenten overschreven. Marge en opvulling lijken de meest algemeen onderdrukte eigenschappen te zijn (samen met kleur en lettertype). "- Mark Otto
Er zijn letterlijk honderden nieuwe functies en updates van de bestaande codebasis, te veel om in detail door te nemen. Dus hier zijn er nog een paar die mijn grote lijst niet hebben gemaakt, maar toch de moeite van het vermelden waard zijn.
De documentatie van Bootstrap v4 is vernieuwd. Er is een iets andere structuur waarin de functies worden uitgesplitst lay-out, inhoud en componenten. Wat ik best leuk vind aan de nieuwe documentatie, is dat elke component zijn eigen pagina heeft, waardoor het gemakkelijk is om te linken naar en ook te spelen met de grootte van de pagina aan te passen om het reactievermogen te testen.
Bootstrap 4 heeft een nieuwe gridlaag om kleinere apparaten te targeten (onder 480px breed), dit breekpunt heeft de naam van de vorige kleinste klasse overgenomen (.col-xs-XX). Daarbij zijn alle rasterniveaus een tandje omhoog gegaan, waardoor een nieuwe grootste laag is ontstaan .col-xl-XX voor het vorige lg.
Zoals vermeld in de conversie naar rem en em, heeft het Bootstrap-team nieuwe mixins toegevoegd om snel breekpunten rond de bestaande breekpunten te maken. Ze kunnen worden gebruikt met de volgende syntaxis:
// Creëert een mediaquery: @media (min-width) @ include media-breakpoint-up (xs) ... @omvat media-breekpunt-up (sm) ... @omvat media-breekpunt-up (md) ... @including media-breakpoint-up (lg) ... @including media-breakpoint-up (xl) ... // Creëert een mediaquery: @media (max-width) @ include media-breakpoint-down (xs) ... @omvat media-breekpunt-omlaag (sm) ... @omvat media-breekpunt-omlaag (md) ... @omvat media-breekpunt-omlaag (lg) ... @omvat media-breekpunt -down (xl) ...
Glyphicons zijn uit de build verwijderd; Bootstrap 4-documentatie bevat uiteindelijk instructies over het opnemen van pictogrampakketten van derden, zoals Font Awesome en Octicons.
Alle JavaScript-plug-ins zijn herschreven in ES6 om te profiteren van de nieuwste specificaties. Mogelijk merkt u dat sommige plug-ins zijn verwijderd (zoals de plug-in voor het toevoegen) terwijl ze de nieuwe bibliotheek blijven herschrijven en uitbreiden.
Dus dat is mijn lijst met enkele van de coole nieuwe functies toegevoegd in Bootstrap 4 alpha. Als je het hele wijzigingslogboek wilt bekijken, bekijk dan eens het verzoek om @ mdo's git pull voor Bootstrap 4.
Ik ben er zeker van dat er nog een hoop veranderingen zullen komen als het team alle knikken uitwerkt. Hun ontwikkelingsplan omvat de volgende mijlpalen
Er is geen woord over wanneer deze worden vrijgegeven, net zoals bij de vorige builds wanneer de bibliotheek gereed is. In de tussentijd kun je bootstrappen en ze helpen problemen op te sporen en algemene feedback te geven via hun bug-tracker!
Accentsconagua
