A Bootstrappel kapcsolatban lenne egy kérdésem, ami nem 100%-ig világos.

Az alábbi linken látható kódban, ugye van maximális felbontáson 4 sorom, és egy sor ez alapján <div class="col-md-4" elvileg négy oszlopból épül fel, holott 3-at látok?! Itt elvileg részletezi, de sajnos nem teljesen világos, hogy miért van így:

"If you see the output of the above example in a laptop or desktop having screen or viewport width greater than or equal to 992px and less than 1200px you will find it has 4 rows where each row has 3 equal columns resulting in 3x4 grid layout."

Hogyan lehetne ezt esetleg borderrel is szemléletesebbé tenni, vagy nem így kell elképzelni? Igazából a gridsystemben a col-md-"szám" utal arra, hogy hány oszlopból épül fel az adott panel az összesen 12 lehetségesből?

Valamint, ha így adjuk meg az adott box osztályát, ami lentebb látható a 3. sorban, akkor az arra utal, hogy screen kisebb méretén hogyan jelenítse meg az adott boxot?, pl.: nagyobban col-sm-6 kisebb méretben col-md-4 felépítettségre, etc. osztályra vált?

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"><p>Box 1</p></div>

Előre is köszönöm a válaszokat!

[ Szerkesztve ]

Még közben eszembe jutott két kérdés, amit szeretnék itt leírni nektek, mert máskülönben elfelejtem.

1, A Bootstrapnél az egyedi stílus kialakítására (pl.: tegyük fel eltérő betűtípusokat, vagy színeket, vagy bármiféle módosítgatást akarok (nem a "gyári bootstrap-es typography-t szeretném használni... stb.) akkor arra példaként jó megoldás, ha létrehozok egy custom.css-t, amit belinkelek a html-ben, és amit szeretnék abban szépen módosítgatom?

2, A munka világában, "élesben" is már egyre több cég alkalmazottja (etc Frontendes-e) használja már ezt a Frameworköt? Ezek mellett meg AngularJS-t? Célzom arra, hogy pl. CV-ben jól mutat egy ilyen skill? Vagy még a szépen @media querykkel kialakított responsive designos tudás "feljebb értékelt"? Bár ha ennyire megkönnyíti a munkát a Bootstrap, akkor "hülye lenne az ember szépen egyesével media queryket írogatni", nem? Vagy teljesen rosszul gondolom?

[ Szerkesztve ]

A Bootstrap csak egy eszköz. A mai trendnek megfelelő minimalista, "magazin" szerű oldalakat nem rossz vele összepakolni, nem rossza ha értesz hozzá. Azonban egy komplexebb, egyedi igényeket kielégítő weboldalhoz, mondjuk egy webshophoz szerintem már nem fogják a Bootstrapet előhúzni a kalapból, mivel nem sok mindent lehetne onnan hasznosítani.

"és egy sor ez alapján <div class="col-md-4" elvileg négy oszlopból épül fel, holott 3-at látok?!"

Miért kell hülye tutorialokkal szopatni magad, mikor ritka jó a saját dokumentációja a bootstrapnek. Biztosra veszem, hogy ez alapján érteni fogod mi miért történik: bootstrap doksi

Én kérek elnézést!

Ezzel mondjuk vitatkoznék. Pont a minimalista oldalaknál nincs szükség bootstrapre elvégre ha minimalista, akkor nincs is mit használni belőle. És pont a komplex cuccoknál jöhet jól a benne lévő kismillió okosság.

Ettől függetlenül nem vagyok nagy barátja a frameworköknek, szvsz a legjobb ezek használatát minden esetben a minimálisra szorítani, és saját, direkt a célra optimalizált változatokkal kiváltani.

Én kérek elnézést!

Azért ez attól is függ, hogy van-e már kész sablon arra a bizonyos webshopra vagy sem, ha 0-ról kezdik írni, akkor a "nem sok mindent lehetne onnan hasznosítani" nem igaz, kapásból kézhez kapsz egy komplett gyűjteményt a reszponzivitás és még rengeteg más kialakításához, valami alapvető stílussal való felruházásához, persze aztán még erre ráépülhet az egyedi dizájn.
Ez sem fekete vagy fehér (szóval nem csak az van, hogy egyszerű oldalhoz oké, komplexhez nem oké), sztem a Bootstrapet vagy más hasonló frameworkszerűséget simán lehet kiindulási alapnak használni egy komplexebb oldalhoz is, szóval elég hasznos tud lenni, ha ismer ilyet.

Szerk.: martonx megelőzött, közben ő is írt neked választ.

(#1562) martonx:
Egyetértek, tényleg nagyon jó a doksija a Bootstrapnek.

(#1563) martonx:
Szerintem minimalista oldalra is jól lehet használni. A minimalista oldalt is simán lehet, hogy valaki mobilon is jól olvashatóvá akarja tenni, de nem akar tökölni az alap kézzel való megírásával. Mondjuk számolni kell azzal, hogy a Bootstrap saját fájlocskáit is be kell töltögetni.

[ Szerkesztve ]

Sk8erPeter

Lehet még tapasztalatlan vagyok, de azért írtam épp a minimalista, mai "trendi" oldalakat, mert igazából nem sok elemből áll, azt gyorsan összerakja az ember a BS grid rendszerével, mobilra optimalizált is lesz, ad pár JS-t és kész. Komplexebb oldalaknál pedig lehet nem annyira számottevő az a pár feleslegesen behúzott dolog, de engem mondjuk zavarna a tudat, hogy ott vannak és mindig letölti a felhasználó.

Ezt az érvelést nem igazán értem, minimalista oldalnál nem zavarna, hogy - ilyen alapon - csomó "felesleges" dolgot letölt a felhasználó, míg pont egy komplex oldalnál zavarna, ahol lehet, hogy többet is kihasználsz a fícsörökből?

Sk8erPeter

Ez pont az ágyúval a verébre. Mint mikor valaki csak arra használja a jQuery-t, hogy teszem azt megváltoztassa egy elem kinézetét ha felé mennek az egérmutatóval. Holott ott van rá a :hover.

but without you, my life is incomplete, my days are absolutely gray

Kis oldalaknál az a pár valami gondolom azért annyira nem számít. De egy nagynál, amiben már kis millió dolog be van rántva? Lehet zavarosan fogalmaztam eddig, de én úgy vagyok vele, hogy a kicsiket ezzel gyorsan össze lehet rakni, használni pár fícsőrt ami kell, és mivel amúgy is könnyű súlyú maga a weboldal, akkor mindegy az a pár js, css fájl még ott a háttérben.

De egy nagynál ez nem fontos? Hogy minimalizáljuk a felesleges és nem használt dolgokat? Ne érts félre, nem a BS ellen rántottam kardot, csak én így gondolom, ami lehet téves is.

Ismeri valaki innen a codeavengers.com-ot? Elvileg Certifikation-t is ad a kurzusok elvégeztével. Elkezdtem itt az ingyenes leckéket, egyenlőre nagyon tetszik a dolog. Igazából jövőre csinálok egy két hónapos kurzust, amit már korábban írtam, de szabadidőmben, amíg nem indul a kurzus, végigcsinálnék online kurzusokat is a témában. Ezzel magamat is fejlesztve, és ha még "papírt" is ad a végén róla, az plusz pont. Mit gondoltok, mondjuk ez elég jó árban is van közel 90 Euróért, összehasonlítva egy pár másik oldallal, ahol havidíjas a téma.
Vagy esetleg más online kurzust ajánlanátok? A codecademy.com-ot már kivégeztem a HTML + CSS, Bootstrapes kurzusokat, most a JS-nél vagyok, úgy 25% körül. Valamint a lynda.com-on már jópár videós kurzust végigcsináltam a témában. Ajánlom azt pl. nektek is jó szívvel.

Persze, tudom, a munkaadónak az számít amit tud az ember, és nem a papír. De azért a CV-kben jól mutatnak az ilyesmi dolgok pluszban, én úgy gondolom.
Nem beszélve, hogy gyakorlom addig is "interaktívan" a nyelvet a hagyományos könyves, jegyzetes gyakorlás/tanulás mellett.

[ Szerkesztve ]

Nem tudom, szerintem ez már a felesleges agyalás kategória. Kategorikusan nem érdemes kijelenteni, hogy erre érdemes, erre nem, úgyis a helyzet dönti el; na meg lehet tömörítve is átküldeni ezeket a fájlokat a hálózaton, lehet CDN-t használni, meg ott van a böngésző gyorsítótára (így többszöri látogatáskor gyorsítótártörlésig vagy fájlmódosulásig csak egyszer kell letöltenie a felhasználónak), meg aztán lehet, hogy a minimális letöltendő méret elérése a cél, de lehet, hogy az a 100 KB már pont nem számít, blablablabla, mindig attól függ.
Azzal sem értek egyet, amit DNReNTi írt, hogy "ágyúval verébre"-kategória lenne, minimalista oldalnál is megérheti a kapott szolgáltatások miatt (pl. reszponzivitás, amit nem kell megint megírni, de persze biztos van minimalistább stylesheet is).
De mindenki el tudja dönteni, hogy adott helyzetben megéri-e kézzel összerakni a stíluslapokat, vagy felhasználja azt a munkát, amit már más elvégzett helyette.

==================================

(#1569) adam_:
Szerintem az ilyen pénzbe kerülő plecsnik helyett sokkal jobban megéri inkább referenciákat gyűjteni (akár haveroknak/családtagoknak/ismerős cégének/akárkinek fejlesztett, igényesebb honlap fejlesztése is jobb lehet; meg ha valamilyen papírról van szó, ami számíthat, akkor az inkább már egyetemi/főiskolai szakirányú képzettség), a munkáltatót az többnyire sokkal jobban érdekli.

[ Szerkesztve ]

Sk8erPeter

Egyetértek, ez már tényleg túlgondolás volt.

Sziasztok.

Van valami modja annak hogy a body backgroundja egy olyan szint kapjon amiben van szinatmenet?

pl: fekete-szurke vagy fekete-bordo.

Google kepeket nem akarok hasznalni, mert az ugyebar nem megengedett.

XD alias IKSZDé

"CSS3 gradient", ezt írd be Google-be, és számtalan találatot fogsz kapni, vannak generátorok is, amik arra jók, hogy kiválasztod a megfelelő színátmenetet grafikus felületen, és ahhoz generálódik egy CSS-kód (aminél lehet régebbi böngészőkre is támogatás).

Sk8erPeter

Én is pont ezt akartam írni, de gondoltam nem bonyolítom. Meg amúgy is van aki harap a "let me google that for you" linkekért. Szóval egy amennyire lehet krosszbrózer megoldás: fiddle.

Szerk:
Hozzáteszem nem magamtól vótam ilyen okos, én is gugliztam, kb 12 mp alatt.

[ Szerkesztve ]

but without you, my life is incomplete, my days are absolutely gray

Koszi.

Bar elegge fura ez a generator.
Nem igazan jovok ra hogy hogy lehet beallitani hogy melyik 2 szint akarom hasznalni.

Amikor rakattintok a jobb oldali negyzetre, akkor minden elallitodik amit beallitottam a bal oldalon.

[ Szerkesztve ]

XD alias IKSZDé

Nem szoltam.

Megvan koszi.

XD alias IKSZDé

Sziasztok!

gyors kérdésem lenne:

azt szeretném megoldani, hogy ha egy bizonyos id-jű elem fölé megyek ( legyen #pelda:hover ), akkor egy másik elem, aminek a class-a legyen mondjuk target, ne jelenjen meg egy listában.

ahogy próbálkoztam:
#pelda : hover ~ .target {
display:none;
}

#pelda egy table tr-jére van ráaggatva, míg .target egy lista id-je, ahol előtte és utána is van több listaelem. nekik látszódniuk kéne, csak a speckó id-set kellene eltávolítani erre az időre.

van ötletetek, mi nem jó? egyáltalán ez a módja? köszi

Sztem simán CSS-sel ez csak úgy működik, hogy van egy közös szülőelem, és aztán így:
http://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time/17393262#17393262

Sk8erPeter

megnézem, köszi!

sajnos nem megy úgy sem.

ez már nem ez a topic, de van más megoldási ötleted? bármi érdekelne

Na ide kéne a CSS4 :has selector. Kár hogy egyetlen böngésző sem támogatja. Viszont a jQuery-nek van erre függvénye, meglepő módon a .has().

but without you, my life is incomplete, my days are absolutely gray

köszi!

sikerült a dolog, de túl jól
letiltja a menüelemet, de az összeset. nem csak azt, amelyiknek a class-a megfelelő.

kód:

function menuActualizer() {
$("#data").hasClass("checkedout").css("display: none");
}

van esetleg ötlet?

Végülis .has() nélkül: jsfiddle.
Nem vagyok nagy jQ huszár, szóval valaki pls nézzen rá, lehet nem 100-as a megoldás.

but without you, my life is incomplete, my days are absolutely gray

Mit jelent az, hogy "nem megy"? Amit linkeltem, ott még egy jsFiddle-példa is van a szemléltetésre.
Ha te is felraknál egy egyszerűsített jsFiddle-példát a saját kódoddal, akkor meg is tudnánk mondani, mit csinálsz rosszul.

(#1583) ^Boss:
Ezt akkor már úgy illik írni, hogy .css("valamitulajdonság", "valamilyenérték"), tehát mondjuk .css("display", "none"), DE mivel pont az elrejtésre való, értelmesebb lenne használni a .hide() metódust, ennek paraméterül még azt is átadhatod, hogy mennyi idő alatt tűnjön el az elem.

Sk8erPeter

Amit Te linkeltél ott a szülő elemre kell kattolni, szerintem ez lehet a probléma. Bár ha úgy is megfelel, akkor az lényegesen egyszerűbb, mint amit én írtam.

but without you, my life is incomplete, my days are absolutely gray

Amit én linkeltem, ott nem kell kattolni. Ott a hoverre reagál. Ha egy gyerekelem fölé viszed az egeret, akkor egyben nyilván a szülőelem fölé is, tehát ezzel már lehet játszani. Na persze abban igazad van, hogy ez azért elég korlátos, szóval simán lehet, hogy az adott helyzetre nem alkalmazható, de ehhez látnunk kellene, miről van szó, mert lehet, hogy működne az, ami a példakódban.

Sk8erPeter

sikerült megoldanom egyszerűbben: van 2 listám a 2 fajta menünek, ami nem kell, kiszedve az egyes listákból. és tulajdonság alapján azt a listát jelenítem meg a menüben, amelyik épp kell. lehet a jquery-s szebb, de megteszi ez is

köszönöm a segítséget!

Sziasztok! Adott egy css kód:
body {
background: #2A2A2A;
}

.fejlec {
background: #2A2A2A;
padding: 15px;
margin: 10px auto;
text-align: center;
color: #FFFFFF;
border: 1px solid #FFFFFF;
font-size: 30px;
font-weight: bold;
width: 1000px;
}

.bal {
background: #2A2A2A;
padding: 15px;
margin: 0px 10px 0px 0px;
color: #FFFFFF;
border: 1px solid #FFFFFF;
font-weight: bold;
font-size: 20px;
width: 240px;
float: left;
height: 400px;
}

.kozep {
width: 1034px;
margin: 10px auto;
}

.content {
background: #2A2A2A;
padding: 15px;
margin: 0px auto;
color: #FFFFFF;
border: 1px solid #FFFFFF;
font-weight: bold;
width: 720px;
float: left;
height: 400px;
}

.main {
list-style: none;
padding: 10px;
margin: 0px;
}

.main li {
text-align: center;
cursor: pointer;
padding: 2px;
}

Az a kérdésem hogy hogyan tudnám a középső content részt és. A bal menüt úgy méretezni, hogy a menü méret igazodjon a menuelemek hosszához es ehhez meg a középső content leíró rész kerete? Illetve azt hogyan tudom kivitelezni, hogy az oldal az eszköz kijelzojehez igazodva jelenjen meg a keretes formában? A http://palfimate.atw.hu/index.html oldalon van fent a Kezdőlap felhasználásához a css. Ami egyébként ugyanitt /stilus.css néven van fent. Illetve ha van valami javítani való vagy szebbé tehető rész akkor szívesen fogadom az ötleteket. Most kezdtem a csst megtanulni hobbira
Előre is Köszi a választ Üdv

[ Szerkesztve ]

Pár napja foglalkoztat egy kérdés. A Frontendesnek "mennyire van megkötve a keze", gondolok itt arra, hogy már mennyire készen kapja a designelemeket (szinek,képek,méretek...etc), és ehhez már csak "robot szerűen" le kell programozni az adott honlapot? Vagy ez természetesen cégtől is erősen függ?

Előre is köszönöm a szakmabeliek véleményét, és Boldog Karácsonyt nektek!

Szvsz ez inkább projekt függő, nem annyira cég függő.

Én kérek elnézést!

Ez nem olyan mint egy szalagmunka, nem különül el ennyire egymástól. Attól mert valaki frontend fejlesztő, még nyilván van egy valamekkora szerveroldali ismerete, továbbá nyilván tisztában van az aktuális trendekkel és UX-el is. Sőt kell is hogy tisztában legyen ezekkel. Egyébként a kérdésed nem teljesen egyértelmű, ha arra gondolsz beleszólhat e egy frontendes a designer munkájába: akkor igen. Nyilván. Ha a kérdés az, hogy utólag megvalósíthatja e másképp a már az ügyfél által elfogadott layout-ot: akkor nem. Illetve egyeztetés nélkül biztosan nem.

but without you, my life is incomplete, my days are absolutely gray

sziasztok.

Az hogy lehet hogy pl a google chrome-ban egy kicsit mashogy jelennek meg a szinek annak ellenere hogy szinkodokat hasznalok?

De volna egy ennel is fontosabb kerdesem. a buta Internet exploler nem tudja megjeleniteni a szinatmenetet ami az oldalam hattereben lenne.
Van valami olyasmi megoldas hogy generalok egy kulon szint direkt az IE kedveert, ami csak abban az esetben jelenik meg az oldalamon ha valaki meg mindig IE bongeszovel nezne meg az oldalamat?

XD alias IKSZDé

A színek úgy jelennek meg ahogy megadod. Egy színkód nem tud más színt reprezentálni.

Próbáld itt, ez készít minden böngészőre optimalizált kódot.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Én amikor kellett akkor ezt az oldalt használtam.

""Fogalmam sincs csak feltettem a kérdésem hátha segít valaki. Amúgy azt se tudom hogy hová tartozik!" - 2014"

Lehet én is keresek egy ilyen csodálatos idézetet most már, nehogy kilógjak a sorból.

[ Szerkesztve ]

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Pedig egy hangyani kulombseg van a ket bongeszo szinmegjelenitese kozott. (mozilla es google chrome)

Zedz koszonom , csak azt a bajom hogy az amit csinaltam, azt az altalad linkelt oldalon nem lehet megcsinalni ( elegge egyedi)

Nincs valami amit ha a masik oldal altal generalt kodba beleirok akkor az IE is rendesen meg tudja jeleniteni?

Ez eleg fontos lenne, mert ezt a hatteret mindenkeppen szeretnem megtartani.

[ Szerkesztve ]

XD alias IKSZDé

Printscreen? Lehetőleg egy képen a két ablak.

but without you, my life is incomplete, my days are absolutely gray

Csinálnál egy screenshotot erről? Mert marginok, paddingek, fontok ...stb eltérhetnek. De színekről még nem hallottam, nem tapasztaltam.