Home-theater-designers
Bootstrap 5 har kommet med store endringer, inkludert fallet for støtte for Internet Explorer (IE) og jQuery -avhengighet. Bootstrap er utviklet av Twitter og er verdens mest populære CSS -rammeverk. Rammen for åpen grensesnitt for brukergrensesnitt ser på å posisjonere seg for fremtiden, og dette har sett at det gjør banebrytende endringer i v5.
Bootstraps fall for IE har gjort det til det første verktøyet for webutvikling som gjør dette. Dette skjer etter hvert som Internet Explorer sin markedsandel fortsetter å synke, og står for mindre enn 3% av alle nettlesere.
Les videre for å se hvilke flere forbedringer som er gjort til Bootstrap og hvordan de påvirker deg.
1. jQuery -støtte
Bootstrap bruker ikke lenger jQuery -biblioteket. Utviklingsteamet har i stedet forbedret JavaScript -biblioteket for å gjennomføre denne endringen. JQuery -avhengigheten var ikke nødvendigvis en dårlig ting i Bootstrap.
Faktisk endret introduksjonen av jQuery radikalt hvordan JavaScript ble brukt. Det forenklet skriveoppgaver i JavaScript som ellers ville ha tatt mange kodelinjer.
I slekt: Lær hvordan du oppretter et element i jQuery
Til tross for alt dette har laget bestemt seg for å gjøre slutt på det. Dette gir fordelen av mindre kildefiler og høyere sideinnlastingstid. Dette var en sårt nødvendig endring som vil se at Bootstrap får en mer fremtidsvennlig stil.
Kildefilstørrelsen har blitt lettere med 85 KB minifisert JavaScript, og dette er nøkkelen siden Google anser sidelastetider for mobilnettsteder som en rangeringsfaktor.
Så mye som bruk av jQuery ikke lenger er nødvendig i Bootstrap 5, kan du fortsatt bruke den hvis du vil. Det er også verdt å merke seg at alle JavaScript -plugins er tilgjengelige.
2. CSS egendefinerte egenskaper
Ved å droppe Internet Explorer -støtte kan egendefinerte CSS -egenskaper (variabler) brukes. IE støtter ikke egendefinerte egenskaper - bare en grunn til at det holdt webutviklere tilbake lenge.
CSS egendefinerte egenskaper gjør CSS mer fleksibel og programmerbar. CSS -variabler er prefikset med -bs for å forhindre konflikt med tredjeparts CSS.
Det er to typer variabler tilgjengelig: rotvariabler og komponentvariabler.
Rotvariabler kan nås uansett hvor Bootstrap CSS er lastet. Disse variablene er plassert i _root.scss filen og er en del av de kompilerte dist -filene.
Komponentvariabler brukes som lokale variabler i bestemte komponenter. De er nyttige for å unngå utilsiktet arv av stiler i komponenter som nestede tabeller.
3. Forbedret rutenettsystem
Fordi det var noen problemer med å oppgradere fra versjon 3 til 4, beholder Bootstrap 5 hoveddelen av systemet denne gangen, og bygger på det eksisterende systemet i stedet for å endre det helt. Noen av endringene er:
- Takrennen ( .gutter ) har blitt erstattet til et verktøy ( .g* ) omtrent som margen og polstring
- Vertikale avstandsklasser har også blitt inkludert
- Det er ikke lenger standarder for kolonner posisjon: slektning
4. Forbedret dokumentasjon
Dokumentasjonen er forbedret med mer informasjon, spesielt når det gjelder tilpasning. Et vanlig problem var at med mange nettsteder som bruker Bootstrap, kunne du umiddelbart identifisere at den brukte Bootstrap. Bootstrap 5 kommer nå med et nytt utseende og bedre tilpasning.
Det er nå mer fleksibilitet til å tilpasse temaene dine slik at ikke alle nettsteder eller apper har samme likhet. V4-temasiden er faktisk utvidet med mer innhold og kodebiter for å bygge på Sass-filer (den populære CSS-forprosessoren). Du kan også finne et start -npm -prosjekt på GitHub -plattformen, som er tilgjengelig som mallager.
Fargepaletten er også utvidet i versjon 5. Det utvidede innebygde fargesystemet innebærer at du enkelt kan style fargen din uten å måtte forlate kodebasen. Mer arbeid er også gjort for å forbedre fargekontrasten, inkludert tillegg av fargekontrastberegninger i Bootstrap -fargedokumenter.
5. Forbedrede skjemakontroller
Bootstrap har forbedret skjemakontrollene, inndatagruppene og mer.
I v4 brukte Bootstrap egendefinerte skjemakontroller i tillegg til standardinnstillingene fra hver nettleser. I v5 er alle nå tilpasset. Alle alternativknappene, avmerkingsboksene, filen, rekkevidden og mer for å gi dem samme utseende og oppførsel på tvers av forskjellige nettlesere.
De nye skjemakontrollene inneholder ikke lenger unødvendig fargerik markering, men fokuserer i stedet på de standard og logiske designfunksjonene.
6. Bootstrap 5 legger til verktøyet API
Etter nye CSS -biblioteker som Tailwind CSS, legger Bootstrap nå også til et verktøybibliotek. Bootstrap-teamet sier at de er glade for å se hvordan andre utviklere utfordrer måten vi har bygget på nettet de siste ti årene.
Verktøyene får fart i utviklingssamfunnet, og bootstrap -teamet har lagt merke til det. Teamet hadde tidligere lagt til tilbud for verktøy i v4 ved hjelp av global $ enable-* klasser. I v5 har de endret seg til en API -tilnærming og et nytt språk og en syntaks i Sass. Dette gir deg muligheten til å opprette nye verktøy mens du fortsatt kan fjerne eller endre standardinnstillingene.
Som en måte å gi bedre organisering på, har noen verktøyene som var i v4 blitt flyttet til delen Hjelpere.
7. Nytt Bootstrap -ikonbibliotek
Bootstrap har nå sitt eget åpen kildekode SVG -ikonbibliotek med over 1300 ikoner. Det er skreddersydd for rammeverkets komponenter, men du kan fortsatt jobbe med dem på ethvert prosjekt.
Gitt at de er SVG -bilder, kan de raskt skaleres og kan implementeres på mange måter og også styles med CSS.
Du kan installere ikonene ved hjelp av over havnivå:
$ npm i bootstrap-iconsInstaller Bootstrap 5
Du kan gå til Bootstrap 5 offisielle nedlastingsside hvis du ønsker å installere den. Hvis du ønsket å holde deg oppdatert med den siste utviklingsversjonen du kan bruke over havnivå å trekke den:
$ npm i bootstrap@next
Når dette skrives, er rammen i sin Beta 3 -versjon. Dette betyr at programvaren er trygg å bruke, men fortsatt er under utvikling. Gi gjerne tilbakemelding til teamet og gi nødvendig bidrag.
Dele Dele kvitring E -post En introduksjon til webkomponenter og komponentbasert arkitekturLa oss ta en titt på vanlige webkomponenter og se hvorfor de er nyttige.
Les neste Relaterte temaer- Programmering
- Webutvikling
- JavaScript
- CSS
Jerome er personalforfatter på MakeUseOf. Han dekker artikler om programmering og Linux. Han er også en kryptoentusiast og holder alltid oversikt over kryptoindustrien.
Mer fra Jerome DavidsonAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
installer ubuntu fra usb windows 10Klikk her for å abonnere