Bootstrap 5 har kommit med stora förändringar, inklusive minskningen av stöd för Internet Explorer (IE) och jQuery-beroende. Bootstrap är utvecklat av Twitter och är världens mest populära CSS-ramverk. Ramverket för användargränssnitt med öppen källkod tittar på att positionera sig för framtiden, och detta har sett det göra banbrytande förändringar i v5.
Bootstraps droppe för IE har gjort det till det första webbutvecklingsverktyget som gör detta. Flytten kommer när Internet Explorers marknadsandel fortsätter att minska och står för 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 kommer inte längre att använda 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.
Trots allt detta har laget beslutat att göra sig av med det. Detta kommer med fördelen av 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 mindre med 85 KB minifierad JavaScript, och detta är nyckeln eftersom Google betraktar sidladdningstider för mobilwebbplatser som 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 CSS-egenskaper
Genom att avbryta Internet Explorer-stödet kan anpassade CSS-egenskaper (variabler) användas. IE stöder inte anpassade egenskaper – bara en anledning till att det höll tillbaka webbutvecklare under lång tid.
Anpassade CSS-egenskaper gör CSS mer flexibel och programmerbar. CSS-variabler har prefix -bs för att förhindra konflikt 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 kompilerade dist-filerna.
Komponentvariabler används som lokala variabler i vissa komponenter. De är användbara för att undvika oavsiktlig arv av stilar i komponenter som kapslade tabeller.
3. Förbättrat Grid System
Eftersom det fanns 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 vidare på det befintliga systemet istället för att helt ändra det. Några av ändringarna är:
Rännstensklassen (.ränna) har ersatts till ett verktyg (.g*) ungefär som marginalen och utfyllnadsklasserna Vertikala avståndsklasser har också inkluderats. Kolumner är inte längre standardinställda till position:släkting
4. Förbättrad dokumentation
Dokumentationen har utökats 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 omedelbart identifiera att den använde Bootstrap. Bootstrap 5 kommer nu med ett nytt utseende och känsla och med bättre anpassning.
Det finns nu mer flexibilitet att anpassa dina teman så att inte alla webbplatser eller appar har samma likhet. Temasidan för v4 har faktiskt utökats med mer innehåll och kodavsnitt för att bygga ovanpå Sass-filer (den populära CSS-förprocessorn). Du kan också hitta ett startande npm-projekt på GitHub-plattformen som är tillgängligt som ett malllager.
Färgpaletten har även utökats i version 5. Det utökade inbyggda färgsystemet innebär att du enkelt kan styla din färgsättning utan att behöva lämna din kodbas. Mer arbete har också gjorts för att förbättra färgkontrasten, inklusive tillägget av ett 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 standardinställningarna som tillhandahålls av varje webbläsare. I v5 är alla nu anpassade. Alla alternativknappar, kryssrutor, filer, intervall 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ärgstarka 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 över att se hur andra utvecklare “utmanar sättet vi har byggt på webben under det senaste decenniet plus. ”
Verktygen tar fart i utvecklingssamhället och bootstrap-teamet har lagt märke till det. Teamet hade tidigare lagt till bestämmelser för verktyg i v4 med global $enable-* klasser. I v5 har de bytt till ett API-upplägg och ett nytt språk och syntax i Sass. Detta ger dig möjlighet att skapa nya verktyg samtidigt som du kan ta bort eller ändra standardinställningarna.
Som ett sätt att ge bättre organisation har några verktyg som fanns i v4 flyttats till avsnittet Hjälpare.
7. Nytt Bootstrap Icon Library
Bootstrap har nu sitt eget SVG-ikonbibliotek med öppen källkod med över 1 300 ikoner. Det är skräddarsytt för ramverkets komponenter men du kan fortfarande arbeta med dem i alla projekt.
Med tanke på att de är SVG-bilder kan de snabbt skalas och kan implementeras på många sätt och även stylas med CSS.
Du kan installera ikonerna med npm:
$ npm i bootstrap-icons
Installera Bootstrap 5
Du kan gå till den officiella nedladdningssidan för Bootstrap 5 om du vill installera den. Om du vill hålla dig à jour med den senaste utvecklingsversionen kan du använda npm att dra den:
$ npm i [email protected]
När detta skrivs är ramverket i sin Beta 3-version. Det betyder att programvaran är säker att använda men fortfarande under utveckling. Känna free att ge feedback till teamet och göra alla nödvändiga bidrag.
Om författaren
Jerome Davidson (33 artiklar publicerade)
Jerome är personalskribent 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, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
