Bootstrap keretrendszer bemutatása

A legegyszerűbb CSS keretrendszer a Bootstrap. Rengeteg programnyelvnek, könyvtárnak (library) és keretrendszernek (framework) nagyon jól érthető és kereshető dokumentációja van, így nem kell rengeteg információt a fejedben tartanod. Ehelyett könnyen és gyorsan ki tudod keresni, hogyan is működik az a funkció, amit használni szeretnél. A Bootstrap esetében is így van, úgyhogy ha bármikor elakadsz, használd bátran a dokumentációt: getbootstrap.com.

Amellett, hogy megmaradnak a Bootstrap által beállított megjelenési szabályok, bármit felülírhatsz. A CSS szabályok öröklődéséről egy másik leckében tanulunk, most elég annyi, hogy ha itt megadsz valamilyen szabályt, az – a legtöbb esetben – hozzáadódik a meglévő szabályokhoz, és konfliktus esetén felülírja a Bootstrap CSS-t.

A Bootstrap keretrendszer az ún. “mobile first” (elsősorban mobilra) filozófia alapján készült; ökölszabályként, ha alkalmazod a Bootstrap megjelenítési logikáját (a rácsrendszerét, amiről nemsokára tanulunk, és a különböző class-okat), akkor jó eséllyel jelenik meg a weblapod különösebb erőfeszítés nélkül esztétikusan a különböző eszközök képernyőjén.

A Bootstrap rácsrendszerének segítségével nagyon könnyű feladat reszponzív oldalakat készíteni.

Ebben a modulban létrehozzuk egy weblap alapvető elrendezését, ami attól függően fog változni, hogy milyen méretű eszközről nézik.

Készíts egy új bin-t a JSBin-ben (“New bin” gomb bal felül). Kattints az Add Librarymenüpontra a bal felső sarokban, és keresd ki a Bootstrap latest opciót. Ahhoz, hogy az oldalad esztétikusan nézzen ki, a Bootstrap konténereket használ (“container”). Két különböző van belőlük, a .container és a .container-fluid. A.container mérete az oldal méretétől függ, de mindig fix szélességű, tehát az oldalsó “üres” sávok mérete változik.

@media (min-width: 1200px) .container { width: 1170px; }

Ez a szabály azt mondja meg a böngészőnek, hogy ha a képernyő legalább 1200 pixel széles (min-width: 1200px), akkor a .container legyen fixen 1170 pixel széles. Ha átméretezed az ablakot, láthatod, hogy mérettől függően éppen mi az aktuális szabály.

A .container-fluid minden egyes pillanatban a böngészőablak méretéhez igazodik dinamikusan, tehát az oldalsó “üres” rész mérete állandó, és a konténer mérete változik:

.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

Rácsok
A Bootstrap a könnyű pozícionáláshoz egy rácsrendszert (“grid”) használ. Két alapvető dimenzió van benne, a sor (.row) és az oszlop (.col). A sorok adják meg a függőleges elhelyezkedés egységeit, az oszlopok pedig a vízszintes pozíciókat.

A 12 lesz a mágikus szám, amit meg kell jegyezned. Az egyes sorok 12 oszlopból állnak.

A rácsrendszernek még egy szuper tulajdonsága, hogy egymásba ágyazható. Azaz bármelyik sorban és oszlopban kezdhetsz egy újabb sort és oszlopokat.

Kis segítségként adj színes keretet a dobozoknak: menj végig a div-eken egyesével, és a class=“valami” mellé írd be, hogy style="border:1px solid red;", pl. <div class="row" style="border:1px solid red;">, így láthatóvá válik, hogy hol a div határa.

Offset
Az oszlopokat “üres” oszlopokkal el is lehet tolni, így akkor is 12 egységet töltenek ki virtuálisan, ha a valóságban nem.

Ezt a .col-*-offset-** class-szal tudod megadni, ahol a * a törési pontot jelöli, a ** pedig a virtuális üres oszlop nagyságát.

<div class=“col-xs-5 col-xs-offset-3 col-md-6 col-md-offset-2“>…</div>

Ez a <div> okostelefonokon és tableteken 5 egység széles, és 3 egységgel van jobbra tolva a képernyőn, tabletekknél nagyobb eszközökön 6 egység széles, és 2 egységgel van jobbra tolva a képernyőn.

Speciális class-ok
Az egyik <p> bekezdésednek adj class="lead" class-t. Ezzel szokták általában kiemelni a hosszabb szövegek előtti összefoglaló bekezdést.

A Bootstrapben definiáltak kontextusfüggő osztályokat (“contextual classes”). Sok olyan elem és komponens van, amelyeknek van különböző színű változata. A kontextusok neve:

danger (veszély) [alapesetben piros],
info (információ) [halványkék],
success (siker) [zöld],
warning (figyelmeztetés) [sárga].
Létezik még általában egy primary kontextus is, ami az oldal elsődleges színe (általában a márka egy meghatározó színe például), [ez alapesetben sötétebb kék].

A .text-success tehát egy megerősítő üzenetet fog jelölni, a .bg-info pedig egy olyan elemet, amelynek információtartalma van az olvasó számára. Próbálgasd a különböző class-okat a különböző elemeken!

Szöveg rendezése bootstrap class-okkal:

.text-left, .text-center és .text-right

Használd az <ol> vagy az <ul> elemen a class="list-unstyled" class-ot és nem lesznek pontok vagy számok a sorok elején. A listaelemek egymás alatt jelennek meg, de nem lesz előttük formázás. Szeretnéd, hogy ne is egymás alatt legyenek, hanem egy sorban? Próbáld ki a class="list-inline" class-t!



Táblázatot lehet formázni ha a a table tag-nek table class-t adunk.

<table class=”table”>

További tábla formázó classok:

.table-striped,
.table-bordered,
.table-hover,
.table-condensed.
A pici kijelzőkön általában a táblázatok hamar válnak csúnyává, rosszabb esetben olvashatatlanná. Erre a problémára is van egy egészen elegáns, kész megoldás a Bootstrap keretrendszerben. Ha egy olyan <div>-be csomagolod az egész táblázatodat, aminek adsz egy .table-responsive classt, akkor csak egy bizonyos mérethatárig méretezi át a táblázatot,és abban vízszintes irányban görgetni lehet.

.activeApplies the hover color to a particular row or cell
.successIndicates a successful or positive action
.infoIndicates a neutral informative change or action
.warningIndicates a warning that might need attention
.dangerIndicates a dangerous or potentially negative action

Képek
A képek, ha nagyobbak, mint az azokat tartalmazó konténer, az .img-responsive class hatására automatikusan és arányosan átméreteződnek.

A Bootstrap még három különböző “képkeretet” is ad:

az .img-rounded lekerekíti a sarkokat,
az .img-circle lekerekíti magát a képet,
az .img-thumbnail egy pici fehér keretet ad a képnek.
Videók


Ha a Youtube oldalról share és embed funkciókkal kimásoljuk a videó linkjét, azt egyszerűen be lehet illeszteni a kódunkba. Ha most megnézed a weblapot, fix mérete lesz, hiszen a beágyazás kódjában konkrét számok írják le, hogy mekkora legyen, például:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/_2T8_6M3Gjc” frameborder=”0″ allowfullscreen></iframe>

Töröld ki a width és height attribútumokat, és alakítsd át a kódodat, hogy a következőképpen nézzen ki:

<div class=“embed-responsive embed-responsive-16by9“> <iframe class=“embed-responsive-item“ src=“…“></iframe> </div>
Ha mindent jól csináltál, a videó automatikusan felveszi a a tartalmazó konténer méretét. A -16by9 utal a képarányra és lecserélhető -4by3-ra. Az allowfullscreen kitörlése után a beágyazott videót nem lehet kitenni teljes képernyőre.