Bootstrap

Szerző: Rékási József
Copyright © Rékási József, 2018
Licenc: GNU Free Documentation License 1.3
Web: http://szit.hu

A Bootstrapről

A Bootstrap nem más mint egy CSS és jQuery nyelveken megírt keretrendszer amely előre definiált utasításokkal és függvényekkel képes a weboldal dizájnját megjeleníteni. A keretrendszerben osztályok vannak definiálva melyeket hozzáadunk a megfelelő HTML elemekhez. A Bootstrapel nagyon gyorsan lehet fejleszteni de az, hogy előre megírt osztályokkal dolgozunk nem jelenti azt, hogy nem szükséges az alap HTML, CSS és jQuery tudás. Sőt ahhoz, hogy változtatásokat tudjunk végrehajtani a kinézeten elég mélyen ismerni kell a CSS és jQuery használatát. A Bootstrap „mobil-first” elvet követ ami azt jelenti, hogy elsődlegesen a mobil eszközökön történő megjelenítésre fejlesztünk reszponzív weboldalakat de természetesen bármilyen eszközön megfelelően jelennek meg az oldalaink.

A Bootstrap használata

Beszerzés

A használathoz szükséges a HTML <head></head> tagek között beemelni a Bootstrap könyvtárak elérési útját. Ezt két féle képpen tudjuk megtenni. Vagy letöltjük a szükséges állományt a https://getbootstrap.com oldalról és utána lokálisan használjuk vagy ugyanezen az oldalon megtalálható CDN -t használjuk.

Használat

Fontos, hogy a <head></head> tagek között az első három utasítás a következő legyen:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Utána jöhetnek a könyvtárak elérési útjai

<!-- itt használhatjuk a megfelelő CDN -eket is -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>

Működés

Elrendezés

A Bootstrap rétegkezelője (layout manager) úgynevezett hálós rendszerben működik, sorok és oszlopok helyezkednek el. Az oszlopok egységekre vannak osztva amelyeknek az összege mindig 12 kell, hogy legyen. Sorokból bármennyi lehet. Az elrendezéshez div elemeket használunk ezeket tehetjük az oszlopokra.

„doboz 1” = 4 egység

„doboz 2” = 4 egység

„doboz 3” = 4 egység

Ez összesen 12 egység.

<div class="container">
    <div class="row">
        <div class="col-md-4">Tartalom</div>
        <div class="col-md-4">Tartalom</div>
        <div class="col-md-4">Tartalom</div>
    </div>
</div>

Az elrendezés kezelő mindig igazítja a dobozok helyzetét a felbontáshoz. A táblázatban a különböző felbontásokhoz használható osztályok láthatóak.

Elrendezések működése
layout system	Telefonok( <768px )	Tabletek( ≥768px )	Asztali gépek( ≤992px )	Asztali gépek( ≤1200px )
Maximum container szélesség	Auto	750px	970px	1170px
Viselkedés	Kitölti a teljes szélességet	Rendeződik az adott felbontáshoz	Rendeződik az adott felbontáshoz	Rendeződik az adott felbontáshoz
Osztály	col-xs-	col-sm-	col-md-	col-lg-

Konkrét megvalósítás:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="balDoboz">md-3 doboz</div>
            </div>
            <div class="col-md-3">
                <div class="balDoboz jobbDoboz">md-3 doboz</div>
            </div>
            <div class="col-md-3">
                <div class="balDoboz">md-3 doboz</div>
            </div>
            <div class="col-md-3">
                <div class="balDoboz jobbDoboz">md-3 doboz</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="balDoboz">sm-6 doboz</div>
            </div>
            <div class="col-sm-6">
                <div class="balDoboz jobbDoboz">sm-6 doboz</div>
            </div>
        </div>
    </div>
</body>
</html>

A hozzá tartozó css:

.container {
    color: black;
}
.row {
    margin-top: 15px;
}
 
.balDoboz {
    padding: 15px;
    font-size: 18px;
    min-height: 200px;
    background: grey;
    margin-bottom: 15px;
}
 
.jobbDoboz {
    background: lightgrey;
}

Ha a böngészőnek változtatjuk a méretét, láthatjuk, hogyan változik az elrendezés. Persze nem kell mindig egyenlő arányban felosztani a teret, lehet több variációt is használni, fontos, hogy a végeredmény mindig 12 legyen. Például 3 - 9, 4 - 8, 12, 6 - 6 arányban is fel lehet osztani.

A felbontás szerinti elrendezéshez meg kell adnunk az adott mérethez tartozó egység méretet.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <div class="balDoboz jobbDoboz"></div>
        </div>
        <div class="col-sm-8 col-md-7">
            <div class="balDoboz"></div>
        </div>
        <div class="col-sm-12 col-md-2">
            <div class="balDoboz jobbDoboz flex"></div>
        </div>
    </div>
</div>

Ha összeadjuk az „sm” egységeit akkor láthatjuk, hogy az jóval több mint 12. A bootstrap ilyenkor hozzáad még egy sort és oda rendezi a túlcsorduló elemeket.

Eltolás

Lehetőségünk van természetesen arra is, hogy ne töltsük fel a sorokat tartalommal teljes szélességben. Ilyenkor az offset osztályt kell használnunk. Ez az osztály eltolja a dobozt jobbra az offset méretével.

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="balDoboz">4 egységes doboz</div>
        </div>
        <div class="col-sm-8">
            <div class="balDoboz jobbDoboz">8 egységes doboz</div>
        </div>
    </div>
    <div class="row">        
        <div class="col-sm-8 col-sm-offset-4">
            <div class="balDoboz">8 egységes doboz 4 egységgel eltolva</div>
        </div>
    </div>
</div>

Látható, hogy a második sorban 4 egységgel jobbra lett tolva a 8 egységes doboz.

Fix és Fluid elrendezés

A fix elrendezés esetén nem töltik ki a teljes oldalt a megjelenített elemek, a fluid elrendezés esetén viszont igen. Ehhez a fluid osztályt kell használnunk.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <div class="balDoboz">4 egységes doboz</div>
        </div>
        <div class="col-sm-8">
            <div class="balDoboz jobbDoboz">8 egységes doboz</div>
        </div>
    </div>
    <div class="row">        
        <div class="col-sm-8 col-sm-offset-4">
            <div class="balDoboz">8 egységes doboz 4 egységgel eltolva</div>
        </div>
    </div>
</div>

Reszponzív elrendezés

Szabályozhatjuk, hogy melyik felbontásban milyen elemek jelenjenek meg. Ezt két módon tehetjük meg. A visible és a hidden osztályokkal. A visible láthatóvá teszi a meghatározott elemet míg a hidden elrejti.

Először nézzük a megjelenítést:

<div class="container">
    <div class="visible-xs">
	<div>Ez az elem csak 768px alatt látszik.</div>
    </div>
    <div class="visible-sm">
	<div>Ez az elem csak 768px és 992px között látszik</div>
    </div>
    <div class="visible-md">
	<div>Ez az elem csak 992px és 1200px között látszik</div>
    </div>
    <div class="visible-lg">
        <div>Ez az elem csak 1200px felett látszik</div>
    </div>
</div>

És most nézzük az elrejtést:

<div class="container">
    <div class="hidden-xs">
	<div>Ez az elem 768px alatt nem látszik.</div>
    </div>
    <div class="hidden-sm">
	<div>Ez az elem 768px és 992px között nem látszik</div>
    </div>
    <div class="hidden-md">
	<div>Ez az elem 992px és 1200px között nem látszik</div>
    </div>
    <div class="hidden-lg">
	<div>Ez az elem 1200px felett nem látszik</div>
    </div>
</div>

Színek

A bootstrap alapból definiál színeket melyek használhatók a legtöbb elemen mint például gombokon, szövegeken, dobozokon. Az alap színek:

default

primary

success

info

warning

danger

Gombok

A gombok használatához a btn osztályt kell használnunk. Először meg kell adni a gomb típusát majd az osztályt és utána a többi paramétert mint például a gomb színét és a méretét.

A példában a bootstrapben definiált méretek és színek láthatók.
Extra nagy: - btn-lg, normál: - btn, kicsi: - btn-sm, extra kicsi: - btn-xs.
A színek: Default, Success, Primary, Info, Danger, Warning.

<div class="container">
	<button type="button" class="btn btn-default btn-lg">Default</button>
	<button type="button" class="btn btn-success btn-lg">Success</button>
	<button type="button" class="btn btn-primary btn-lg">Primary</button>
	<button type="button" class="btn btn-info btn-lg">Info</button>
	<button type="button" class="btn btn-danger btn-lg">Danger</button>
	<button type="button" class="btn btn-warning btn-lg">Warning</button>
 
	<hr>
 
	<button type="button" class="btn btn-default">Default</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-warning">Warning</button>
 
	<hr>
 
	<button type="button" class="btn btn-default btn-sm">Default</button>
	<button type="button" class="btn btn-success btn-sm">Success</button>
	<button type="button" class="btn btn-primary btn-sm">Primary</button>
	<button type="button" class="btn btn-info btn-sm">Info</button>
	<button type="button" class="btn btn-danger btn-sm">Danger</button>
	<button type="button" class="btn btn-warning btn-sm">Warning</button>
 
	<hr>
 
	<button type="button" class="btn btn-default btn-xs">Default</button>
	<button type="button" class="btn btn-success btn-xs">Success</button>
	<button type="button" class="btn btn-primary btn-xs">Primary</button>
	<button type="button" class="btn btn-info btn-xs">Info</button>
	<button type="button" class="btn btn-danger btn-xs">Danger</button>
	<button type="button" class="btn btn-warning btn-xs">Warning</button>
</div>

Lehetőség van az elemek teljes szélességét kitölteni a gombbal, ehhez a btn-block osztályt kell használnunk. Ez az osztály kifeszíti a gombot az őt tartalmazó elem teljes szélességére.

<div class="container">
	<button type="button" class="btn btn-warning btn-lg btn-block">Gomb 1</button>
	<button type="button" class="btn btn-danger btn-lg btn-block">Gomb 2</button>
</div>

Gombcsoportok

Gombcsoportok létrehozásához a btn-group osztályt használjuk.

<div class="btn-group">
    <button type="button" class="btn btn-primary">Gomb 1</button>
    <button type="button" class="btn btn-primary">Gomb 2</button>
    <button type="button" class="btn btn-primary">Gomb 3</button>
    <button type="button" class="btn btn-primary">Gomb 4</button>
</div>

Lehetőség van a gombcsoport vertikális elrendezésére is, ehhez a btn-group-vertical osztályra van szükségünk.

<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">Gomb 1</button>
    <button type="button" class="btn btn-info">Gomb 2</button>
    <button type="button" class="btn btn-info">Gomb 3</button>
    <button type="button" class="btn btn-info">Gomb 4</button>
</div>

Ha azt szeretnénk, hogy a gombcsoportunk kitöltse az őt tartalmazó elem teljes szélességét akkor a gombcsoportot ( btn-group ) bele kell raknunk egy újabb dobozba melyen a btn-group-justified osztályt kell alkalmazni.

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-success">Gomb 1</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success">Gomb 2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success">Gomb 3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-success">Gomb 4</button>
    </div>
</div>

Lehetőség van több gombcsoport létrehozására is egy soron belül. Ilyenkor a btn-group osztályt szintén egy újabb dobozba kell tennünk. Ennek a doboznak az osztálya a btn-toolbar.

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Gomb 1</button>
        <button type="button" class="btn btn-primary">Gomb 2</button>
        <button type="button" class="btn btn-primary">Gomb 3</button>
        <button type="button" class="btn btn-primary">Gomb 4</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-info">Gomb 5</button>
        <button type="button" class="btn btn-info">Gomb 6</button>
        <button type="button" class="btn btn-info">Gomb 7</button>
    </div>
</div>

Ikonok

Az ikonok használatához a glyphicon osztályra van szükségünk. Ez az osztály csak a bootstrap 3-as verzióig támogatott, a 4-es verzióban már nem használhatjuk.

<div class="container">
    <div>
        <div class="glyphicon glyphicon-search"></div>
        <div class="glyphicon glyphicon-play"></div>
        <div class="glyphicon glyphicon-new-window"></div>
    </div>
<div>

Az ikonok teljes listája itt: Ikon lista

Természetesen az ikonokat több elemre is rá lehet tenni, például gombokra. Ilyenkor az ikont <span></span> elemre tesszük.

<div class="container">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Keresés</button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span> Lejátszás</button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-new-window"></span> Új ablak</button>
</div>

Lista

Készíthetünk egyszerű listát a list-unstyled osztály segítségével.

<div class="container">
    <ul class="list-unstyled">
	<li>Listaelem 1</li>
	<li>Listaelem 2
            <ul>
	        <li>Allistaelem 1</li>
	        <li>Allistaelem 2</li>
	    </ul>
	</li>
	<li>Listaelem 3</li>
	<li>Listaelem 4</li>
    </ul>
</div>

Listaelem 1
Listaelem 2
- Allistaelem 1
- Allistaelem 2
Listaelem 3
Listaelem 4

A listát elrendezhetjük szalagmenű szerűen is. Ehhez a list-inline osztályt kell használnunk.

<div class="container">
    <ul class="list-inline">
        <li>Listaelem 1</li>
        <li>Listaelem 2</li>
        <li>Listaelem 3</li>
        <li>Listaelem 4</li>
        <li>Listaelem 5</li>
    </ul>
</div>

Listaelem 1
Listaelem 2
Listaelem 3
Listaelem 4
Listaelem 5

Tartalomjegyzék