Bootstrap vs Alapítvány vs Bulma vs Semantic vs UIkit

Bootstrap vs Alapítvány vs Bulma vs Semantic vs UIkit

Bootstrap vs Alapítvány vs Bulma vs Semantic vs UIkit
СОДЕРЖАНИЕ
02 июня 2020

Az utóbbi néhány évben a végfelhasználók böngészési szokásai számos eszközre kiterjedtek. Ennek eredményeként a reagáló webdesign elengedhetetlen minden ma kidolgozott webhelyhez. Mindazonáltal minden projekt számára egy reagáló formatervezés létrehozása minden helyről időigényes lehet. Az egyik nagyszerű megoldás, amely megkönnyíti az életét, a CSS keret használata. Egy ilyen keret gondoskodik az ön reagáló tervezési alapelveiről. Ebben az összehasonlításban megnézzük a legjobb CSS-keretrendszereket és megnézzük, melyik a legjobb. Itt van a Bootstrap vs Alapítvány vs Bulma vs Szemantikus vs UIkit.


Ez a bejegyzés útmutatást nyújt a következő CSS-keret kiválasztásához. Feltételezem, hogy alapvető ismerete van a front-end technológiákról és a rugalmas web-tervezési alapelvekről. Mindegyik CSS-keretrendszert teszteljük, hogy lefedjük a Bootstrap vs Alapítvány vs Bulma vs Szemantikus vs UIkit különféle aspektusait. Fedi le az egyes keretek eredetét és legfontosabb jellemzőit. Minden egyes kerethez gyors bevezetési útmutatót is adok neked.

Bootstrap vs Alapítvány vs Bulma vs Semantic vs UIkit

E bejegyzés végén megismerheti az egyes keretrendszerek legfontosabb tulajdonságait és korlátait, és jobban meg tudja határozni, melyik közül a legjobban megfelel az Ön igényeinek. Kezdjük el:

  • Bootstrap #
  • Alapítvány #
  • Bulma #
  • Szemantikai szám
  • UIkit #

bootstrap (Getbootstrap.com)

Bootstrap vs

A Bootstrap egy érzékeny, mobil első CSS keretrendszer, amely webhelyek gyors fejlesztésére szolgál. Ez a lista legnépszerűbb CSS-keretrendszere, több mint 130 ezer csillaggal a GitHub-on. A Bootstrap felhasználásra kész komponenseket tartalmaz, amelyeket HTML, CSS és JavaScript segítségével fejlesztettek ki.

A Bootstrap-t eredetileg a Twitter-ben fejlesztették ki 2011-ben, de végül független projektgé vált. A jelenlegi stabil verzió 4.3. A jelenleg fejlesztés alatt álló Bootstrap 5 felváltja a jQuery használatát vanília JS-lel, leállítja az elavult böngészők támogatását, és megváltoztatja a jelenlegi tesztelési platformot.

A Bootstrap használatához a következőket kell tennie egy új weboldal létrehozásakor:

  • Használja a HTML5 doktípusot
  • Hozzon létre nézetablak metacímkét
  • Importálja a Bootstrap CSS-t a fejcímkéjébe
  • Importáljon szkripteket a jQuery, a Popper.js, majd a bootstrap.min.js sorrendben a Bootstrap JavaScript funkcióinak használatához

Itt van egy kezdősablon.




Ebben az oktatóanyagban az erőforrások CDN által üzemeltetett verzióit (CSS és JS fájlok) használjuk ezekre a keretekre. Itt egy gyors indulás útmutató a Bootstrap-on.

Az erőteljes mobil-első megközelítés mellett jelentős közösségi támogatás áll a keret érettségéért. Sőt, míg a Bootstrap fenntartja a jóváhagyott keretek és készletek választhat, a harmadik féltől származó fejlesztők a Bootstrap számára készleteket és csomagokat kínálnak, amelyeket a projektekbe ugyanolyan könnyen integrálhatnak. Itt található a Bootstrap ingyenes felhasználói felület-készletének választéka. Amellett, hogy először mozgatható, van némi támogatás az érintőképernyőkhöz. Mivel a Bootstrap érett projekt, számos akadálymentességi funkciót támogat.

A Bootstrap legnagyobb hátránya az oldal súlyának növekedése. Noha néhány száz kilobájt nem feltétlenül jelentős egy olyan világban, ahol az átlagos oldalméret körülbelül 2 MB, az a fejlesztőkre vonatkozhat, akik a legnagyobb hatékonyságot célozzák. A jQuery-től való függőség aggodalomra ad okot, bár biztató tudni, hogy a jQuery eltávolítása a Bootstrap 5 ütemtervének része..

Érvek:

  • Első mobil, érzékeny webdesign keretrendszer
  • Jó közösségi támogatás és dokumentáció

�� Hátrányok:

  • Nagy függőségi méret (~ 300KB)
  • Egyes komponensek működése a jQuery-től

A Bootstrap-nek kell választania, ha stabil platformot keres jó támogatási bázissal. Ez a helyes választás, ha nem akar sokat gondolni az alapértelmezett összetevőkre. A Bootstrap tökéletes azok számára, akik agilis környezetben gyorsan megoldják a megoldásokat.

Alapítvány (Foundation.zurb.com)

alapítvány vs

Az Alapítvány, amelyet a Bootstrap egy hónapon belül, 2011-ben adtak elő első alkalommal, nemcsak a weboldalak, hanem az alkalmazások és az e-mailek szintjén is előtér-keretrendszer. Nézzük meg, hogyan állnak össze a Bootstrap vs Alapítvány!

Csakúgy, mint a Twitter Bootstrap, az Alapítvány belső eszközként indult a Zurb Alapítványnál, majd később keretként kiadták. Az Alapítvány forráskódja nyílt forráskódú, hangsúlyt fektetve a mobil először reagáló tervekre. Az Alapítvány hasonló rácsrendszerrel rendelkezik, mint a Bootstrap, 12 oszlop közül lehet választani. Ezenkívül a JavaScript opcionális is!

Az Alapítvány webhelyén történő használatának általános lépései a következők:

  • Töltse le a Alapítványi források
  • Használja a HTML5 doktípusot
  • Adja hozzá az Foundation CSS fájlt a fejcímkébe
  • Tartalmazza a jQuery, az what-input.js és az Alapítvány szkripteit
  • Közvetlenül a testcímke befejezése előtt hívja meg az foundation () függvényt, hogy csatolja az Alapítvány tulajdonságait a különböző DOM elemekhez

Itt van egy gyors indítási sablon:

$ (Document) .foundation ();

Letöltheti egy egyedi építkezés az Alapítvány keretén belül, ha ez megfelel az Ön igényeinek.

Amikor megpróbáljuk összehasonlítani a Bootstrap vs Alapítványt, néhány dolog felmerül. A Bootstrap több támogatást kínál a közösség részéről, egy kicsit könnyebb együtt dolgozni, és számos témát kínál, amelyek közül választhat, amikor megnézed. Az Alapítvány ezzel szemben nagyobb irányítást és szabadságot biztosít az összetevői felett, anélkül, hogy osztályokat kellene hozzáadnia a DOM elemekhez – mivel a tulajdonságok össze vannak kapcsolva az összetevőkkel. Ezenkívül, mivel az Alapítvány néhány éve fejlesztés alatt áll, az is számos akadálymentességi funkciót kínál.

Érvek:

  • Első mobil, érzékeny webdesign-keretrendszer
  • Támogatást nyújt az alkalmazásokhoz és az e-mailekhez

�� Hátrányok:

  • Nagy függőségi méret, mint például a Bootstrap
  • Hatalmas funkciók száma, amelyek eláraszthatják a kezdőket

A Bootstrap vs Alapítvány közötti funkcionalitás nem változik jelentősen, és nem fog veszíteni sokat, ha valamelyik platformot választja. Ennek ellenére valószínűleg menjen az Alapítványhoz, ha nagyobb ellenőrzést szeretne a projekt felett.

Ön is érdekli ezeket a cikkeket:

  • A legjobb szögletes rendszergazdai irányítópult-sablonok

Bulma (Bulma.io)

bulma vs

A Bulma egy nyílt forráskódú, könnyű CSS keret, amely a Flexboxon alapul.

Bár nem egészen a Bootstrap szintjén, a Bulma meglehetősen népszerű projekt a GitHub-on, több mint 35 ezer csillaggal.

A Bulma-t egy mobil-első, reagáló keretrendszerre fejlesztették ki, amelyben a modulációra összpontosítottak.

Annak érdekében, hogy a Bulma felhasználható legyen a projektben, a következő lépéseket kell követnie:

  • Adja hozzá a HTML5 dokumentációt
  • Adjon hozzá egy metacímkét egy reagáló nézetablakhoz
  • Helyezze be a Bulma CSS fájlt a fejcímkéjébe
  • [Opcionális] Adja hozzá a fontawesome szkriptet az ikonok használatához

Itt egy sablon:

Visszatérve a Bootstrap vs Alapítvány vs Bulma témájú vitához, Bulma enyhébb tanulási görbével rendelkezik. A Bulma jelentős különbsége a Bootstrap és az Alapítvány szempontjából az, hogy a CSS-re összpontosítanak, JavaScript-elemek nélkül a keretben. A JavaScript kizárása a keretet is könnyűvé teszi. A hozzáférhetőség szempontjából a Bulma csak részben hozzáférhető, bár a közösség rendszeresen támogatást nyújt.

Érvek:

  • Könnyű, flexbox-alapú keret
  • A moduláris elemek lehetővé teszik a rugalmasságot

�� Hátrányok:

  • Nincsenek JavaScript elemek
  • Korlátozottan támogatja az akadálymentességet

Fejlesztőként a Bulmát kell választania, ha olyan könnyű keretrendszert szeretne használni, amely segít az érzékeny elemek létrehozásában az interneten. Jelentős támogatást élvez a keret, amely segít abban, hogy beragadjon a folyamatba.

Szemantikus (Semantic-ui.com)

szemantikai vs

A Semantic egy CSS keretrendszer, amelynek célja intuitív felhasználói felületek létrehozása.

Ez a keretrendszer nyilvánvalóan használja az osztályneveket, hogy megkönnyítse a tanulási folyamatot. A szemantikai osztályokat az angol nyelv ihlette, hogy összekapcsolják a logikai fogalmakat az osztálynevekkel.

A szemantikus komponenseknek a projektben történő használatához a következő lépéseket kell végrehajtania:

  • Tartalmazza a HTML5 dokumentációt
  • Töltse be a Semantic CSS fájlt
  • Vegye fel a jQuery-t, mielőtt bármilyen JavaScript elemet felhívna
  • Tartalmazza a Semantic szkriptét

Itt egy sablon:

Ha szemantikát hasonlítanánk a Bootstrap vs Alapítvánnyal és a többiekkel, akkor észrevehetjük, hogy az intuitív elnevezési konvenciók ellenére a Semantic elmarad a tanulás bonyolultsága szempontjából. A dokumentáció kiterjedt, de hozzászokik egy kis időbe. Jó az integráció a JavaScript keretrendszerekkel, például az Angular és a React, ami ideálisvá teszi azokat a programokat, amelyek ezen keretek használatát is tartalmazzák..

Érvek:

  • Intuitív osztálynevek
  • Integráció a JavaScript keretrendszerrel

�� Hátrányok:

  • Lehet, hogy nem teljesíti a nagy projektek szükségességét
  • A közösség korlátozott támogatása

A szemantika az a keret, amelynek viszonylag könnyebb a tanulási görbéje, és támogatja a JavaScript keretrendszereit is. Ha követelményei között szerepel a JavaScript használata, akkor feltétlenül fontolóra kell vennie ennek a keretnek a használatát a következő projektben.

UIkit (Getuikit.com)

uikit vs

Az UIkit egy modern, könnyű keret, amely nagy hangsúlyt fektet a modulációra a webes felületek létrehozása érdekében.

Ez egy viszonylag új, nyílt szósz keret, körülbelül 15 ezer csillaggal a GitHubon. Az UIkit segít az érzékeny tervek létrehozásában, az automatikus, folyamatos telepítéssel a BrowserStackon.

Az UIkit-összetevőknek a projektben történő használatához a következő lépéseket kell végrehajtania:

  • Tartalmazza a HTML5 dokumentációt
  • Töltse be az UIkit CSS fájlt
  • Tartalmazza az UIkit funkcióinak és ikonjainak szkripteit

Itt egy sablon:

Az UIkit jelentős számú funkcióval rendelkezik, ha összehasonlítjuk a Bootstrap vs Alapítvány vs Bulma elemmel. Annak ellenére, hogy a JavaScript elemek rendelkeznek, az UIkit nem függ a jQuery-től, ami a végfelhasználó hasznos terhelését csökkenti. Ezekkel a keretekkel határozottan nyakról nyakra áll, mivel a webes alkalmazások gyorsan iterálódó változatai egy agilis fejlesztési környezetben megvalósulnak.

Érvek:

  • Összpontosítson a modularitásra, megkönnyítve ezzel a munkát
  • Az elemek testreszabhatók, és rugalmassághoz vezetnek

�� Hátrányok:

  • Korlátozott dokumentáció és közösségi támogatás

Noha az UIkit sok szabadságot nyújt a struktúra és a szolgáltatások ellenőrzése szempontjából, ez meglehetősen új, ami korlátozott online támogatást eredményez, ha a kerettel kapcsolatos problémákkal szembesül. Ezért csak akkor kell figyelembe vennie ezt a keretet egy projektben, ha a front-end programozási készségei elég fejlett.

Bootstrap vs Alapítvány vs Bulma vs Szemantikus vs UIkit: utolsó gondolatok

Összefoglalva azt, amiről beszéltünk a CSS legfontosabb kereteinek összehasonlításában:

  • Ha olyan problémamentes megoldást szeretne, amely sok támogatást nyújt, keresse fel a Bootstrap szolgáltatást
  • Ha nagyobb szabadságot szeretne kapni az alkotóelemein, próbálja ki az Alapítványt
  • Annak érdekében, hogy könnyedén kiegészítse a projektet, próbáljon ki Bulmát vagy UIkit
  • Ha a webes alkalmazás nehéz JavaScript-keretet használ, akkor a Semantic alkalmazást kell választania

Melyik CSS-keretet használsz 2020-ban? Tudassa velünk az alábbi megjegyzésekben!

Ne felejtsd el csatlakozni a WordPress-webhely felgyorsításának összeomlási tanfolyamához. Néhány egyszerű javítással akár 50-80% -kal csökkentheti a betöltési időt:

Elrendezés, bemutató és szerkesztés: K Karol.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector