Share
Den 19th av augusti 2015 Bootstrap 4 alpha släpptes till allmänheten, exakt fyra år efter deras första officiella tillkännagivande av Bootstrap v1 (vilket tillfälle rätt?).
Woohoo! Twitter Bootstrap, en öppen CSS / HTML-ram från mig själv och @fat, gick precis live: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19 augusti 2011
Den ständigt populära frontramen har haft en komplett makeover och, som en stor fan av Bootstrap, är jag ganska glatt över att få händerna på några av de nya funktionerna!
Startsidan för BootstrapEfter att ha gått igenom ett år med utveckling ändrade 1 100 förbindelser och 120 000 kodrader; Det finns en massa förändringar och nya funktioner vi kan kasta över. För att spara dig alla problem med att skura ändringsloggen har jag sammanställt en lista över funktioner som jag tyckte intressant.
Låt oss börja när varje ram börjar, återställningsmodulen. Bootstraps nya omstartsmodul bygger på den traditionella normalize.css och flyttar nu alla generiska elementväljare och återställer stilar till en enda tillgänglig SCSS-fil.
Du kommer också att märka ett snyggt trick och ställa in den traditionella boxstorlek: gränsvärde till html element, sedan globalt till alla element via arv:
html box-size: border-box; *, *: före, *: efter box-size: arv;
Detta gör att vi bättre kan åsidosätta inställningen (om det behövs) utan att öka specificiteten eller använda !Viktig.
Kredit går till Jon Neal för den ursprungliga idén och CSS-Tricks för en djup överblick över denna metod.
I ett drag för att hjälpa till att effektivisera CSS, sjönk Bootstrap v4 alpha IE8 support och en mängd hacky CSS3 polyfyllor. Genom att stödja IE9 + har det kunnat omfamna några mycket älskade CSS-moduler. En av dessa är rem (root em), som beräknar typsnittstorlek i förhållande till rotelementet (html).
När vi tar remenheter vidare kan vi verkligen börja dyka in i responsiv typografi. Eftersom all fontstorlek är baserad på vårt rotelement kan vi skapa mediafrågor för att ändra storlekar vid olika brytpunkter. Kombinera detta med nya gridbrytnings mixins och voila!
Ett exempel på att ändra teckenstorleken över vår webbplats när den ses på extra små enheter:
html font-size: 16px; // Skapar en mediefråga för extra små enheter (0 - 34em) @ inkludera media-breakpoint-up (xs) html font-size: 18px;
Läs mer i Kezz Braceys omfattande guide: När man ska använda Em vs Rem.
Utanför lådan kommer Bootstrap v4 inte att stödja Flexbox, istället för att använda mer traditionella float- eller displaybordsmetoder. Bristen på standard Flexbox-integration hjälper till med IE9 + -stödet, men om du är villig att avstå från det här stödet och stöta på det i IE10 + kan du aktivera Flexbox över ditt projekt. Detta görs genom att ändra den booleska variabeln i filen _variables.scss; Din kompilerade css kommer nu att inkludera Flexbox-stilar. Flexbox används inte bara bara på nätet, men också olika andra element, inklusive den nya kortkomponenten, ingångskoncernerna och mediekomponenterna.
Låt oss gå över ett exempel på var Flexbox hjälper oss. Sällan kommer jag att ha en uppsättning inline kolumner (som bilden nedan) där innehållet i en av kolumnerna kommer att utöka höjden långt bortom de andra kolumnerna. En klassisk CSS-dilemma. En av de många fördelarna med att möjliggöra Flexbox är att vi kan tvinga kolonnhöjderna att vara lika. Ingen ytterligare CSS krävs!
Utan Flexbox
Med FlexboxÅh, btw-Bootstrap 4 kommer att vara i SCSS. Och om du bryr dig, kommer v5 sannolikt att vara i PostCSS eftersom helig skit som låter coolt.
- Mark Otto (@mdo) 23 april 2015
SCSS har usurped LESS som CSS preprocessor av val för Bootstrap v4. Hela CSS-kodbasen har refactored som SCSS, utan någon officiell LESS-port vid skrivningstillfället. Mark förklarade några av hans resonemang i en tweet:
Om du vill ha skäl: fler personer använder SCSS, libsass är galen snabb, syntax os tydligare och jag är lat och använder SCSS på GitHub.
- Mark Otto (@mdo) 23 april 2015
Om du är en stor fan av den ursprungliga LESS-byggnaden, har Mark begärt lite hjälp när du skapar och underhåller LESS-porten.
Bootstrap v4 har rengjort sina komponenter med borttagandet av klassiken väl, panel och Miniatyr komponenter. I deras plats en ny komponent: kort!
Den nya kortkomponenten har de välkända aspekterna av paneler, till exempel titlar, rubriker och sidfot och rullar dem alla till en snygg och flexibel innehållsbehållare.
Och det finns mer:
Du kan ställa in en kortbakgrund med en bild och överla kortets text och annat innehåll. Detta görs utan ytterligare CSS genom att lägga till följande element i ditt kort:
Lägga till klassen kort-invers kommer att ställa in teckensnittsfärgen till vit så att du kan ställa in en mörkare bakgrund om du vill.
På bakgrund av bakgrunden kan de traditionella färgvarianterna också appliceras på kortet och utforma bakgrunden i enlighet med detta. Till exempel, kort-primär kommer att ställa kortet till primärfärgen, så vidare och så vidare.
Förutom standardnätet med takrännor hittar du också möjligheten att gruppera kort tillsammans, ta bort mellanrummet mellan dem och sätt sedan in varje kolumn till en jämn höjd. Som standard uppnås detta genom att använda display: bord och tabell layout: fast, men om du har Flexbox aktiverad kommer den att använda display: flex istället.
Kortkomponenten kommer också med en murkonstruktion som gör det möjligt för kort att stapla ihop ihop baserat på tillgängligt vertikalt utrymme. Det här alternativet är stöds inte i IE9-det kräver IE10 och uppåt!
Tidigare versioner av Bootstrap har inkluderat olika klasser som heter "verktygsklasser" för att möjliggöra snabb och enkel justering av innehållet utanför komponentspecifika format. Vanligtvis har detta varit begränsat till några ganska grundläggande förändringar, som flytande (pull-vänster, pull-höger), Färg (.text-primär etc), clearfix (.clearfix) och några andra.
I Bootstrap v4 alpha har vi tillgång till en hel mängd nya verktygsklasser kring vaddering och marginaler. Detta eventuellt kontroversiella drag gör det möjligt för användare av Bootstrap v4 att snabbt trycka och anpassa innehållet i enhetliga steg. Vissa användare kan känna sig nytta klasser är ett steg bort från inline-stilar, men de ger möjlighet att snabbt och enhetligt utforma en komponent utan att skapa en specifik väljare för att göra det.
Marginal- och vadderingsverktygsklasserna skapas i multiplar med ett likformigt distansvärde. till exempel:
// $ spacer är en sass-variabel som motsvarar 1rem eller 16px .m-a-0 margin: 0! important; .m-a marginal: $ spacer! viktigt; .m-a-md margin: ($ spacer * 1.5)! viktigt; .m-a-lg margin: ($ spacer * 3)! viktigt;
Här .m-a står för margin på enll sidor. Det finns klasser för enskilda sidor, axlar, olika storlekar (som betecknas av -0, -md och -lg) och för vaddering.
Här är en titt på några av de andra klasserna:
// Applicera standard polstring på alla sidor .p-a padding: $ spacer! Important; // Använd standardpolstring till toppen .p-t padding-top: $ spacer-y! Important; // Använd standardpolstring till höger .p-r padding-right: $ spacer-x! Important; // Applicera standardpolning till botten .p-b padding-bottom: $ spacer-y! Important; // Använd standardpolstring till vänster .p-l padding-left: $ spacer-x! Important; // Använd standard padding till x-axeln (höger och vänster) .p-x padding-right: $ spacer-x! Important; padding-left: $ spacer-x! viktigt; // Applicera standardpolning på y-axeln (topp och botten) .p-y padding-top: $ spacer-y! Important; padding-bottom: $ spacer-y! viktigt;
Tanken här är att minska mängden mycket specifika anpassade klasser som skapats för att nudge innehållet, istället rulla dem till en enhetlig och konsekvent metod för innehållsinriktning.
Jag pratade med Mark Otto (@med co-creator of Bootstrap) på sin offentliga Slack-kanal och diskuterade användningen av dessa klasser, sade han:
"Vi fann att vi behövde dem, och ofta överstyrade standardvärdena för många komponenter. Marginal och vaddering verkar vara de mest överdrivna egenskaperna (tillsammans med färg och teckensnitt). "- Mark Otto
Det finns ganska bokstavligen hundratals nya funktioner och uppdateringar till den befintliga kodbasen, för många för att gå över i detalj. Så här är några fler som inte gjorde min stora lista, men det är fortfarande värt att nämna.
Bootstrap v4-dokumentationen har uppdaterats. Det finns en något annorlunda struktur där funktionerna är uppdelade i layout, innehåll och komponenter. Vad jag tycker om den nya dokumentationen är att varje komponent har sin egen sida, vilket gör det enkelt att länka till och också spela runt med att ändra storlek på sidan för att testa lyhördhet.
Bootstrap 4 har en ny gridnivå som riktar sig mot mindre enheter (under 480px bred), den här brytpunkten har tagit namnet på den föregående minsta klassen (.col-xs-XX). Därigenom har alla gridnivåer flyttat uppåt och därigenom skapat en ny största tier kallad .col-xl-XX för föregående lg.
Som nämnts i konverteringen till rem och em har Bootstrap-teamet lagt till nya mixins för att snabbt skapa brytpunkter runt de befintliga brytpunkterna. De kan användas med följande syntax:
// Skapar en mediasökning: @media (minbredd) @ inkludera media-breakpoint-up (xs) ... @ inkludera media-breakpoint-up (sm) ... @ inkludera media-breakpoint-up (md) ... @ inkludera media-breakpoint-up (lg) ... @ inkludera media-breakpoint-up (xl) ... // Skapar en mediafråga: @media (maxbredd) @ inkludera media-breakpoint-down (xs) ... @ inkludera media-breakpoint-down (sm) ... @ inkludera media-breakpoint-down (md) ... @ inkludera media-breakpoint-down (lg) ... -down (xl) ...
Glyphicons har tagits bort från byggnaden; Bootstrap 4-dokumentationen kommer i slutändan att innehålla instruktioner om hur man tar med 3: e parts ikonpaket som Font Awesome och Octicons.
Alla JavaScript-plugins har skrivits om i ES6 för att utnyttja den senaste specifikationen. Du kanske märker några plugins borttagna (till exempel pluginpluggen) eftersom de fortsätter att skriva om och bygga ut det nya biblioteket.
Så det är min lista med några av de coola nya funktionerna i Bootstrap 4 alpha. Om du vill kolla in hela ändringsloggen så långt ta en titt på @ mdos git-dragförfrågan för Bootstrap 4.
Jag är säker på att det kommer att bli en massa förändringar för att fortfarande komma som laget tränar ut alla kinks. Deras utvecklingsplan omfattar följande milstolpar
Det finns inget ord när dessa kommer att släppas. Liksom de tidigare byggnaderna kommer det att komma ner till när biblioteket är klart. Under tiden får du bootstrapping och hjälpa dem att spåra problem och ge allmän feedback genom sin buggspårare!
Accentsconagua
