7 nya funktioner att se upp för i Bootstrap 5

7 nya funktioner att se upp för i Bootstrap 5

Bootstrap 5 har medfört stora förändringar, inklusive nedgången för Internet Explorer (IE) -stöd och jQuery -beroende. Bootstrap är utvecklat av Twitter och är världens mest populära CSS -ramverk. Öppen källkod för användargränssnittet tittar på att positionera sig för framtiden, och detta har sett att det gör banbrytande förändringar i v5.





Bootstraps nedgång för IE har gjort det till det första webbutvecklingsverktyget för att göra detta. Detta sker när Internet Explorer marknadsandel fortsätter att minska, vilket motsvarar mindre än 3% av alla webbläsare.



Läs vidare för att se vilka fler förbättringar som har gjorts av Bootstrap och hur de påverkar dig.





1. jQuery Support

Bootstrap använder inte längre jQuery -biblioteket. Utvecklingsteamet har istället förbättrat JavaScript -biblioteket för att genomföra denna förändring. JQuery -beroendet var inte nödvändigtvis en dålig sak i Bootstrap.

Faktum är att introduktionen av jQuery radikalt förändrade hur JavaScript användes. Det förenklade skrivuppgifter i JavaScript som annars skulle ha tagit många rader kod.



Relaterad: Lär dig hur du skapar ett element i jQuery

Trots allt detta har laget bestämt sig för att göra slut på det. Detta kommer med fördelen med mindre källfiler och högre sidladdningstider. Detta var en välbehövlig förändring som kommer att se Bootstrap få en mer framtidsvänlig stil.



Källfilens storlek har blivit lättare med 85 KB minifierad JavaScript, och detta är nyckeln eftersom Google anser att sidens laddningstider för mobila webbplatser är en rankningsfaktor.

Så mycket som användningen av jQuery inte längre behövs i Bootstrap 5 kan du fortfarande använda den om du vill. Det är också värt att notera att alla JavaScript -plugins förblir tillgängliga.



2. Anpassade egenskaper för CSS

Genom att släppa Internet Explorer -stöd kan anpassade CSS -egenskaper (variabler) användas. IE stöder inte anpassade egenskaper - bara en anledning till att det höll tillbaka webbutvecklare länge.

CSS anpassade egenskaper gör CSS mer flexibel och programmerbar. CSS -variabler har prefix med -bs för att förhindra konflikter med tredje parts CSS.

Det finns två typer av variabler tillgängliga: rotvariabler och komponentvariabler.

Rotvariabler kan nås varhelst Bootstrap CSS laddas. Dessa variabler finns i _root.scss fil och är en del av de sammanställda dist -filerna.

Komponentvariabler används som lokala variabler i specifika komponenter. De är användbara för att undvika oavsiktlig nedärvning av stilar i komponenter som kapslade tabeller.

3. Förbättrat gallersystem

Eftersom det uppstod några problem med att uppgradera från version 3 till 4, behåller Bootstrap 5 huvuddelen av systemet den här gången och bygger på det befintliga systemet istället för att helt ändra det. Några av ändringarna är:

  • Rännklassen ( .Pojkar ) har ersatts till ett verktyg ( .g* ) ungefär som marginalen och vadderingen
  • Vertikala avståndsklasser har också inkluderats
  • Kolumner är inte längre standardiserade till position: släkting

4. Förbättrad dokumentation

Dokumentationen har förbättrats med mer information, särskilt när det gäller anpassning. Ett vanligt problem var att med många webbplatser som använder Bootstrap kunde du genast identifiera att den använde Bootstrap. Bootstrap 5 kommer nu med ett nytt utseende och bättre anpassning.

Det finns nu mer flexibilitet att anpassa dina teman så att inte varje webbplats eller app har samma likhet. V4-temasidan har faktiskt utökats med mer innehåll och kodavsnitt för att bygga ovanpå Sass-filer (den populära CSS-förbehandlaren). Du kan också hitta ett start -npm -projekt på GitHub -plattformen som finns som mallförråd.

Färgpaletten har också utökats i version 5. Det utökade inbyggda färgsystemet innebär att du enkelt kan styla din färg utan att behöva lämna din kodbas. Mer arbete har också gjorts för att förbättra färgkontrasten, inklusive tillägg av färgkontrastmått i Bootstrap -färgdokumenten.

5. Förbättrade formulärkontroller

Bootstrap har förbättrat sina formulärkontroller, inmatningsgrupper och mer.

I v4 använde Bootstrap anpassade formulärkontroller utöver standardvärdena från varje webbläsare. I v5 är alla nu anpassade. Alla alternativknappar, kryssrutor, fil, räckvidd och mer för att ge dem samma utseende och beteende i olika webbläsare.

De nya formulärkontrollerna innehåller inte längre onödiga färgglada markeringar, utan fokuserar istället på de vanliga och logiska designfunktionerna.

6. Bootstrap 5 lägger till Utilities API

Efter nya CSS -bibliotek som Tailwind CSS lägger Bootstrap nu också till ett verktygsbibliotek. Bootstrap-teamet säger att de är glada att se hur andra utvecklare utmanar hur vi har byggt på webben under det senaste decenniet plus.

Verktyg tar fart i utvecklingssamhället och bootstrap -teamet har tagit del av det. Teamet hade tidigare lagt till tillhandahållande av verktyg i v4 med global $ möjlig-* klasser. I v5 har de bytt till ett API -tillvägagångssätt och ett nytt språk och en syntax i Sass. Detta ger dig möjlighet att skapa nya verktyg medan du fortfarande kan ta bort eller ändra de angivna standardvärdena.

Som ett sätt att ge bättre organisation har några verktyg som fanns i v4 flyttats till hjälparavsnittet.

7. Nytt Bootstrap -ikonbibliotek

Bootstrap har nu ett eget SVG -ikonbibliotek med öppen källkod med över 1300 ikoner. Det är skräddarsytt för ramens komponenter men du kan fortfarande arbeta med dem på alla projekt.

Med tanke på att de är SVG -bilder kan de snabbt skala och kan implementeras på många sätt och även utformas med CSS.

Du kan installera ikonerna med över havsnivå:

$ npm i bootstrap-icons

Installera Bootstrap 5

Du kan gå till Bootstrap 5 officiella nedladdningssida om du vill installera det. Om du ville hålla dig uppdaterad med den senaste utvecklingsversionen kan du använda över havsnivå att dra den:

$ npm i bootstrap@next

När detta skrivs finns ramverket i sin Beta 3 -version. Detta innebär att programvaran är säker att använda men fortfarande är under utveckling. Ge gärna feedback till teamet och lämna nödvändiga bidrag.

Dela med sig Dela med sig Tweet E-post Ett introduktion till webbkomponenter och komponentbaserad arkitektur

Låt oss ta en titt på vanliga webbkomponenter och se varför de är användbara.

Läs Nästa Relaterade ämnen
  • Programmering
  • Webbutveckling
  • JavaScript
  • CSS
Om författaren Jerome Davidson(22 artiklar publicerade)

Jerome är personalförfattare på MakeUseOf. Han täcker artiklar om programmering och Linux. Han är också en kryptoentusiast och håller alltid koll på kryptoindustrin.

Mer från Jerome Davidson

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

kan inte kopiera filer till extern hårddisk windows 7
Klicka här för att prenumerera