szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:bootstrap|< Bootstrap]]

====== Bootstrap ======

  * **Szerző:** Rékási József
  * Copyright (c) Rékási József, 2018
  * Licenc: GNU Free Documentation License 1.3
  * Web: https://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:
<code html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</code>
Utána jöhetnek a könyvtárak elérési útjai
<code html>
<!-- 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>
</code>

===== 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.
<code html>
<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>
</code>

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:
<code html>
<!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>
</code>
A hozzá tartozó css:
<code 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;
}
</code>
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.
<code html>
<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>
</code>
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.
<code html>
<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>
</code> 
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.
<code html>
<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>
</code>



==== 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:
<code html>
<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>
</code>

És most nézzük az elrejtést:
<code html>
<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>
</code>

==== 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

<html>
<img src="https://szit.hu/lib/exe/fetch.php?media=oktatas:web:front-end_framework:default.png" width="150" height="50" style="border: solid 1px grey">
</html>


primary

<html>
<img src="https://szit.hu/lib/exe/fetch.php?media=oktatas:web:front-end_framework:primary.png" width="150" height="50">
</html>

success

<html>
<img src="https://szit.hu/lib/exe/fetch.php?media=oktatas:web:front-end_framework:success.png" width="150" height="50">
</html>

info

<html>
<img src="https://szit.hu/lib/exe/fetch.php?media=oktatas:web:front-end_framework:info.png" width="150" height="50">
</html>

warning

<html>
<img src="https://szit.hu/lib/exe/fetch.php?media=oktatas:web:front-end_framework:warning.png" width="150" height="50">
</html>

danger

{{:oktatas:web:front-end_framework:danger.png|}}
==== 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.<html><br></html> 
Extra nagy: - btn-lg, normál: - btn, kicsi: - btn-sm, extra kicsi: - btn-xs.<html><br></html> 
A színek: Default, Success, Primary, Info, Danger, Warning.
<code html>

<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>
</code>
<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>

<div>
    <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>
</div>
</html>


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.
<code html>
<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>
</code>
<html>
<div>
	<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>
</html>

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

<code html>
<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>
</code>

<html>
<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>
</html>

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

<code html>
<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>
</code>

<html>
<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>
</html>

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.

<code html>
<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>
</code>

<html>
<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>
</html>

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.

<code html>
<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>
</code>

<html>
<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>
</html>
==== 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.

<code html>
<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>
</code>

Az ikonok teljes listája itt: <html><a href="https://getbootstrap.com/docs/3.3/components/">Ikon lista</a></html>

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

<code html>
<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>
</code>

<html>
<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>
</html>
==== Lista ====

Készíthetünk egyszerű listát a list-unstyled osztály segítségével.
<code html>
<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>
</code>


<html>
<div class="container" style="color: black;">
    <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>
</html>

A listát elrendezhetjük szalagmenű szerűen is. Ehhez a list-inline osztályt kell használnunk.
<code html>
<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>
</code>

<html>
<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>
</html>
==== Form ====


==== Beviteli mező ====


==== Tábla ====


==== Kép ====


==== Navigációs szalag ====