Bootstrap 3 – A mindenes

Bootstrap 3

Nincs még egy hónapja, hogy megjelent a napjaink legnépszerűbb CSS keretrendszerének, a Bootstrap-nek a legújabb verziója. A korábban Twitter Bootstrap néven ismert projekt nagy segítséget nyújt a webfejlesztőknek, hiszen tartalmaz minden olyan komponenst, amelyet honlapjaink során használunk.

Mi is az a Bootstrap?

Ezt a CSS keretrendszert a Twitternél fejlesztette ki Marc Otto és Jacob Thornton, amit először csak saját használatra szántak. Mivel a projekt a GitHub-on elég nagy népszerűségre kelt és sokan csatlakoztak, már 2011-ben kijött az 1.0-ás publikus verzió és jelenleg is a legkedveltebb projekt ott. A Bootstrap keretrendszert egy olyan library-nek készítették a Twitternél, ami egy egységes képet ad a közösségi oldaluknak. Több olyan HTML-re és CSS-re épülő előre definiált komponenst tartalmaz, amit gyakran használunk honlapjainkon. Ilyenek például a gombok, gombok, űrlapok, menük, tabok, lenyíló menük és még sok-sok hasznos elemet találhatunk a hivatalos honlapon, a getbootstrap.com -on.

Minden eleme jól dokumentált, könnyen értelmezhető és használatával sok időt megspórolhatunk, ha egy új honlapot hozunk létre. Már meglévő rendszerünket, vagy akár csak az adminisztrációs felületet is átírni Bootstrap kompatibilisra, nagyobb kezdeti költségekkel jár, viszont hosszabb távon megéri használni. A mai elvárásoknak megfelelően támogatja a HTML5 újításait, illetve a CSS3 is alapértelmezett a rendszerben. A Bootstrap segítségével természetesen Responsive oldalakat is létrehozhatunk, hiszen támogatja a 12 rácsos megjelenítést.

Hogyan kezdjünk neki?

Három dologra van szükség az elinduláshoz, Bootstrap CSS behúzása, jQuery behúzása és a Bootstrap JS behúzása. Ez a minimális HTML5 alapú kód kezdésnek megteszi:

< !DOCTYPE html>
<html>
  <head>
      <title>Bootstrap 101 Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"/>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

 

 

Érdemes szerintem a CSS és JS forrásokat külső CDN -ről betölteni, hiszen így nem a saját szerverünket terheli le a lekérés és közben a többi forrás fájlunk betöltésével tud foglalkozni a böngésző. A HTML5Shiv -re is biztosan létezik CDN verzió illetve, a respond.min.js csak abban az esetben szükséges, ha responsive sablont használunk és persze szeretnénk, ha IE9 alatt is működnének a HTML5 és CSS3 elemek.

Bootstrap 3 letöltés

CSS

A CSS tulajdonságok segítségével előre definiált tipográfiai elemeket, mint például fejléc szövegeket, listákat, blokkokat jeleníthetünk meg. Nem kell foglalkoznunk táblázatok formázásával sem, hiszen több kész megoldást is nyújtanak a fejlesztők számára. Van szegélyezett táblázat, zebracsíkos lehetőség, a hover effektekre is van megoldás és a különböző típusú, mint például sikeres, vagy hibás sorokat eltérő színnel jeleníthetjük meg. Az űrlap elemeit, vagyis az inputok, checkboxok, rádió gombok és legördülők is kapnak alap formázást, de a gombokra is számtalan lehetőség van. Az alap elemek mellett segéd osztályokat is definiáltak a Bootstrap-ben, ilyen a clearfix és a hasonló osztályok.

Komponenesek

A Bootstrap komponensek között olyan nagyszerű elemeket találunk, amire gyakran szükségünk van honlap építés során. Az egyik legérdekesebb modern technika a Glyphicons nevet viseli a Bootstrap könyvtárában. Gyakorlatilag ez egy font család, aminek karakterei ikonokként jelennek meg. Miért jó ez nekünk? Gondoljunk bele, hogy 10-20-30 ikont használunk egy oldalon, amiket ha külön-külön töltünk be akkor mennyi időt és energiát használunk el. Csinálhatjuk ikonjainkat CSS Sprite technika segítségével, így már egy képen is szerepelhet akár az összes ikonunk, viszont gondoljunk bele, hogy ha egyszer kitaláljuk, hogy legyenek nagyobb, vagy kisebb ikonok. Akkor bizony egy nehéz és unalmas munka előtt állunk, hiszen újra el kell készítenünk a CSS Sprite képfájlunkat. Erre nyújt nagyon jó megoldást a Glyphicons, hiszen mivel betűtípusról van szó, az ikonok méretét könnyen szabályozhatjuk a font-size tulajdonsággal. Ugye milyen nagyszerű? Részletek itt: Bootstrap Glyphicons

Sok hasznos komponens található még a Libraryban, ilyenek a lehulló menük, gomb csoportok, input csoportok, menük, kenyérmorzsák (breadcrumbs), címkék, bélyegképek, boxok, panelek, listák, lapozók és még sok sok hasznos dolog. Ezek az elemek újrahasznosíthatóak és egyszerűségükben rejlik a csodájuk.

Javascript

Használtok füleket, tooltipeket, lenyíló menüket, felugró ablakokat (modal box), slidereket? Természetesen, hiszen ezek egy komolyabb weblap alapjai szoktak lenni és ezek mind előre meg vannak írva a Bootstrap-ben. A Javascript komponensek jQuery-n alapulnak, így ha használni szeretnénk őket, akkor szükségünk van jQuery Library-re is.

Bootstrap példák

Már sokan használják a keretrendszert és sok példát találunk mind frontendre, mind adminisztrációs felületre, aki szeretne egy kis ötletet meríteni, látogassa meg a WrapBootstrap oldalát, ahol nagyon sok elképesztő megvalósítást láthatunk.

Személyre szabás

Ha letöltjük az egész csomagot, bizony olyan dolgokat is letöltünk, amit lehet, hogy nem fogunk használni. Erre is kitaláltak egy jó megoldást, méghozzá azt, hogy személyre szabhatóan lehessen letölteni a Bootstrap-et. Beállíthatjuk milyen komponensekre van szükségünk, de még a színeket is definiálhatjuk előre.

Szerintem a Twitter és most már az a közösség, aki a projekt mögött munkálkodik nagyot alkotott ezzel a keretrendszerrel. A jövő honlapépítése során, mindenképp érdemes meggondolni, hogy beépítjük-e, hiszen nagyon sok munkaidőt meg tudunk spórolni vele. Ha valakinek felkeltettem az érdeklődését, a hivatalos honlapjukon további információkat, részleteket olvashat:

Bootstrap 3 letöltés

Szólj hozzá!

A következő html tagek használata engedélyezett: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>