Bootstrap 4 New & Cool funktsioonid, mida sa armastad

Bootstrapi raamistiku järgmine suur vabastus on nurga taga. Alfa versiooni saab juba alla laadida Bootstrapi arendusleheküljelt ja lähtekoodi on saadaval ka Githubis.

Twitter Bootstrap on praegu kõige populaarsem esipaneeli raamistik. See võimaldab arendajatel kiiresti ehitada mobiilsed ja vastupidi sobivad veebilehed. Bootstrap võimaldab kasutada standardset HTML5, CSS3 ja Javascript frontend triot. Praegu kasutab seda enam kui 6 miljonit veebisaiti.

Kuigi Bootstrap 4 on ikka arendusetapis (nii et ärge seda veel kasutage), on arendajad teinud suurepärase töö. Selles postituses vaatleme uut versiooni, mis sisaldab palju suurepäraseid omadusi sujuvamaks ja parendamaks esiplaani arendamise töövoogu.

1. Sass LESSi asemel

Seni on Bootstrap kasutanud LESS-i oma peamise CSS-i eelprotsessorina, kuid uue suure väljalaske puhul reeglitakse stiilieeskirjad Sassile, mis on palju populaarsem frontendiarendajate seas, omab tohutut panustajat, üldiselt lihtsam kasutada ja pakub rohkem võimalusi. Tänu võimsale Libsass Sass Complier'ile, mis on kirjutatud C / C-s++ Bootstrap 4 koostab palju kiiremini kui enne.

2. Väiksemate ekraanide uus võrgutasem

Bootstrapil on keeruline reageeriv võrgusüsteem, mis võimaldab arendajatel sihtida erinevaid vaatepiire sisaldavaid seadmeid. Bootstrap 3-l on praegu neli veergu klasside jaoks, .col-xs-XX mobiiltelefonide jaoks, .col-sm-XX tablettide jaoks, .col-md-XX lauaarvutite jaoks ja .col-lg-XX suuremate lauaarvutite jaoks. Bootstrap 4 tõstab võrgusüsteemi viiendikuga, mis lihtsustab arendajaid sihtida väiksemaid seadmeid vaatepunkti 480px laiusega.

Uus võrguklass on võtnud eelmise väikseima nime ja lükanud võrgupiiride praegused nimed ühe sälguga ülespoole. Bootstrap 4-s kasutavad suured lauaarvutid .col-xl-XX klassi valija. Oluline on teada, et vaatamata uuele nimele ei lisanud nad uut klassi ekstra suurte ekraanide jaoks, vaid eriti väikeste ekraanide jaoks.

3. Tutvustab suhtelisi CSS-ühikuid

Bootstrap 4 lõpeb lõpuks Internet Explorer 8 toetusega. See on tõesti tark samm, kuna see võimaldab neil vabaneda ärritavatest polüfillidest ja teisendada suhteliseks CSS-ühikuks. Pikslite asemel on uus suur vabastus kasutage REMs ja EMs see võimaldab rakendada tundlikku tüpograafiat Bootstrap saitidel. See suurendab ka loetavust ja muudab saidid puuetega kasutajatele kättesaadavamaks.

Kui soovite proovida, kuidas suhtelised üksused töötavad uue Bootstrap 4-ga, vaadake seda demot Codepenis.

4. Uued Bootstrap kaardid

Arendusmeeskond otsustas ühendada mõned varasemad Bootstrapi kasutajaliidese elemendid, nii et nad otsustasid a uus kasutajaliidese komponent, mida nimetatakse kaardideks. Kaardid asendavad endised kaevud, pisipildid ja paneelid ning annavad kasutajatele lihtsama töövoo. Ärge muretsege, kaardid hoiavad tuttavaid elemente, nagu näiteks kaevude, pisipiltide ja paneelide pealkirjad, päised ja jalus.

Kuna kaardid on paindlikumad kui praegused kasutajaliidese komponendid, võimaldavad need suuremat ruumi loominguliste rakenduste jaoks. Seal on mõned pioneerid, kes on juba teinud Codepeniga katseid Bootstrap Cards'iga. Võite neid välja vaadata või luua oma kaarte.

5. Uus rebootmoodul

Uus Reboot moodul asendab eelmise normalize.css faili lähtestamine. See ei kraagi seda; vastupidi, see ehitab sellele rohkem reegleid. Liikumise eesmärk oli kaasata kõik üldised CSS-valijad ja lähtestada stiilid a-s üks lihtne, lihtsalt kasutatav SCSS-fail. Kui soovid paremini mõista, kuidas uus moodul töötab, saate siin vaadata lähtekoodi.

On hea teada, et uued lähtestamisstiilid määravad kasti-CSS-i omaduse targalt kasti kohta element, mis seetõttu pärineb iga lapse elemendi poolt. Uus stiili reegel muudab tundlikud paigutused paremini juhitavaks. Kui soovite kogeda erinevust sisupakendi ja piirikasti paigutustüüpide vahel, siis vaadake seda CSS-Tricks.comi pakutavat käepärast demot (seda ei loodud Bootstrap 4 jaoks, vaid see näitab, kuidas kasti suurus üldiselt töötab).

6. Flexboxi toetamine

Bootstrap 4 võimaldab kasutada CSS3 Flexboxi paigutuse võimendust - kuna Internet Explorer 9 ei toeta flexboxi moodulit - Bootstrap 4 vaikimisi versiooni kasutab vedeliku paigutuse rakendamiseks ujuki ja CSS-i omadusi.

Flexboxil on lihtne kasutada kujundus, mida saab suurepäraselt kasutada reageerivas konstruktsioonis, kuna see pakub paindlikku mahutit, mis kas laiendab või kahaneb, et täita olemasolev ruum kõige paremini. Kasutage ainult opt-in flexbox funktsiooni ainult siis, kui olete ära tee vajadus pakkuda toetust IE9-le.

7. Sujuv muutuv kohandamine

Kõik Sass-i muutujad, mida kasutatakse uues Bootstrap-versioonis, sisalduvad ühes failis nimega _variables.scss, mis sujub oluliselt arendamisprotsessi. Sa ei pea midagi muud tegema peale selle, et selle faili failid kopeeritakse teise nimega _custom.scss vaikeväärtuste muutmiseks.

Sa saad kohandada palju asju näiteks värvid, vahekaugus, lingi stiilid, tüpograafia, tabelid, ruudukujulised punktid ja mahutid, veeru number ja vihmapiirkonna laius ning paljud teised.

8. Uued utiliidid klasside jaoks

Bootstrap 3-l on juba palju praktilisi kasuliku klasse, nagu need, mis muudavad ujuvat või puhastust, kuid Bootstrap 4 lisab veelgi rohkem. The uued vaheklassid võimaldada arendajatel kiiresti muuta oma veebisaitidel paddings ja marginaale.

Uute klasside süntaks on üsna lihtne, näiteks lisades .m-a-0 klass seostab stiili reegli määrab 0 elemendi antud elemendi kõikidel külgedel (margin-all-0). Kui marginaale kasutatakse m- eesliide, paddings on kujundatud lk- eesliide. Arendusdokumentides saate tutvuda kõigi uute vahekokkuvõtete klassidega.

9. Tooltips ja popovers Powered by Tether

Bootstrap 4-s kasutavad töövihikud ja popovers ülekoormuse Tetheri raamatukogu, positsioneerimismootorit, mis võimaldab hoida absoluutselt paigutatud elementi teise lehekülje kõrval samal lehel. See tähendab töövahendeid ja popovers paigutatakse automaatselt õigesti Bootstrap 4 veebisaitidel.

Ärge unustage, et kuna Tether on kolmanda osapoole JavaScripti teek, peate selle eraldi enne HTML-faili bootstrap.js faili lisama..

10. Korrigeeritud JavaScript-pluginad

Arendusmeeskond korrigeeris iga Java-plugina uue väljaande jaoks EcmaScript 6-ga. Viimaste spetsifikatsioonide ja kõige uuemate täiustuste nutika kasutamise abil nad kavatsevad parandada frontend-kogemust.

Uus Bootstrap 4 on läbinud ka teisi JavaScripti täiustusi, näiteks optsiooni tüübi kontroll, üldised katkestusmeetodid, ja UMD tugi, mis kõik teevad koostööd, et muuta kõige populaarsem esiplaanide raamistik sujuvamaks kui kunagi varem.

Nüüd loe: 10 kerget alternatiivi Bootstrap & Foundationile