Bootstrap vs. HTML5 Boilerplate - összehasonlítása

Miben különbözik mind a kettő között? Melyik könnyebb és nehezebb? Melyik gyorsabb és lassabb a munkaidő? Melyiket jobban beválna az ügyfelek viselkedési stratégia? Mik a lehetőségeik vannak?

Hivatalos honlapjai

Boilerplate: https://html5boilerplate.com/
Bootstrap: https://getbootstrap.com/

Alapfogalmai

Bootstrap

A Bootstrap egy ingyenes és nyílt forráskódú CSS-keretrendszer, amely a reszponzív, mobil-első szintű webfejlesztésre irányul. HTML-, CSS- és JavaScript-alapú tervezősablonokat tartalmaz tipográfiához, űrlapokhoz, gombokhoz, navigációhoz és egyéb interfész-összetevőkhöz. (forrás, wiki honlapról: https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework))

Boilerplate

A HTML5 Boilerplate egy HTML-, CSS- és JavaScript-sablon HTML5-webhelyek létrehozásához, több böngészővel kompatibilis. (forrás, wiki honlapról: https://en.wikipedia.org/wiki/HTML5_Boilerplate)

Adatai

Bootstrap

Eredeti szerzők:
Mark Otto, Jacob Thornton
Fejlesztők:
Bootstrap Core Team
Első verzió kiadásának dátuma:
2011. Augusztus 19.
Legfrissebb verziója:
5.3.0. / 2023 Május 30.
Programozási nyelvek:
HTML, CSS, Less (v3), Sass (v4) és JavaScript
Platform:
Web platform

Boilerplate

Fejlesztők:
Paul Irish, Divya Manian, Mathias Bynens, Nicolas Gallagher
Első verzió kiadásának dátuma:
2011. Március 21.
Legfrissebb verziója:
8.0.0 / 2020. Június 4.
Programozási nyelvek:
HTML, CSS, JavaScript

Főbb jellemzők és tulajdonságai

Összehasonlítások:

  • A Boilerplate-nél csak egy kiindulóponttal lehet készíteni egy teljes webhelyig, a Bootstrap-nál pedig összetevőivel semmiből készíthet egy teljes webhelyet
  • A Boilerplate - olyan szerveroldali technológiákkal dolgozik, mint például a PHP, Python, Node.js és React Native
  • A Bootstrap egy kliensoldali megoldás – teljes eszköztár az ügyféloldali webhelyek építéséhez szolgálnak
  • A Boilerplate bármilyen komponenst hozzáadhat, kiegészíthet
  • Ezzel szemben a Bootstrap a használatra kész összetevők teljes készletével rendelkezik, amelyeket most is használhat és testreszabhatja az igényei szerint
  • A Boilerplate-t a Bootstrap-pel kombinálhatja, hogy mindkettőből a legjobb előnyöket élvezhesse és persze igen megoldhatóak
  • Mindkettőnél igen megoldhatóak: létrehozhatja és használhatja saját, személyre szabott sablon mintáját, amikor csak akar és amire van szüksége

Bootstrap:

  • Böngésző kompatibilitás
  • Használatra kész összetevők
  • Reszponzív megoldásokkal rendelkezik
  • CSS Grid rendszer
  • Alapsablon
  • Választható témák
  • Nyomtatási osztályok
  • CSS-összetevők (stílusos HTML-komponensek)
  • Egyedi bootstrap felépítés és letöltés
  • Előre lefordított CSS-, JavaScript- és betűkészlet-elemeket tartalmaz, illetve a LESS-t, a JavaScriptet és a dokumentációt is

Boilerplate:

  • Böngésző kompatibilitás
  • Alapsablon
  • Nyomtatási osztályok
  • CSS – egy könyvtár, amely tartalmazza a normalize.CSS-t és a main.CSS-t
  • doc
  • img
  • js – egy könyvtár, amely tartalmazza a main.js fájlt és a plugins.js fájlt, illetve az almappában találhatók a Modernizr és jQuery könyvtárak is
  • .htaccess
  • 404.html
  • alma érintőképernyős ikonok
  • crossdomain.xml
  • favicon.ico
  • humans.txt
  • index.html
  • robots.txt

Referenciáim, amelyek Bootstrap keretrendszer alatt készültek

Referenciáim, amelyek Boilerplate keretrendszer alatt készültek

Google AMP is maga boilerplate-s módszerek szerint alatt használhatóak:

Összefoglalás

Több mint 10 évvel ezelőtt, azaz 2011 évében először kiadták ezeket, annak idején népszerűbbek voltak. Amikor sikeresen el lettek sajátítva, biztosan megtalálhatja bárhol munkahelyét, mert nagyon sok cégen keresnek a Bootstrap és Boilerplate szakértőket, mint fejlesztőket.

Az én szívem szerint Boilerplate-t választanám volna, mint elsődlegesként, de az ügyfelek gyarapodása miatt végül Bootstrap győztes és elsődleges lett.

Nálam esetén 2011-ben ősszel elkezdtem megismerkedni előszőr a Boilerplate-t, a Bootstrap-ot pedig pár évvel később.

Részletesebb információk mindkettőről

Korábbi minden cikkeim, amelyben szerepel a Bootstrap és a Boilerplate

Bootstrap esetén

Boilerplate esetén

Hasznos linkek

Bootstrap esetén

Boilerplate esetén

Vaultvision féle:

Megjegyzés küldése

0 Megjegyzések