Home-theater-designers
Bootstrap 5: een on tullut suuria muutoksia, kuten Internet Explorer (IE) -tuen ja jQuery -riippuvuuden väheneminen. Twitterin kehittämä Bootstrap on maailman suosituin CSS -kehys. Avoimen lähdekoodin käyttöliittymäkehys etsii paikannusta tulevaisuutta varten, ja sen ansiosta se on tehnyt mullistavia muutoksia v5: een.
Bootstrapin pudotus IE: lle on tehnyt siitä ensimmäisen verkkokehitystyökalun. Muutos tulee, kun Internet Explorerin markkinaosuus pienenee edelleen, ja se on alle 3% kaikista selaimista.
Lue, mitä muita Bootstrap -parannuksia on tehty ja miten ne vaikuttavat sinuun.
1. jQuery -tuki
Bootstrap ei enää käytä jQuery -kirjastoa. Kehitystiimi on sen sijaan parantanut JavaScript -kirjastoa tämän muutoksen toteuttamiseksi. JQuery -riippuvuus ei välttämättä ollut huono asia Bootstrapissa.
Itse asiassa jQueryn käyttöönotto muutti radikaalisti JavaScriptin käyttöä. Se yksinkertaisti JavaScriptin kirjoitustehtäviä, jotka muuten olisivat vaatineet monia koodirivejä.
Aiheeseen liittyviä: Opi luomaan elementti jQueryssä
Kaikesta tästä huolimatta joukkue on päättänyt lopettaa sen. Tästä hyötyvät pienemmät lähdetiedostot ja pidemmät sivujen latausajat. Tämä oli kaivattu muutos, jonka ansiosta Bootstrap saa enemmän tulevaisuuden ystävällistä tyyliä.
Lähdetiedoston koko on keventynyt 85 kt: lla pienennetyllä JavaScriptillä, ja tämä on avain, koska Google pitää mobiilisivustojen sivujen latausaikoja sijoitustekijänä.
Niin paljon kuin jQueryn käyttöä ei enää tarvita Bootstrap 5: ssä, voit silti käyttää sitä, jos haluat. On myös syytä huomata, että kaikki JavaScript -laajennukset ovat edelleen käytettävissä.
2. CSS: n mukautetut ominaisuudet
Luopumalla Internet Explorerin tuesta voit käyttää mukautettuja CSS -ominaisuuksia (muuttujia). IE ei tue mukautettuja ominaisuuksia - vain yksi syy, miksi se pidätti verkkokehittäjiä pitkään.
CSS: n mukautetut ominaisuudet tekevät CSS: stä joustavamman ja ohjelmoitavamman. CSS -muuttujien etuliite on -bs estääkseen ristiriidat kolmannen osapuolen CSS: n kanssa.
Käytettävissä on kahdenlaisia muuttujia: juurimuuttujat ja komponenttimuuttujat.
Päämuuttujia voidaan käyttää missä tahansa Bootstrap CSS: n latauksessa. Nämä muuttujat sijaitsevat _root.scss tiedosto ja ovat osa koottuja dist -tiedostoja.
Komponenttimuuttujia käytetään paikallisina muuttujina tietyissä komponenteissa. Ne auttavat välttämään tyylien tahatonta perimistä komponenteissa, kuten sisäkkäisissä taulukoissa.
3. Parannettu ruudukkojärjestelmä
Koska päivityksessä versiosta 3 versioon 4 oli joitain ongelmia, Bootstrap 5 säilyttää suurimman osan järjestelmästä tällä kertaa ja perustuu olemassa olevaan järjestelmään sen sijaan, että muuttaisimme sitä kokonaan. Jotkut muutokset ovat:
- Vesikouruluokka ( .pojat ) on korvattu apuohjelmalla ( .g* ) kuten marginaali ja pehmuste
- Pystysuorat etäisyysluokat on myös sisällytetty
- Sarakkeet eivät ole enää oletusarvoisia asema: sukulainen
4. Parannettu dokumentointi
Dokumentaatiota on parannettu lisäämällä erityisesti räätälöinnin suhteen. Yleinen ongelma oli, että monien Bootstrapia käyttävien sivustojen avulla voit heti tunnistaa, että se käytti Bootstrapia. Bootstrap 5: ssä on nyt uusi ulkoasu ja parempi mukautus.
Nyt on enemmän joustavuutta muokata teemoja niin, että kaikki sivustot tai sovellukset eivät ole samankaltaisia. V4-teemasivua on laajennettu lisää sisällöllä ja koodinpätkillä Sass-tiedostojen (suosittu CSS-esiprosessori) päälle. Löydät myös aloittavan npm -projektin GitHub -alustalta, joka on saatavana mallivarastona.
Värivalikoimaa on myös laajennettu versiossa 5. Laajennettu sisäänrakennettu värijärjestelmä tarkoittaa, että voit muotoilla värityksesi helposti poistumatta koodikannastasi. Myös värikontrastin parantamiseksi on tehty enemmän työtä, mukaan lukien Bootstrap -väriasiakirjoihin lisätty värikontrastimittari.
5. Parannettu lomakkeen valvonta
Bootstrap on parantanut lomakkeen hallintaa, syöttöryhmiä ja paljon muuta.
Versiossa 4 Bootstrap käytti mukautettuja lomakeohjaimia kunkin selaimen oletusasetusten lisäksi. V5: ssä nämä kaikki on nyt mukautettu. Kaikki valintanapit, valintaruudut, tiedosto, alue ja paljon muuta antavat niille saman ulkoasun ja käyttäytymisen eri selaimissa.
Uudet lomakesäätimet eivät enää sisällä tarpeettomia värikkäitä merkintöjä, vaan keskittyvät vakiomuotoisiin ja loogisiin suunnitteluominaisuuksiin.
6. Bootstrap 5 lisää Utilities -sovellusliittymän
Uusien CSS -kirjastojen, kuten Tailwind CSS: n, jälkeen Bootstrap lisää nyt myös apukirjaston. Bootstrap-tiimi sanoo olevansa iloisia nähdessään, kuinka muut kehittäjät haastavat tavan, jonka olemme rakentaneet verkkoon viimeisen vuosikymmenen aikana.
Apuohjelmat ovat saamassa vauhtia kehitysyhteisössä ja bootstrap -tiimi on ottanut sen huomioon. Tiimi oli aiemmin lisännyt varauksen v4: n apuohjelmiin käyttämällä globaalia $ enable-* luokat. Versiossa 5 ne ovat siirtyneet API -lähestymistapaan ja uuteen kieleen ja syntaksiin Sassissa. Tämä antaa sinulle mahdollisuuden luoda uusia apuohjelmia ja silti poistaa tai muuttaa annettuja oletusasetuksia.
Organisaation parantamiseksi jotkut v4: n apuohjelmat on siirretty Helpers -osioon.
7. Uusi Bootstrap -kuvakekirjasto
Bootstrapilla on nyt oma avoimen lähdekoodin SVG -kuvakekirjasto, jossa on yli 1300 kuvaketta. Se on räätälöity kehyksen osille, mutta voit silti työskennellä niiden kanssa missä tahansa projektissa.
Koska ne ovat SVG -kuvia, ne voivat skaalautua nopeasti ja ne voidaan toteuttaa monin tavoin ja muotoilla myös CSS: llä.
Voit asentaa kuvakkeet käyttämällä merenpinnan yläpuolella:
$ npm i bootstrap-iconsAsenna Bootstrap 5
Voit mennä Bootstrap 5 virallinen lataussivu jos haluat asentaa sen. Jos haluat pysyä ajan tasalla viimeisimmän kehitysversion kanssa, jota voit käyttää merenpinnan yläpuolella vetää sitä:
$ npm i bootstrap@next
Tätä kirjoitettaessa kehys on beta 3 -versiossa. Tämä tarkoittaa, että ohjelmisto on turvallinen käyttää, mutta sitä kehitetään edelleen. Voit vapaasti antaa palautetta tiimille ja antaa tarvittavan panoksen.
Jaa Jaa Tweet Sähköposti Johdanto verkkokomponentteihin ja komponenttipohjaiseen arkkitehtuuriinKatsotaanpa yleisiä verkkokomponentteja ja miksi ne ovat hyödyllisiä.
Lue seuraava Liittyvät aiheet- Ohjelmointi
- Verkkokehitys
- JavaScript
- CSS
Jerome on MakeUseOfin henkilöstökirjoittaja. Hän käsittelee ohjelmointia ja Linuxia käsitteleviä artikkeleita. Hän on myös salausharrastaja ja seuraa aina salausteollisuutta.
Lisää Jerome Davidsoniltatilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
kuinka lisätä suora viiva sanaanKlikkaa tästä tilataksesi