„Bootstrap 4“ „New & Cool“ funkcijos jums patiks

Kitas pagrindinis „Bootstrap“ sistemos išleidimas yra už kampo. „Alpha“ versiją jau galima atsisiųsti iš „Bootstrap“ kūrimo svetainės, o šaltinis taip pat yra „Github“.

„Twitter“ „Bootstrap“ šiuo metu yra populiariausia „frontend“ sistema. Tai leidžia kūrėjams greitai kurti mobiliuosius ir pirmuosius tinklus. „Bootstrap“ leidžia protingai naudoti standartinį HTML5, „CSS3“ ir „Javascript Frontend Trio“. Šiuo metu ją naudoja daugiau nei 6 milijonai svetainių internete.

Nors „Bootstrap 4“ vis dar yra kūrimo etape (taigi dar nenaudokite jos tiesioginėje svetainėje), kūrėjai atliko nuostabų darbą. Šiame pranešime pažvelgsime į naują versiją, kurioje bus daug puikių funkcijų supaprastinti ir tobulinti „frontend“ kūrimo darbo eigą.

1. Sass Vietoj LESS

Iki šiol „Bootstrap“ naudojo „LESS“ kaip pagrindinį „CSS“ paruošimo įrankį, tačiau naujosios didelės versijos atveju stiliaus taisyklės bus pritaikytos „Sass“, kuri yra daug populiaresnė tarp „frontend“ kūrėjų, turi didžiulį duomenų bazę, paprastai lengviau naudoti ir siūlo daugiau galimybės. Dėka galingo Libsass Sass Complier, parašyto C / C++ „Bootstrap 4“ sukompiliuos daug greičiau nei anksčiau.

2. Naujasis tinklelis mažesniems ekranams

„Bootstrap“ turi sudėtingą reaguojančią tinklo sistemą, kuri leidžia programuotojams nukreipti įrenginius su skirtingomis peržiūros sritimis. Šiuo metu „Bootstrap 3“ yra 4 stulpelių tinklelio klasės, .col-xs-XX mobiliesiems telefonams, .col-sm-XX tablečių, .col-md-XX staliniams kompiuteriams ir .col-lg-XX didesniems staliniams kompiuteriams. „Bootstrap 4“ pagerins tinklo sistemą su penktuoju, kuris palengvins kūrėjus nukreipti į mažesnius įrenginius, kurių peržiūros plotis yra 480px.

Naujasis tinklelio klasė paėmė ankstesnio mažiausio pavadinimo pavadinimą, o dabartiniai tinklinių sluoksnių pavadinimai vienu žingsniu pakėlė į viršų. Bootstrap 4 dideliuose staliniuose kompiuteriuose bus naudojamas .col-xl-XX klasės selektorius. Svarbu žinoti, kad, nepaisant naujo pavadinimo, jie nepridėjo naujos klasės ypač dideliems ekranams, bet papildomiems mažiems.

3. Pristato santykinius CSS vienetus

„Bootstrap 4“ galiausiai sumažina „Internet Explorer 8“ palaikymą. Tai tikrai protingas žingsnis, nes leidžia jiems atsikratyti baisių polifilų ir konvertuoti į santykinius CSS vienetus. Vietoj pikselių, nauja didelė išleidimo valia naudoti „REMs“ ir „EM“ tai leidžia įgyvendinti atsakingą tipografiją „Bootstrap“ svetainėse. Tai taip pat padidins skaitomumą ir padarys svetaines prieinamesnes neįgaliems vartotojams.

Jei norite išbandyti, kaip santykiniai vienetai dirba su naujuoju „Bootstrap 4“, patikrinkite šį demonstraciją „Codepen“.

4. Naujos „Bootstrap“ kortelės

Vystymo komanda nusprendė suvienodinti kai kuriuos ankstesnius „Bootstrap“ vartotojo sąsajos elementus, todėl nusprendė įvesti a naujas UI komponentas, vadinamas kortelėmis. Kortelės pakeis buvusius gręžinius, miniatiūras ir skydus ir suteiks vartotojams paprastesnę darbo eigą. Nesijaudinkite, kortelės išlaikys pažįstamus elementus, tokius kaip antraštės, antraštės ir kojelių, miniatiūrų ir plokščių poraštės.

Kadangi kortelės bus lankstesnės nei dabartiniai UI komponentai, jie leis sukurti didesnę erdvę kūrybiniams diegimams. Yra keletas pionierių, kurie jau atliko „Codepen“ eksperimentus su „Bootstrap“ kortelėmis. Galite juos patikrinti arba sukurti savo korteles.

5. Naujas „Reboot Module“

Naujasis „Reboot“ modulis pakeičia ankstesnį normalize.css iš naujo nustatyti failą. Tai nepadaro; priešingai, jame yra daugiau taisyklių. Perkėlimo tikslas buvo įtraukti visus bendruosius CSS selektorius ir atkurti stilius a vienas, paprastas naudoti SCSS failas. Jei norite geriau suprasti, kaip veikia naujas modulis, čia galite pažiūrėti šaltinio kodą.

Gerai žinoti, kad nauji atstatymo stiliai sumaniai nustatė langelio dydžio CSS savybę pasienio dėžutė ant elementas, kurį paveldi kiekvienas puslapio elementas. Nauja stiliaus taisyklė leidžia geriau reaguoti į išdėstymą. Jei norite patirti skirtumą tarp turinio dėžutės ir pasienio dėžutės išdėstymo tipų, pažiūrėkite į šį patogų demonstraciją, pateiktą CSS-Tricks.com (jis nebuvo sukurtas „Bootstrap 4“, jis tik parodo, kaip dėžės dydis paprastai veikia).

6. „Flexbox“ palaikymas

„Bootstrap 4“ leidžia naudoti „CSS3“ „Flexbox“ išdėstymo sverto efektą, tačiau, kadangi „Internet Explorer 9“ nepalaiko „flexbox“ modulio - numatytoji „Bootstrap 4“ versija naudoja plūdę ir rodyti CSS savybes, kad būtų įdiegtas skysčio išdėstymas.

„Flexbox“ turi lengvai naudojamą išdėstymą, kuris gali būti puikiai panaudotas reaguojant į dizainą, nes jis suteikia lankstų konteinerį, kuris arba plečiasi, ar mažėja, kad užpildytų turimą erdvę. Jei naudojate, naudokite tik „opt-in flexbox“ funkciją ne reikia teikti paramą IE9.

7. Supaprastintas kintamasis pritaikymas

Visi „Sass“ kintamieji, naudojami naujoje „Bootstrap“ versijoje, yra įtraukti į vieną failą, vadinamą _variables.scss, kuris žymiai supaprastins kūrimo procesą. Jūs neturite nieko kito, išskyrus tai, kad nukopijuosite nustatymus iš šio failo į kitą _custom.scss pakeisti numatytuosius parametrus.

Tu gali pritaikyti daugelį dalykų pvz., spalvos, tarpai, nuorodų stiliai, tipografija, lentelės, tinklelio taškai ir talpyklos, stulpelių skaičius ir latakų plotis, ir daugelis kitų.

8. Naujos erdvės, skirtos naudojimui

„Bootstrap 3“ jau turi daug praktinių naudingumo klasių, pvz., Keičiant plūduriuojančią arba aiškiąją dalį, tačiau „Bootstrap 4“ prideda dar daugiau. The naujos tarpo klasės leisti programuotojams greitai pakeisti savo svetainėse esančius padėklus ir paraštes.

Naujų klasių sintaksė yra gana paprasta, pavyzdžiui, pridedant .m-a-0 klasė susieja stiliaus taisyklę nustato skirtumus į 0 visuose nurodyto elemento kraštuose (margin-all-0). Nors maržos naudojamos m- prefiksas, paddings yra suformuotas su p- priešdėlis. Plėtros dokumentuose galite pažvelgti į visas naujas tarpines naudingumo klases.

9. Tooltips ir Popovers Powered by Tether

„Bootstrap“ 4 įrankių žinutėse ir „popovers“ naudoja „SuperTool Tether“ biblioteką, padėties nustatymo variklį, kuris leidžia išlaikyti visiškai pozicionuotą elementą šalia kito elemento tame pačiame puslapyje. Tai reiškia įrankių patarimus ir „popovers“ bus automatiškai įdėta tinkamai „Bootstrap 4“ svetainėse.

Nepamirškite, kad kaip „Tether“ yra trečiosios šalies „JavaScript“ biblioteka, ją reikia atskirai įtraukti į HTML prieš „bootstrap.js“ failą.

10. Atnaujinti „JavaScript“ papildiniai

Plėtros komanda atnaujino kiekvieną „JavaScript“ papildinį naujam leidimui naudodama „EcmaScript 6“. Išmaniai naudojant naujausias specifikacijas ir naujausius patobulinimus, jie ketina patobulinti „frontend“ patirtį.

Naujasis „Bootstrap 4“ taip pat buvo atliktas naudojant kitus „JavaScript“ patobulinimus, pvz parinkties tipo patikrinimas, bendrieji teardown metodai, ir UMD palaikymas, kad visi visi dirbtų kartu, kad populiariausia „frontend“ sistema veiktų sklandžiau nei bet kada anksčiau.

Dabar perskaitykite: 10 lengvų alternatyvų „Bootstrap & Foundation“