Home-theater-designers
Bootstrap 5 er kommet med store ændringer, herunder faldet til Internet Explorer (IE) support og jQuery afhængighed. Bootstrap er udviklet af Twitter og er verdens mest populære CSS -ramme. Open-source brugergrænsefladerammen ser på at positionere sig selv for fremtiden, og dette har set det foretage banebrydende ændringer i v5.
Bootstraps fald til IE har gjort det til det første webudviklingsværktøj til at gøre dette. Trækket kommer, da Internet Explorer's markedsandel fortsat aftager og tegner sig for mindre end 3% af alle webbrowsere.
Læs videre for at se, hvilke flere forbedringer der er foretaget i Bootstrap, og hvordan de påvirker dig.
1. jQuery Support
Bootstrap bruger ikke længere jQuery -biblioteket. Udviklingsteamet har i stedet forbedret JavaScript -biblioteket for at gennemføre denne ændring. JQuery -afhængigheden var ikke nødvendigvis en dårlig ting i Bootstrap.
Faktisk ændrede introduktionen af jQuery radikalt, hvordan JavaScript blev brugt. Det forenklede skriveopgaver i JavaScript, der ellers ville have taget mange linjer kode.
Relaterede: Lær, hvordan du opretter et element i jQuery
På trods af alt dette har teamet besluttet at gøre op med det. Dette kommer med fordelen ved mindre kildefiler og højere sideindlæsningstider. Dette var en tiltrængt ændring, som vil se Bootstrap få en mere fremtidsvenlig stil.
Kildefilstørrelsen er blevet lysere med 85 KB minimeret JavaScript, og dette er nøglen, da Google betragter sidens indlæsningstider for mobilwebsteder som en rangeringsfaktor.
Så meget som brugen af jQuery ikke længere er nødvendig i Bootstrap 5, kan du stadig bruge det, hvis du vil. Det er også værd at bemærke, at alle JavaScript -plugins stadig er tilgængelige.
2. CSS tilpassede egenskaber
Ved at droppe Internet Explorer -understøttelse kan brugerdefinerede CSS -egenskaber (variabler) bruges. IE understøtter ikke tilpassede egenskaber - kun en grund til, at det holdt webudviklere tilbage i lang tid.
CSS -tilpassede egenskaber gør CSS mere fleksibel og programmerbar. CSS -variabler er præfikset med -bs for at forhindre konflikt med tredjeparts CSS.
Der er to typer variabler til rådighed: rodvariabler og komponentvariabler.
Der kan tilgås rodvariabler, uanset hvor Bootstrap CSS indlæses. Disse variabler er placeret i _root.scss fil og er en del af de kompilerede dist -filer.
Komponentvariabler bruges som lokale variabler i bestemte komponenter. De er nyttige til at undgå utilsigtet arv af stilarter i komponenter som indlejrede tabeller.
3. Forbedret gittersystem
Fordi der var nogle problemer med at opgradere fra version 3 til 4, beholder Bootstrap 5 hovedparten af systemet denne gang og bygger på det eksisterende system i stedet for helt at ændre det. Nogle af ændringerne er:
- Tagrendeklassen ( .drenge ) er blevet erstattet til et hjælpeprogram ( .g* ) meget gerne margen og polstring
- Lodrette afstandsklasser er også inkluderet
- Kolonner er ikke længere standardiseret til position: relativ
4. Forbedret dokumentation
Dokumentationen er blevet forbedret med flere oplysninger, især når det kommer til tilpasning. Et almindeligt problem var, at med mange websteder, der bruger Bootstrap, kunne du straks identificere, at det brugte Bootstrap. Bootstrap 5 kommer nu med et nyt udseende og med bedre tilpasning.
Der er nu mere fleksibilitet til at tilpasse dine temaer, så ikke alle websteder eller apps har samme lighed. V4-temasiden er faktisk blevet udvidet med mere indhold og kodestykker til at bygge oven på Sass-filer (den populære CSS-forprocessor). Du kan også finde et starter npm -projekt på GitHub -platformen, som er tilgængelig som et skabelonlager.
Farvepaletten er også blevet udvidet i version 5. Det udvidede indbyggede farvesystem indebærer, at du nemt kan style din farve uden at skulle forlade din kodebase. Mere arbejde er også blevet udført for at forbedre farvekontrasten, herunder tilføjelse af en farvekontrastmetrik i Bootstrap -farvedokumenterne.
5. Forbedrede formkontroller
Bootstrap har forbedret formularkontrol, inputgrupper og mere.
I v4 brugte Bootstrap brugerdefinerede formularkontroller ud over standardværdierne fra hver browser. I v5 er disse alle nu tilpasset. Alle radioknapper, afkrydsningsfelter, fil, rækkevidde og mere for at give dem det samme udseende og opførsel på tværs af forskellige browsere.
De nye formkontroller indeholder ikke længere unødvendige farverige markeringer, men fokuserer i stedet på de standard og logiske designfunktioner.
6. Bootstrap 5 tilføjer værktøjs -API
Efter nye CSS -biblioteker som Tailwind CSS tilføjer Bootstrap nu også et hjælpebibliotek. Bootstrap-teamet siger, at de er glade for at se, hvordan andre udviklere udfordrer den måde, vi har bygget på nettet i det sidste årti plus.
Hjælpeprogrammer får fart i udviklingssamfundet, og bootstrap -teamet har taget det til efterretning. Teamet havde tidligere tilføjet levering til hjælpeprogrammer i v4 ved hjælp af global $ enable-* klasser. I v5 har de ændret sig til en API -tilgang og et nyt sprog og en syntaks i Sass. Dette giver dig mulighed for at oprette nye værktøjer, mens du stadig kan fjerne eller ændre de angivne standardindstillinger.
Som en måde at give bedre organisation på er nogle værktøjer, der var i v4, blevet flyttet til afsnittet Hjælpere.
7. Nyt Bootstrap -ikonbibliotek
Bootstrap kan nu prale af sit eget open source SVG -ikonbibliotek med over 1.300 ikoner. Det er specialfremstillet til rammens komponenter, men du kan stadig arbejde med dem på ethvert projekt.
I betragtning af at det er SVG -billeder, kan de hurtigt skaleres og kan implementeres på mange måder og også styles med CSS.
Du kan installere ikonerne vha over havniveau:
$ npm i bootstrap-iconsInstaller Bootstrap 5
Du kan gå til Bootstrap 5 officielle downloadside hvis du ønsker at installere det. Hvis du ville holde dig ajour med den seneste udviklingsudgivelse, kan du bruge over havniveau at trække det:
$ npm i bootstrap@next
På tidspunktet for denne skrivning er rammen i sin Beta 3 -version. Det betyder, at softwaren er sikker at bruge, men stadig er under udvikling. Giv gerne feedback til teamet og giv ethvert nødvendigt bidrag.
Del Del Tweet E -mail En introduktion til webkomponenter og komponentbaseret arkitekturLad os tage et kig på almindelige webkomponenter og se, hvorfor de er nyttige.
Læs Næste Relaterede emner- Programmering
- Web-udvikling
- JavaScript
- CSS
Jerome er personaleforfatter på MakeUseOf. Han dækker artikler om programmering og Linux. Han er også en kryptoentusiast og holder altid øje med kryptoindustrien.
Mere fra Jerome DavidsonAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
hvad er forskellen mellem mp3 og mp4Klik her for at abonnere