A legegyszerűbb CSS keretrendszer a Bootstrap, könnyen kezelhető és 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.
http://www.leoamros.com/bootstrap-hasznalata-alapok
https://html5.ugyesen.com/tag/bootstrap/
https://webuni.hu/kepzes/463
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.
http://nora707.tryfruit.com/2016/10/25/bootstrap/
http://www.leoamros.com/bootstrap-hasznalata-alapok
https://html5.ugyesen.com/tag/bootstrap/
https://webuni.hu/kepzes/463
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.
http://nora707.tryfruit.com/2016/10/25/bootstrap/
Nincsenek megjegyzések:
Megjegyzés küldése