7 novih funkcij, na katere morate biti pozorni v Bootstrapu 5

7 novih funkcij, na katere morate biti pozorni v Bootstrapu 5

Bootstrap 5 je doživel velike spremembe, vključno s padcem podpore za Internet Explorer (IE) in odvisnostjo od jQuery. Bootstrap, ki ga je razvil Twitter, je najbolj priljubljen okvir za CSS na svetu. Okvir odprtokodnega uporabniškega vmesnika si prizadeva za pozicioniranje v prihodnosti, kar je povzročilo revolucionarne spremembe v v5.





Bootstrapov padec za IE je postal prvo orodje za spletni razvoj, ki je to naredil. Do te poteze prihaja, ko se tržni delež Internet Explorerja še naprej zmanjšuje in predstavlja manj kot 3% vseh spletnih brskalnikov.





Preberite, če želite izvedeti, kaj je Bootstrapa še izboljšalo in kako na vas vplivajo.





1. Podpora za jQuery

Bootstrap ne bo več uporabljal knjižnice jQuery. Razvojna skupina je namesto tega izboljšala knjižnico JavaScript. Odvisnost jQuery ni bila nujno slaba stvar v Bootstrapu.

Pravzaprav je uvedba jQueryja korenito spremenila način uporabe JavaScript. Poenostavil je pisne naloge v JavaScript, ki bi sicer zavzele veliko vrstic kode.



Povezano: Naučite se ustvariti element v jQuery

Kljub vsemu se je ekipa odločila, da bo to odpravila. To prinaša prednosti manjših izvornih datotek in daljšega časa nalaganja strani. To je bila prepotrebna sprememba, zaradi katere bo Bootstrap pridobil bolj prijazen slog za prihodnost.





Velikost izvorne datoteke se je zmanjšala za 85 KB zmanjšanega JavaScripta, kar je ključno, saj Google upošteva čas nalaganja strani za spletna mesta kot faktor razvrščanja.

Čeprav uporaba jQuery ni več potrebna v Bootstrapu 5, jo lahko še vedno uporabljate, če želite. Omeniti velja tudi, da so vsi vtičniki JavaScript še vedno na voljo.





2. Lastnosti CSS po meri

Če opustite podporo za Internet Explorer, lahko uporabite lastnosti CSS po meri (spremenljivke). IE ne podpira lastnosti po meri - le en razlog, zakaj je dolgo časa zadrževal spletne razvijalce.

Lastnosti CSS po meri naredijo CSS bolj prilagodljiv in programabilen. Pred spremenljivkami CSS je predpona -bs za preprečitev konflikta s CSS tretjih oseb.

Na voljo sta dve vrsti spremenljivk: korenske in sestavne.

Do korenskih spremenljivk je mogoče dostopati povsod, kjer je naložen Bootstrap CSS. Te spremenljivke se nahajajo v _root.scss datoteke in so del sestavljenih datotek dist.

Komponentne spremenljivke se uporabljajo kot lokalne spremenljivke v posameznih komponentah. Pomagajo pri izogibanju nenamernemu podedovanju slogov v komponentah, kot so ugnezdene tabele.

3. Izboljšan omrežni sistem

Ker je pri nadgradnji z različice 3 na 4 prišlo do nekaterih težav, Bootstrap 5 tokrat zadrži večino sistema in nadgrajuje obstoječi sistem, namesto da ga popolnoma spremeni. Nekatere spremembe so:

  • Razred žlebov ( .dečki ) je bil zamenjan v pripomoček ( .g* ) podobno kot rob in oblazinjenje
  • Vključeni so tudi razredi navpičnih razmikov
  • Stolpci niso več privzeti položaj: relativno

4. Izboljšana dokumentacija

Dokumentacija je bila izboljšana z več informacijami, zlasti pri prilagajanju. Pogosta težava je bila, da bi na številnih spletnih mestih, ki uporabljajo Bootstrap, lahko takoj ugotovili, da uporablja Bootstrap. Bootstrap 5 ima zdaj nov videz in občutek ter boljšo prilagoditev.

Zdaj je več prožnosti pri prilagajanju vaših tem, tako da ni vsako spletno mesto ali aplikacija enaka. Tematska stran v4 je bila pravzaprav razširjena z več vsebine in odrezki kode za nadgradnjo nad datotekami Sass (priljubljeni predprocesor CSS). Začetni projekt npm lahko najdete tudi na platformi GitHub, ki je na voljo kot repozitorij predlog.

Barvna paleta je bila razširjena tudi v različici 5. Razširjen vgrajen barvni sistem pomeni, da lahko preprosto oblikujete barvanje, ne da bi morali zapustiti kodno bazo. Več je bilo opravljenega tudi za izboljšanje barvnega kontrasta, vključno z dodajanjem meritev barvnega kontrasta v barvnih dokumentih Bootstrap.

5. Izboljšani nadzor obrazcev

Bootstrap je izboljšal kontrole obrazcev, skupine vnosov in drugo.

V v4 je Bootstrap poleg privzetih nastavitev vsakega brskalnika uporabljal še kontrolnike obrazcev po meri. V v5 so vsi zdaj prilagojeni. Vsi izbirni gumbi, potrditvena polja, datoteke, obseg in drugo za enak videz in obnašanje v različnih brskalnikih.

Novi kontrolniki obrazcev ne vsebujejo več nepotrebnih pisanih oznak, temveč se osredotočajo na standardne in logične funkcije oblikovanja.

6. Bootstrap 5 dodaja pripomočke API

Po novih knjižnicah CSS, kot je Tailwind CSS, Bootstrap zdaj dodaja tudi knjižnico pripomočkov. Ekipa za zagon pravi, da so veseli, ko vidijo, kako drugi razvijalci izpodbijajo način, kako smo v zadnjem desetletju plus zgradili na spletu.

Pripomočki v razvojni skupnosti dobivajo zagon in zagonska ekipa je to opazila. Ekipa je prej dodala določbe za pripomočke v v4 z uporabo global $ enable-* razredov. V v5 so spremenili pristop API in nov jezik in sintakso v Sass. Tako boste lahko ustvarili nove pripomočke, hkrati pa boste lahko odstranili ali spremenili dane privzete vrednosti.

Zaradi boljše organizacije so bili nekateri pripomočki v v4 premaknjeni v razdelek Pomočniki.

7. Nova knjižnica ikon Bootstrap

Bootstrap se zdaj ponaša z lastno odprtokodno knjižnico ikon SVG z več kot 1.300 ikonami. Narejen je po meri za komponente ogrodja, vendar lahko z njimi še vedno delate pri katerem koli projektu.

Glede na to, da gre za slike SVG, jih je mogoče hitro povečati in jih je mogoče implementirati na različne načine ter oblikovati tudi s CSS.

Ikone lahko namestite z uporabo nad morsko gladino:

$ npm i bootstrap-icons

Namestite Bootstrap 5

Lahko greš na Uradna stran za prenos Bootstrap 5 če ga želite namestiti. Če želite biti v koraku z najnovejšo razvojno različico, jo lahko uporabite nad morsko gladino da ga potegnem:

$ npm i bootstrap@next

V času pisanja je bil okvir v različici Beta 3. To pomeni, da je programska oprema varna za uporabo, vendar se še razvija. Ekipi lahko posredujete povratne informacije in prispevate kakršen koli potreben prispevek.

Deliti Deliti Cvrkutati E-naslov Uvod v spletne komponente in arhitekturo, ki temelji na komponentah

Oglejmo si pogoste spletne komponente in poglejmo, zakaj so uporabne.

Preberite Naprej
Sorodne teme
  • Programiranje
  • Spletni razvoj
  • JavaScript
  • CSS
O avtorju Jerome Davidson(22 objavljenih člankov)

Jerome je osebni pisatelj pri MakeUseOf. Zajema članke o programiranju in Linuxu. Je tudi navdušenec nad kripto kripto in vedno spremlja kripto industrijo.

Več od Jeroma Davidsona

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

zakaj imam samo 2 snapchat filtra
Kliknite tukaj, če se želite naročiti