Utána jöhetnek a könyvtárak elérési útjai
===== 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.
Tartalom
Tartalom
Tartalom
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:
md-3 doboz
md-3 doboz
md-3 doboz
md-3 doboz
sm-6 doboz
sm-6 doboz
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.
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.
4 egységes doboz
8 egységes doboz
8 egységes doboz 4 egységgel eltolva
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.
4 egységes doboz
8 egységes doboz
8 egységes doboz 4 egységgel eltolva
==== 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:
Ez az elem csak 768px alatt látszik.
Ez az elem csak 768px és 992px között látszik
Ez az elem csak 992px és 1200px között látszik
Ez az elem csak 1200px felett látszik
És most nézzük az elrejtést:
Ez az elem 768px alatt nem látszik.
Ez az elem 768px és 992px között nem látszik
Ez az elem 992px és 1200px között nem látszik
Ez az elem 1200px felett nem látszik
==== 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
{{: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.
==== 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.
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 elemre tesszük.
==== Lista ====
Készíthetünk egyszerű listát a list-unstyled osztály segítségével.
- Listaelem 1
- Listaelem 2
- Allistaelem 1
- Allistaelem 2
- Listaelem 3
- Listaelem 4
- 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.
- Listaelem 1
- Listaelem 2
- Listaelem 3
- Listaelem 4
- Listaelem 5
- Listaelem 1
- Listaelem 2
- Listaelem 3
- Listaelem 4
- Listaelem 5
==== Form ====
==== Beviteli mező ====
==== Tábla ====
==== Kép ====
==== Navigációs szalag ====