Bootstrap használata - Alapok

Elég kevés leírás található magyar nyelven a Bootstrap használatáról, így most úgy döntöttem, hogy részben a Bootstrap hivatalos leírásából, részben saját tapasztalatokból, elkezdek egy Bootstrap sorozatot.

Ez nem lesz túlságosan élménygazdag azoknak, akik már ismerik, sőt... Nekik kifejezetten semmit sem fog mondani. De a kezdőknek, és kevésbé angolos "bajtársaknak" remélem, sokat segít.

A Bootstrap

A Bootstrapet eredetileg egy designer és egy programozó készítette a Twittertől. A keretrendszert 2010-ben kezdték el készíteni, azóta mondhatjuk, hogy a világ legnépszerűbb CSS-keretrendszerévé és legnagyobb nyilt forrású projkektévé nőtte ki magát.

@mdo és @fat volt a megálmodója a rendszernek, majd 2011. augusztus 19-én hivatalosan is kiadták. A cikk megírásakor több, mint 12 kiadásnál járunk, két fő verzióval a v2-vel és a v3-mal. A Bootstrap 2 fő újítása a reszponzív layout volt, mely akkor még opcionálisan egy kiegészítő css fájl segítségével volt használható. A Bootstrap 3 teljesen újra lett írva, ebben a verzióban már alapértelmezetten reszponzív layoutot készíthetünk a segítségével.

Bootstrap alapok

Oldalunkon a Bootstrapet többféleképpen is életre tudjuk kelteni.

Csomag letöltése

Ha letöltjük a lefordított /összefésült/ csomagot, akkor kapunk néhány css, js és font filet. A CSS és JS fájloknak megtalálhatjuk már az összefésült forrását /original source/ és a kicsinyített /minified/ verzióját. Éles oldalakon érdemes a .min.* fájlokat használni, mivel a "tömörítés" során a méretük jelentősen csökken.

A fájllista 3.3.5 esetén így néz ki (forrás):

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Bootstrap CDN használata

Ha nem akarunk a forrásban matatni, nem módosítunk benne semmit, akkor érdemes a CDN-t használni. A CDN lényege, hogy hosszabb távon engedélyezi a fájl cachelését, így a böngészőnek nem kell folyamatosan lekérnie a fájlt a szerverről. Másik nagy előny, hogy ha a látogatóink már látogattak meg olyan oldalt, ahol ugyanaz a Bootstrap verzió volt betöltve a CDN-ről, akkor már a mi oldalunknál ezt nem kell megtennie, hiszen a böngésző már előzőleg eltárolta a fájlt a cacheben. Ezzel gyorsabb oldalbetöltést érhetünk el.

A CDN használata baromi egyszerű, csak a következő sorokat kell a HTML oldalunkba /esetleg a templatekbe/ beilleszteni:

A CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

A JS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Emellett még van egy Bootstrap Theme fájl is, ez opcionális:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

Az aktuális verzióhoz tartozó CDN linkeket a Bootstrap CDN-en mindig megtalálhatod. A Legacy fül alatt pedig a régebbi verziók fájljai találhatóak.

Bower, npm, Composer

Bowerben:

$ bower install bootstrap

npmben:

$ npm install bootstrap

Composerben:

$ composer require twbs/bootstrap

Saját verzió összeállítása

Ha pedig csak bizonyos részeire van szükséged a Bootstrapnek, akkor a Bootstrap konfigurátorával saját csomagot állíthatsz össze. Így te mondhatod meg, mi kerüljön a csomagba és mire nincs egyáltalán szükséged.

Ez a megoldás tapasztaltabb fejlesztőknek jó, akik tudják pontosan mit szeretnének használni a Bootstrap csomagjai közül. Amik mellé pipa kerül, benne lesznek a letöltött fájlban. Régebben voltak olyan projektek, amiben csak a Gridre volt szükségem, így összeállítottam egy csak a Gridet tartalmazó egyedi fájlt, kicsit átnevezgettem az osztályokat és már használható is volt a programban.

Minimális HTML template

<!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.5/css/bootstrap.min.css">

        <!-- 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://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- jQuery (fontos a Bootstrap javascriptekhez) -->
        <script src="//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.5/js/bootstrap.min.js"></script>
    </body>
</html>

Szóval ez lesz az alap template a későbbiekben. Erre fogunk építkezni, és ezen keresztül fogom bemutatni a lényegesebb részeket.

A következő részben belecsapunk a lecsóba. Az alap CSS-ről lesz szó.

Megosztás: Hívj meg egy kávéra!