A Bootstrap használata - 1. rész
Az előző elképzelésem szerint az eredeti Bootstrap leírást - kicsit kibővítve - szerettem volna feltölteni az oldalra bejegyzésenként. Sokat törtem rajta a fejem, hogy ez jó megoldás-e.
Nem szeretnék csak szimpla magyarosításokat gyártani, ettől kicsit többet akartam kihozni a sorozatból. Így én más szemszögből közelítettem meg a dolgot. Megkértem egy régi barátomat, aki természetesen szeretné elsajátítani a Bootstrap használatát, hogy tegye fel a kérdéseit, ami jelen pillanatban, mint kezdő foglalkoztatja. A bejegyzést a lehető legalapabbra terveztem, szóval ha haladó vagy a témában, nem sok újat fogok mondani.
Csapjunk a lecsóba:
Mi az a Bootstrap?
A Bootstrap egy CSS keretrendszer. Röviden, tömören.
Szóval, a mai világban már lenézzük azokat a weboldalakat, amik a 90-es évek design sémáira épülnek. A weblapok folyamatos fejlődésben vannak, alkalmazkodva a rohanó életünkhöz. Míg régen a felhasználók ámulatba ejtése volt a cél, /csillogó gifek, profin összerakott flash animációk vagy teljes flash oldalak/ mára ez teljesen megváltozott. Ma már annyi információ terjeng az interneten, hogy az emberek gyorsan és egyszerűen szeretnék megszerezni azt, ami számukra fontos. Könnyen kezelhető weboldalakra van szükségük, melyeken az információ egyből megtalálható.
Ma már a legtöbb ember rendelkezik okos kütyükkel, /telefon, tablet/ melyeket folyamatosan használnak az információk megszerzéséhez. Régebben ezt mindig úgy oldottuk meg, hogy megcsináltuk az oldalak böngészős verzióját, majd fogtuk és az egészet lebutítva elkészítettük a mobilbarát verziót, amit legtöbbször más aldomain alatt lehetett elérni /pl: m.leoamros.com/. Sokkal több munka volt karbantartani és fejleszteni is az ilyen oldalakat. Erre egy nagyon profi megoldást nyújt az úgynevezett mobile-first design kialakítás.
Szóval a Bootstrap azért született meg, hogy a sitebuilderek egyetlen template kialakításával mindenki igényét ki tudják elégíteni. Egyetlen template és egyetlen domain is elegendő, hogy a weboldalunk megjelenjen minden platformon. Emellett egységesíti a megjelenést és a használatot is. Például ma már nem gondolkodunk el, hogy mobilon mit jelent a 3 vizszíntes csík a gombon, mert tudjuk, hogy az a menü.
Összegezve a Bootstrap egy olyan keretrendszer, mellyel könnyen és egyszerűen - minden platformon - jól működő, a mai trendeket követő, letisztult és könnyen kezelhető weboldalakat hozhatunk létre. Persze a használata nem kötelező, de ajánlott. A project mögött nem egy cég áll, hanem egy teljes közösség, akik a trendeket követve, a böngészők fejlődését szem előtt tartva, folyamatosan karbantartják és fejlesztik a keretrendszert. Ennek egyik előnye, hogy gyorsabban tesztelik az elérhető platformokon és javítják az esetleges hibákat, másik előnye, hogy a közösség tagjai is ugyanúgy használják az oldalaik építésére, így biztosak lehetünk benne, hogy mindig a legfrissebb megoldásokat találhatjuk a keretrendszerben.
Hogyan álljak hozzá az elkészítéséhez? Mi kell hozzá?
Mint általában mindennek, így a Bootstrapnek is megvannak az előfeltételei. Ahhoz, hogy használni tudd, először is otthon kell lenned a HTML-ben. Tehát ismerned kell a weblapkszítés alapjait.
Mivel a Bootstrap alapértelmezetten eléggé letisztult /mondjuk úgy fapados/, így szükséged lehet a bővítésére, ha tényleg ütős oldalakat akarsz készíteni. A bővítéshez természetesen már CSS tudás is szükséges. Szóval az alapfeltétel mindenképp a HTML és CSS alapos ismerete. Emellett persze jó, ha magával a Bootstrap működésével is tisztában vagy, így ha alap szintű az angol tudásod, jó ha ismered a leírását, milyen elemeket tartalmaz, mire lehetsz képes a használatával. Ezeket a következő időszakban megpróbálom majd folyamatosan leírni, így angol tudás nélkül is tudod használni.
Emellett valamilyen fejlesztésre alkalmas program. Ez akár egy Jegyzettömb is lehet, bár azért kicsit növeld az igényeidet és legalább egy Notepad++ legyen a gépen, mielőtt belekezdesz a fejlesztésbe. Emellett hasznos, de nem feltétel valamilyen szerver, mivel így már közel úgy tudod letesztelni, mintha a weben lenne. Ehhez talán Windows alatt a "legjobb" - én jobban szerettem - az EasyPHP, de vannak akiknek jobban bejön a WAMP szerver. Szerver nélkül is tesztelheted az oldalt, amit készítesz, mivel a böngészők meg tudják nyitni a HTML fájlokat a merevlemezről is. Így elérkeztem a következő fontos programhoz, valamilyen modern böngészőre is szükséged lesz. Azt tudni kell a Bootstrapről, hogy csak 8-as verzió fölött támogatja az Internet Explorert, így minimum egy IE8 szükséges. Persze bármilyen más modern böngésző megteszi.
Összegezve: ahhoz, hogy magát a Bootstrap működését megértsd elég csak a HTML-t ismerned, a CSS tudás csak másodlagos. Rengeteg olyan weboldalt láttam, ami az alap CSS-t használja és baromi ötletesen volt megcsinálva. Mivel neked most a célod főleg a keretrendszer működésének megértése, így legalább a HTML-lel jó barátoknak kell lennetek. Egy modernebb weboldal elkészítéséhez már bővíteni kell a jelenlegi CSS-t, így oda már a CSS3 alapjaival is teljesen tisztában kell lenned. Szóval míg belerázódsz a használatába, érdemes megtanulni a CSS-t is használni.
Hogyan kell integrálni a keretrendszert?
Először is kell hozzá egy alap HTML struktúra.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- A fenti 3 meta tagnek mindig elsőként kell jönnie, és csak utána a többi -->
<title>Bootstrap alap Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim és Respond.js a HTML5 elemek és media query-k IE8 támogatásához -->
<!-- Figyelem: a Respond.js nem működik, ha a böngészőben fileként nyitod meg az oldalt. pl: file:// -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- IDE JÖN A TARTALOM -->
<h1>Hello, world!</h1>
<!-- TARTALMI RÉSZ VÉGE -->
<!-- A Javascript fájlokat érdemes mindig a kódunk legvégére írni -->
<!-- jQuery (fontos a Bootstrap javascriptekhez) -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Végül jöhet a javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>Felvetődhet a kérdés, miért használunk CDN (Content Delivery Network) linkeket. Erre nagyon egyszerű a válasz. A CDN lényege, hogy mindig azonos linken keresztül szolgálja ki a kért tartalmat, ezáltal a böngésző el tudja tárolni hosszabb időre is, így a letárolt tartalmat fogja lekérdezni és újra feldolgozni a felhasználóink számítógépén. Ennek nagyszerű előnye, hogy ha már a felhasználónk járt előzőleg olyan oldalon, mely ugyanezt a Bootstrapet vagy jQueryt használta, akkor az ő gépén már ezeknek megvan a letárolt változata, így nem kell újra letöltenie. Szóval nem kötelező, de ajánlatos a CDN linkek használata.
A fenti kód használatával már minden megvan ahhoz, hogy a Bootstrapet használatba vehessük. A JavaScript kód 99%-ban önműködő, tehát ha egy olyan elemet illesztesz az oldalba, ami a Bootstrap Javascriptjét használja, szinte semmi dolgod nincs, mivel automatikusan lefuttatja a megfelelő kódot. Ez nekem és neked is nagyszerű hír jelen pillanatban, hiszen most a BS alapjait vesszük át, így nem kell a Javascripttel is külön foglalkozni. Persze a későbbiekben ebbe is bele fogunk nézni, de most haladjunk sorban.
Szerintem a témát a mai napra le is zárom. A következő bejegyzésben már foglalkozni fogunk a rácshálóval (grid) és a rácsháló használatával, hogyan tudsz egy weboldalon belül mobilra, tabletre és monitorra is tervezni egyetlen HTML fájl használatával.
Feltettem egy ZIP fájlban a fenti kódrészletet, ebből fogunk dolgozni a későbbiekben.