Bootstrap bemutató

-

A Bootstrap napjaink legnépszerűbb front-end keretrendszere, amit GitHub elsőbbsége jól bizonyít! Kezes eszköz a fejlesztés során!

Napjainkban a Bootstrap-hoz hasonló eszközökből rengeteget találhatunk rövid keresgélés után. A legnépszerűbb vetélytárs a Zurb által fejlesztett Foundation. Ezek a rendszerek általában nagyon hasonlóak – már amennyiben framework-ként kerülnek bemutatásra, akadhatnak kisebb egységeket megcélzó megoldások is -, megegyeznek az egyes egységek, valamint bővítmények.

A keretrendszerek használata egész sok vitát gerjeszt, ami néhol elég fekete-fehérnek tűnik, azonban úgy gondolom, hogy ezt a témát nem lehet így szemlélni. Vannak esetek, amikor egy keretrendszer nem a legjobb megoldás és fordítva.

Ebben az írásban a Bootstrap funkcióit nem szeretném teljes egészében bemutatni, mivel kiváló dokumentációval rendelkezik, amiben minden kérdésünkre választ kapunk!

Jelenleg a projekt a hármas verziónál tart, ami egy komoly előre lépést jelentett a ketteshez képest. A készítők már javában dolgoznak a négyes verzión!

Mi az a front-end keretrendszer?

A keretrendszer egy előre megírt eszközkészlet, melyet rövid tanulási folyamat után már használhatunk is, hiszen meglévő tudásra alapoz, igaz egyedi módszerrel. A Bootstrap egy előre megírt, multifunkcionálisan alkalmazható eszközkészletet kínál, aminek a segítségével gyorsabban, átláthatóbban és hatékonyabban dolgozhatunk. A HTML struktúra és a CSS tulajdonságok mellett számos JavaScript bővítménnyel is rendelkezik, melyek igen rugalmasak!

Történeti áttekintés

A rendszert Mark Otto és Jacob Thornton fejlesztette ki a Twitternél. Eleinte belső használatra, 2011-ben viszont közzétették Twitter Bootstrap néven, open-source liccenszel. Jelenleg ez a legnépszerűbb projekt GitHub-on. A névből a hármas verziótól kezdve elhagyták a Twitter nevet – közben Mark Otto a GitHub-hoz csatlakozott.

A fellendülés a kettes verzióval érte el az egyik csúcspontot, mivel ettől a verziótól már tervezhettük responsive oldalakat is az eszközzel, igaz még külön stíluslap kellett hozzá.

A hármas verzió számos átalakításon és takarításon esett át. Mobile first szemlélettel építették, tehát a rácsrendszer kis kijelzővel rendelkező készülékektől építkezik felfelé!

Sajnos a szakszerűtlen használatnak lett egy olyan hátránya, hogy a Bootstrap-os oldalakat elkezdték egy kalap alatt kezelni – mint annak idején a Joomla!-t – mivel sokan nem nyúltak az alap témához, így rengeteg oldal akad, amiről első ránézésre megmondhatjuk, hogy Bootstrap-ot használ. Persze, ha megfelelően használjuk bármit felépíthetünk!

A keretrendszer hatalmas előnye a folyamatos fejlesztés! A közösség és a fő fejlesztők mind-mind sok energiát fektetnek abba, hogy a projekt a továbbiakban is sikeres legyen!

Mikor használjuk?

Keretrendszer használata – legyen az mások által készített, vagy saját – rengeteg előnnyel rendelkezik. A döntés mindig a miénk! Használjuk, vagy sem? Sokan úgy gondolják, hogy egy ilyen rendszert használni egyszerű és csak a kezdők teszik, sajnos sok esetben – a kapott eredményeket figyelembe véve – igazuk is van.

Hogy megfelelően tudjuk használni az ilyen típusú rendszereket tisztában kell lennünk azzal, hogy mit nyújtanak. Ismernünk kell a legújabb, webfejlesztéshez kapcsolódó technikákat, valamint elegendő időt kell szánnunk a rendszer tanulására. Bizony ezt is tanulnunk kell! Igaz, az erre fordított idő elenyésző, de ha megfelelő eredményt szeretnénk kapni, akkor elengedhetetlen!

  1. Csapatmunka esetében elengedhetetlen egy olyan rendszer kialakítása, használata, amit mindenki ismer.
  2. Következetes projekt kezelés, megfelelő szabálykörnyezetben dolgozunk ezentúl majd mindig.
  3. A rendszert top fejlesztők készítik. Új, szabványos megoldásokat alkalmaz.
  4. Less, Sass, Stylus preprocessor-ral is használhatjuk!
  5. Részletes, jól használható dokumentáció.
  6. Folyamatos fejlesztés.
  7. Egyszerű téma kezelés.
  8. Rugalmas és jól használható rácsrendszer, Mobile First szemlélettel!
  9. Hasznos JavaScript bővítmények!

Keretrendszerrel történő fejlesztés során alkalmazkodnunk kell a rendszer megoldásaihoz, azonban ez nem jelenti azt, hogy minden esetben követnünk kell! Személy szerint a Bootstrap általi navbar megoldást nem nagyon használom, néhol igen körülményes, így igyekszem kerülni.

Hátrányok

Természetesen hátrányok is akadnak, de ha már letettük a voksunkat a rendszer mellett, akkor ez már elenyésző lehet.

  1. A viták során a leggyakrabban említett hátrány a méret – akárcsak annak idején jQuery esetében. A teljes forrásfájl mérete tömörítve csupán egy nagyobb méretű, tömörített jpg kép mérete. Igaz, hogy nem kell az egész kódot behúznunk a projektünkbe, csupán mindig azt amit használunk (preprocessorok segítségével)!
  2. Ha ezzel készítek oldalt, akkor biztos, hogy hasonló lesz a többi BS oldalhoz! Ez a már említett, szakszerűtlen használat miatt jelent meg.

CSS

Tekintsük át röviden, hogy milyen CSS megoldásokat kínál a rendszer!

Rácsrendszer

A keretrendszer 12 hasábos, Mobile First, folyékony responsive rácsrendszert használ. Három darab töréspontunk van, 768px, 992px és 1200px. Mivel telefonról indulunk felfelé, ezért min-width tulajdonságot kell használnunk.

A felépítés során három szerkezeti egységünk van. A fő befoglaló elemünk a .container osztály kijelölővel ellátott elem lesz, amennyiben szeretnénk, hogy az elrendezésünk teljesen folyékony legyen – vagyis hogy kitöltse a teljes viewport-ot -, akkor használjuk a .container-fluid kijelölőt!

A .container elemen belül sorokat hozhatunk létre a .row osztály kijelölő segítségével. A .row elemen belül a .col-xs- (<768px), .col-sm- (>=768px), .col-md- (>=992px), .col-lg- (>=1200px) prefixek segítségével adhatunk meg oszlopokat. Az egyes .row elemeken belüli oszlopok összegének összesen 12-nek kell lennie!

/* Nagyon kicsi eszközök (telefonok, kevesebb mint 768px) */
/* Nem szükséges külön média lekérdezés, ez az alap Bootstrap-ban. */
/* Kis eszközök (tabletek, 768px és feljebb) */
@media (min-width: @screen-sm-min) { ... }
/* Közepes eszközök (asztali eszközök, 992px és feljebb) */
@media (min-width: @screen-md-min) { ... }
/* Nagy eszközök (nagyobb asztali eszközök, 1200px és feljebb) */
@media (min-width: @screen-lg-min) { ... }

Tipográfia, kódok, táblázat, űrlapok, gombok képek

Szinte az összes alap HTML elemhez találhatunk a rendszerben alap formázást. A hármas verzióban már a grafikai elemek igen minimális formázással rendelkeznek, így a legtöbb esetben jól jöhetnek. A tipográfiai beállítások mindenképp hasznosak lehetnek!

Segédosztályok

A rendszerben rengeteg segédosztályt találunk, olyan általánosakat mint az .pull-left, vagy .pull-right, amik segítségével elemeket úsztathatunk, vagy mint az .sr-only, aminek a segítségével a képernyő felolvasóknak szánt tartalmat rejthetjük el!

Responsive utilities

Fejlesztés során nagyon kezesek lehetnek a responsive segédosztályok, melyek segítségével tetszőlegesen rejthetünk el, vagy jeleníthetünk meg blokkokat, elemeket az alap média lekérdezésektől függően.

Komponensek

Rengeteg komponenst találunk a rendszerben, részletes bemutatásba nem bonyolódnék, böngésszük át!

JavaScript

A Bootstrap JavaScript bővítményeket egyszerűen használhatjuk HTML-en keresztül data-* tulajdonságok segítségével. Ezt funkciót könnyedén ki is kapcsolhatjuk!

A bővítmények között találunk jó pár egyszerűbbet is, mint a Button, mellyel gombokat csoportosíthatjuk, de találunk olyan összetettet is, mint a Modal.

Jó pár hasznos JS bővítményt használhatunk még a rendszernek köszönhetően, böngésszük át őket!

Testreszabás

A testreszabás menü segítségével egyedi build-et hozhatunk létre. Az oldal segítségével egyszerűen módosíthatunk minden Less változó értékén!

Összefoglalás

A Bootstrap egy robosztus, elég komoly fejlesztői eszköz, mely a folyamatos fejlesztésnek köszönhetően fejlett megoldásokat alkalmaz. Ha nem is használjuk, érdemes lehet csupán tanulás szempontjából átböngészni, hiszen rengeteget jó megoldást ismerhetünk meg belőle!

Kapcsolódó tartalom

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.