7 naujos funkcijos, į kurias reikia atkreipti dėmesį „Bootstrap“ 5

7 naujos funkcijos, į kurias reikia atkreipti dėmesį „Bootstrap“ 5

„Bootstrap 5“ įvyko esminių pakeitimų, įskaitant „Internet Explorer“ (IE) palaikymo sumažėjimą ir priklausomybę nuo „jQuery“. Sukurta „Twitter“, „Bootstrap“ yra populiariausia pasaulyje CSS sistema. Atvirojo kodo vartotojo sąsajos sistema žvelgia į ateities pozicionavimą, ir tai padarė esminių pakeitimų 5 versijoje.





„Bootstrap“ lašas, skirtas IE, tapo pirmuoju žiniatinklio kūrimo įrankiu. Šis žingsnis ateina, nes „Internet Explorer“ rinkos dalis ir toliau mažėja ir sudaro mažiau nei 3% visų žiniatinklio naršyklių.





Skaitykite toliau, kad pamatytumėte, kokie dar „Bootstrap“ patobulinimai ir kaip jie veikia jus.





1. „jQuery“ palaikymas

„Bootstrap“ daugiau nenaudos „jQuery“ bibliotekos. Vietoj to kūrėjų komanda patobulino „JavaScript“ biblioteką, kad šis pakeitimas būtų atliktas. Priklausomybė nuo „jQuery“ nebūtinai buvo blogas dalykas „Bootstrap“.

Tiesą sakant, įvedus „jQuery“ radikaliai pasikeitė „JavaScript“ naudojimo būdas. Tai supaprastino „JavaScript“ rašymo užduotis, kurios kitu atveju būtų užėmusios daug kodo eilučių.



Susijęs: Sužinokite, kaip sukurti elementą „jQuery“

Nepaisant viso to, komanda nusprendė to atsisakyti. Tai naudinga mažesniems šaltinio failams ir ilgesniam puslapio įkėlimo laikui. Tai buvo labai reikalingas pakeitimas, dėl kurio „Bootstrap“ įgis ateičiai palankesnį stilių.





Šaltinio failo dydis tapo lengvesnis 85 KB suspausto „JavaScript“, ir tai yra labai svarbu, nes „Google“ svetainių mobiliesiems įkėlimo laiką laiko reitingo veiksniu.

Jei „Bootstrap 5“ nebereikia naudoti „jQuery“, vis tiek galite jį naudoti, jei norite. Taip pat verta paminėti, kad visi „JavaScript“ papildiniai lieka prieinami.





2. CSS pasirinktinės savybės

Nutraukus „Internet Explorer“ palaikymą, galima naudoti pasirinktines CSS ypatybes (kintamuosius). IE nepalaiko pasirinktinių ypatybių - tai tik viena priežastis, kodėl ji ilgą laiką stabdė žiniatinklio kūrėjus.

Dėl pasirinktinių CSS savybių CSS tampa lankstesnis ir programuojamas. CSS kintamųjų priešdėlis yra -lbs išvengti konflikto su trečiosios šalies CSS.

Yra dviejų tipų kintamieji: šakniniai ir komponentiniai.

Šakninius kintamuosius galima pasiekti visur, kur įkeliamas „Bootstrap CSS“. Šie kintamieji yra _root.scss failą ir yra sudedamų dist failų dalis.

Komponentiniai kintamieji naudojami kaip vietiniai kintamieji tam tikruose komponentuose. Jie padeda išvengti atsitiktinio stilių paveldėjimo komponentuose, pvz., Įdėtose lentelėse.

3. Patobulinta tinklelio sistema

Kadangi atnaujinant iš 3 į 4 versiją kilo problemų, „Bootstrap 5“ šį kartą išlaiko didžiąją sistemos dalį, remdamasi esama sistema, o ne visiškai ją pakeisdama. Kai kurie pakeitimai yra šie:

  • Latakų klasė ( . berniukai ) buvo pakeista į paslaugą ( .g* ) panašiai kaip paraštė ir paminkštinimas
  • Taip pat buvo įtrauktos vertikalių tarpų klasės
  • Stulpeliai nebėra numatyti padėtis: giminaitis

4. Patobulinta dokumentacija

Dokumentai buvo patobulinti, suteikiant daugiau informacijos, ypač kai kalbama apie pritaikymą. Dažna problema buvo ta, kad daugelyje svetainių, kuriose naudojama „Bootstrap“, galite iš karto nustatyti, kad ji naudoja „Bootstrap“. „Bootstrap 5“ dabar turi naują išvaizdą ir geresnį pritaikymą.

Dabar yra daugiau lankstumo pritaikyti temas, kad ne kiekviena svetainė ar programa būtų vienodai panaši. „V4“ teminis puslapis iš tikrųjų buvo išplėstas įtraukiant daugiau turinio ir kodo fragmentų, skirtų kurti ant „Sass“ (populiaraus CSS išankstinio procesoriaus) failų. Pradinį „npm“ projektą taip pat galite rasti „GitHub“ platformoje, kuri yra prieinama kaip šablonų saugykla.

Spalvų paletė taip pat buvo išplėsta 5 versijoje. Išplėstinė integruota spalvų sistema reiškia, kad galite lengvai pritaikyti savo spalvas, nepalikdami kodo bazės. Taip pat buvo nuveikta daugiau, siekiant pagerinti spalvų kontrastą, įskaitant spalvų kontrasto metrikos pridėjimą „Bootstrap“ spalvų dokumentuose.

5. Patobulinta formos kontrolė

„Bootstrap“ patobulino formos valdiklius, įvesties grupes ir dar daugiau.

4 versijoje „Bootstrap“ naudojo pasirinktinius formos valdiklius, be numatytųjų, kuriuos pateikė kiekviena naršyklė. V5 versijoje visi jie yra pritaikyti. Visi radijo mygtukai, žymės langeliai, failas, diapazonas ir dar daugiau, kad skirtingose ​​naršyklėse jie atrodytų vienodai ir atrodytų.

Naujuose formų valdikliuose nebėra nereikalingų spalvingų žymėjimų, o daugiau dėmesio skiriama standartinėms ir logiškoms dizaino savybėms.

6. „Bootstrap 5“ prideda „Utilities“ API

Po naujų CSS bibliotekų, tokių kaip „Tailwind CSS“, „Bootstrap“ dabar taip pat prideda paslaugų biblioteką. „Bootstrap“ komanda sako, kad jie džiaugiasi matydami, kaip kiti kūrėjai meta iššūkį tai, ką mes sukūrėme žiniatinklyje per pastarąjį dešimtmetį.

Komunalinės paslaugos įgauna pagreitį kūrėjų bendruomenėje, o „bootstrap“ komanda tai pastebėjo. Komanda anksčiau pridėjo nuostatas dėl „v4“ paslaugų, naudojančių „global“ $ enable-* klasės. 5 versijoje jie pasikeitė į API metodą ir naują kalbą bei sintaksę „Sass“. Tai suteiks jums galią kurti naujas komunalines paslaugas, tuo pačiu pašalindama arba pakeisdama numatytas nuostatas.

Siekiant pagerinti organizavimą, kai kurios „v4“ programos buvo perkeltos į „Pagalbininkų“ skyrių.

7. Nauja „Bootstrap“ piktogramų biblioteka

„Bootstrap“ dabar gali pasigirti savo atviro kodo SVG piktogramų biblioteka, kurioje yra daugiau nei 1300 piktogramų. Jis yra specialiai sukurtas rėmo komponentams, tačiau vis tiek galite dirbti su jais bet kuriame projekte.

Atsižvelgiant į tai, kad jie yra SVG atvaizdai, jie gali greitai išplėsti mastelį ir gali būti įgyvendinami įvairiais būdais, taip pat sukurti naudojant CSS.

Galite įdiegti piktogramas naudodami virš jūros lygio:

$ npm i bootstrap-icons

Įdiekite „Bootstrap 5“

Galite eiti į Bootstrap 5 oficialus atsisiuntimo puslapis jei norite jį įdiegti. Jei norite neatsilikti nuo naujausio kūrimo leidimo, kurį galite naudoti virš jūros lygio traukti:

$ npm i bootstrap@next

Šio rašymo metu sistema yra Beta 3 versijoje. Tai reiškia, kad programinė įranga yra saugi naudoti, tačiau vis dar kuriama. Nesivaržykite duoti atsiliepimų komandai ir įnešti reikiamą indėlį.

Dalintis Dalintis „Tweet“ Paštu Žiniatinklio komponentų ir komponentų architektūros įvadas

Pažvelkime į įprastus žiniatinklio komponentus ir išsiaiškinkime, kodėl jie naudingi.

Skaityti toliau
Susijusios temos
  • Programavimas
  • Interneto svetainių kūrimas
  • „JavaScript“
  • CSS
Apie autorių Jerome'as Davidsonas(Paskelbti 22 straipsniai)

Džeromas yra „MakeUseOf“ personalo rašytojas. Jis apima straipsnius apie programavimą ir „Linux“. Jis taip pat yra kriptovaliutų entuziastas ir visada stebi kriptografijos pramonę.

Daugiau iš Jerome Davidson

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

CPU veikia 100 windows 7
Norėdami užsiprenumeruoti, spustelėkite čia