Bootstrap 4 Új és hűvös funkciók

A Bootstrap keretrendszer következő nagy kiadása a sarkon van. Az alfa verzió már letölthető a Bootstrap fejlesztői webhelyéről, és a forráskód is elérhető a Githubon.

A Twitter Bootstrap jelenleg a legnépszerűbb frontend keretrendszer. Lehetővé teszi a fejlesztők számára gyorsan készítsen mobil-első és érzékeny webhelyeket. A Bootstrap lehetővé teszi a szabványos HTML5, a CSS3 és a Javascript frontend trió intelligens használatát. Jelenleg az interneten több mint 6 millió webhelyet használ.

Bár a Bootstrap 4 még mindig a fejlesztési fázisban van (tehát ne használja még egy élő webhelyen), a fejlesztők mesés munkát végeztek. Ebben a hozzászólásban megnézzük az új verziót, amely számos nagyszerű tulajdonságot tartalmaz, amelyek biztosan megtalálhatók a frontend fejlesztés munkafolyamatának egyszerűsítése és javítása.

1. Sass A LESS helyett

Eddig a Bootstrap a LESS-t használja a fő CSS előkészítőjeként, de az új nagy kiadás esetében a stílusszabályokat a Sass-hoz fogják igazítani, ami sokkal népszerűbb a frontend fejlesztők körében, hatalmas hozzájáruló bázisa, általában könnyebb használni és többet kínál lehetőségeket. Hála a nagy teljesítményű Libsass Sass Complier-nek C / C-ben++ A Bootstrap 4 sokkal gyorsabban áll össze mint előtte.

2. Új rácsszint a kisebb képernyőkhöz

A Bootstrap egy kifinomult, érzékeny hálózati rendszerrel rendelkezik, amely lehetővé teszi a fejlesztők számára, hogy különböző nézetablakokkal rendelkező eszközöket célozzanak. A Bootstrap 3 jelenleg négy rácsosztályt tartalmaz az oszlopokhoz, .Col-XS-XX mobiltelefonokhoz, .Col-sm-XX tablettákhoz, .Col-MD-XX asztali számítógépekhez, és .Col-lg-XX nagyobb asztali számítógépekhez. A 4 Bootstrap egy ötödik rendszerrel javítja a hálózati rendszert, amely megkönnyíti a fejlesztők számára célozza a kisebb eszközöket 480px nézetablak szélessége alatt.

Az új rácsosztály a korábbi legkisebb nevet kapta, és a rácsszintek jelenlegi neveit egy fokkal felfelé tolta. A Bootstrap 4-ben a nagy asztali számítógépek a .Col-XL-XX osztályválasztó. Fontos tudni, hogy az új név ellenére nem adtak új osztályt az extra nagyméretű képernyőkhöz, hanem az extra kicsiekhez.

3. Bevezeti a relatív CSS egységeket

A 4 Bootstrap végül megszünteti az Internet Explorer 8 támogatását. Ez tényleg egy okos lépés, mivel lehetővé teszi számukra, hogy megszabaduljanak a bosszantó polifilláktól, és a relatív CSS egységekké alakulnak. A pixelek helyett az új nagy kiadási akarat lesz használja a REM-eket és az EM-eket amely lehetővé teszi reagálni képes tipográfia a Bootstrap oldalakon. Ez növeli az olvashatóságot, és hozzáférhetőbbé teszi a webhelyeket a fogyatékkal élő felhasználók számára.

Ha meg szeretné próbálni, hogyan működnek a relatív egységek az új Bootstrap 4-vel, nézd meg ezt a demót a Codepen-en.

4. Vadonatúj Bootstrap kártya

A fejlesztési csapat úgy döntött, hogy egyesíti a Bootstrap felhasználói felületének néhány korábbi elemeit, így úgy döntöttek, hogy bevezetik a új UI összetevő, a Cards nevű. A kártyák a korábbi kutak, bélyegképek és panelek helyébe lépnek, és a felhasználók számára egyszerűbb munkafolyamatot biztosítanak. Ne aggódj, a kártyák ismerős elemeket fognak tartani, mint például a kutak, bélyegképek és panelek címei, fejlécei és láblécei.

Mivel a kártyák rugalmasabbak lesznek, mint a jelenlegi UI komponensek, nagyobb teret biztosítanak a kreatív megvalósításoknak. Vannak olyan úttörők, akik már elvégeztek kísérleteket a Codepen-nél a Bootstrap kártyákkal. Megnézheti őket, vagy létrehozhat saját kártyákat.

5. Új újraindítási modul

Az új Reboot modul az előző helyébe lép normalize.css reset fájl. Nem árulkodik; éppen ellenkezőleg, több szabályt épít fel rá. A lépés célja az összes általános CSS szelektor és a stílusok visszaállítása a egyetlen, könnyen használható SCSS fájl. Itt megnézheti a forráskódot, ha jobban meg akarja érteni az új modul működését.

Jó tudni, hogy az új alaphelyzetbe állítási stílusok finoman beállítják a doboz-méretezés CSS tulajdonságát border-box a ezért az oldal minden gyermekelem örökölte. Az új stílusszabály rugalmasabbá teszi az elrendezéseket. Ha meg szeretné tapasztalni a különbséget a tartalom-doboz és a szegélydoboz-elrendezés típusai között, nézze meg a CSS-Tricks.com által biztosított hasznos bemutatót (a Bootstrap 4 számára nem készült, csak azt mutatja, hogy a doboz méretezése általában működik).

6. Flexbox támogatás támogatása

A Bootstrap 4 lehetővé teszi a CSS3 Flexbox elrendezésének kihasználását - mivel az Internet Explorer 9 nem támogatja a flexbox modult - a Bootstrap 4 alapértelmezett verziója a folyadékelrendezés megvalósításához használja az úszó és a CSS tulajdonságokat.

A Flexbox könnyen kezelhető elrendezéssel rendelkezik, amely kiválóan használható az érzékeny kialakításban, mivel rugalmas tárolót biztosít, amely vagy bővül vagy zsugorodik, hogy a rendelkezésre álló helyet a legjobb módon töltse ki. Csak akkor használja az opt-in flexbox funkciót, ha Ön nem szükség van az IE9 támogatására.

7. Egyszerűsített változó testreszabás

Az új Bootstrap kiadásban használt Sass változók egyetlen _variables.scss fájlban szerepelnek, ami jelentősen racionalizálja a fejlesztési folyamatot. Nem kell mást tennie, kivéve a beállítások másolását a fájlból egy másikba _custom.scss az alapértelmezett értékek módosításához.

tudsz sok dolgot testre szabhat mint például a színek, a távolságok, a linkstílusok, a tipográfia, az asztalok, a rács töréspontjai és a konténerek, az oszlopszám és a csatorna szélessége, és sok más.

8. Új távközlési segédprogramok

A Bootstrap 3 már számos gyakorlati segédosztályt tartalmaz, mint amilyenek a lebegő vagy a clearfix, de a Bootstrap 4 még többet ad. A új térközosztályok lehetővé teszi a fejlesztők számára, hogy gyorsan megváltoztassák az oldalakat és a margókat.

Az új osztályok szintaxisa meglehetősen egyszerű, például a .m-a-0 osztály egy stílusszabályt linkel beállítja a margókat 0-ra az adott elem minden oldalán (margin-all-0). Míg a margók a m- előtag, a párnák a p- előtagot. A fejlesztési dokumentumokban megnézhetjük az új távközlési osztályokat.

9. Szerszámbillentyűk és Popovers által működtetett popovers

A Bootstrap 4-ben az eszköztippek és a popovers használják a Superherool Tether könyvtárat, egy olyan pozícionáló motort, amely lehetővé teszi egy teljesen elhelyezett elem megtartását egy másik elem mellett ugyanazon az oldalon. Ez eszköztippeket és popoverseket jelent automatikusan elhelyezésre kerül a Bootstrap 4 weboldalakon.

Ne felejtsük el, hogy mivel a Tether egy harmadik fél JavaScript-könyvtára, külön kell tartalmaznia azt a HTML-ben a bootstrap.js fájl előtt.

10. Refactored JavaScript bővítmények

A fejlesztőcsapat az új kibocsátás minden JavaScript-bővítményét az EcmaScript 6-as verziójával átdolgozta. A legújabb specifikációk és a legújabb fejlesztések okos kihasználásával javítani kívánják a frontend tapasztalatait.

Az új Bootstrap 4 más JavaScript fejlesztéseken is átesett, mint például opciótípus ellenőrzése, általános teardown módszerek, és UMD támogatás, amelyek mind együtt dolgoznak, hogy a legnépszerűbb frontend keretrendszer zökkenőmentesen működjön, mint valaha.

Most olvassa el: 10 könnyű alternatíva a Bootstrap & Foundation számára