Bootstrap pocetak

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Samo sam napisao "Ko kaže da moraš znati ?". Prečica a ne način učenja, nisam rekao da je to pravi način rada. Na kraju krajeva, ljudi uče na greškama zar ne ?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 21 Feb 2015 19:36

Interesuje me na slici sam opisao.

Prvo je li ja moram da pisem col i za LG MD SM XS uvek i svuda ili samo neke odabrane?

Kada na ovoj slici imam veliki div to je desni ovaj i u njemu male divove, kako ove divove unutra podesiti sa col je li njihov ukupan zbir za LG mora biti 9 jer se nalaze u takvom divu koji je lg 9, isto tako i za md ,ali md mi je 7 ukupan ili gresim u vezi toga?




Dopuna: 23 Feb 2015 0:05

Takodje ono sto me jos interesuje, postavljeno kolona preko bootstrap-a on postavi tako nekako da sa strane ostavi prazan prostor, iako je stavljeno lg znaci 2 cm levo i 2 desno.
Znaci sto nije FIT TO DISPLAY na engleskom receno, kojim metodama se to resava

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 23 Feb 2015 10:41

Citat:Prvo je li ja moram da pisem col i za LG MD SM XS uvek i svuda ili samo neke odabrane?

http://www.mycity.rs/Web-dizajn/background-se-ne-f.....l#p1739449

Ovde sam objasnio kojim rezolucijama odgovaraju bootstrapove breakpoint klase (xs, sm, md, lg).

U zavisnosti koliko kolona zelis da ti zahvata koji element i na kojim rezolucijama tako ces i praviti raspored tih klasa.

Citat:
Kada na ovoj slici imam veliki div to je desni ovaj i u njemu male divove, kako ove divove unutra podesiti sa col je li njihov ukupan zbir za LG mora biti 9 jer se nalaze u takvom divu koji je lg 9, isto tako i za md ,ali md mi je 7 ukupan ili gresim u vezi toga?

Kada gledas unutrasnje divove potpuno zanemari koliko kolona zahvata parent div. Unutrasnji divovi se ponasaju kao zasebna celina sto znaci da ce divovi 1,2 i 3 sa slike biti na pr col-md-4 (3 elementa koja zahvataju po 4 kolone = 12), a 4 i 5 ce biti col-md-6. (2 elementa koja zahvataju po 6 kolona = 12)

Dopuna: 23 Feb 2015 10:45

Citat:Takodje ono sto me jos interesuje, postavljeno kolona preko bootstrap-a on postavi tako nekako da sa strane ostavi prazan prostor, iako je stavljeno lg znaci 2 cm levo i 2 desno.

Ti gapovi su u vecini slucajeva posledica nepravilnog rasporeda bootstrapovih klasa:

Citat:Inace te bocne margine od -15px sto vidis to je defaultna vrednost za bootstrapovu klasu .row, zato uvek treba da se isprati redosled container>row>col kako bi jedna klasa drugoj potirala margine. Container zadaje 15px margine, row im zadaje negativnu vrednost i tako ih potire itd.

http://www.mycity.rs/Web-dizajn/background-se-ne-f.....l#p1739968

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

m4rk0 ::Napisano: 23 Feb 2015 10:41


http://www.mycity.rs/Web-dizajn/background-se-ne-f.....l#p1739449

Ovde sam objasnio kojim rezolucijama odgovaraju bootstrapove breakpoint klase (xs, sm, md, lg).

U zavisnosti koliko kolona zelis da ti zahvata koji element i na kojim rezolucijama tako ces i praviti raspored tih klasa.



Cek cim pravim sajt pravim ga za sve rezolucije, tako da znaci moram stavljati i lg i md i sm i xs?
To da mi je razgonetnuti.

Jer moj ekran je onaj 1366/768
znaci to je to LG , i ja kad stavim u divove MD meni i na ovoj mojoj rezoluciji dobro se poreda.

Ja sam navikao stavljati sve jedinice i LG i MD i SM i XS

To da mi je razgonetnuti.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ko kaze da moras da stavljas sve ? Opet ponavljam sve zavisi kakav hoces raspored elemenata i na kojim reolucijama.

Prvo i osnovno ako zadas samo jednu bootstrap brekpoint klasu ona ce vaziti za sebe i sve ostale koje vaze za vece rezolucije. Sto znaci da ako stavis samo md, on ce vaziti i za md i za lg rezolucije. Ako stavis samo sm ona ce vaziti i za sm i za md i za lg.

Na xs rezolucijama (ako ne zadas xs klasu) po defaultu elementi automatski idu jedan ispod drugog.

Ako na neki element stavis samo md on ce i na md i na lg imati isti raspored, dok ce na xs i na sm elementi ici jedan ispod drugog. Ako na pr zelis da ti na md i lg budu isti raspored, a na sm ne zelis da ti elementi idu jedan ispod drugog, ti ces zadati md i zadaces sm.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 23 Feb 2015 23:06

Zahvaljujem ti za ovo, oduvek sam te gotivio jer ti to objasnis bas onako kako treba detaljno i dopunis na kraju sa primerom!

Upravo citam svu dokumentaciju sa bootstrapa, odgledao sam bio tutorijal jedan i napravio odmah sajt cisto da vezbam, ali mi ostalo ne razjasnjenje takve stvari, sada cu procitati citavu dokumentaciju na sajtu. Posle bootstrapa na redu je SASS i LESS.

A nakon toga JS i jQuery, e toga se plasim, jer ne kontam funkcije i logiku koja programerima padne na pamet da rese neke stvari

Dopuna: 27 Feb 2015 0:20

Procitao CSS dokumentaciju za bootstrap, ali mi sledece stvari nisu jasne, mislim prevedem ja sa translate google sto ne znam, ali ove stvari nisam skontao, pa ne bih da predjem preko njih tek tako, ako neko moze da pomogne hvala.
PS. znam da ce te reci bez engleskog ne mogu nikako dalje, upisujem za koji dan skolu jezika i krecem od nivoa pre intermediate

1. Nije mi jasno ovo display:inline-block;
Znam stra je inline, ali sta je ovo kompletno gore.


2.


3.


4.


5.


6.


7.


8.


9.


Veliko hvala!

• 1Ovo se svidja korisniku: nike992
  
  Registruj se da bi pohvalio/la poruku!

Ni manje ni vise nego 9 pitanja

Odgovoricu ti na prvo:

Svaki element po defaultu je block ili inline. Elementi koji idu jedan ispod drugog su block elementi a elementi koji idu u liniji (horizontalnom nizu) su inline elementi. Inline-block element je nesto izmedju - ima karakteristike block elemenata ali za razliku njih ide u liniji. Kad kazem karakteristike block elemenata mislim na to da moze da mu se zadaje width, height, margin i pading, dok ce kod obicnih inline elemenata biti ignorisan top i bottom margin, kao i width i height.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

m4rk0 ::Ni manje ni vise nego 9 pitanja

Odgovoricu ti na prvo:

Svaki element po defaultu je block ili inline. Elementi koji idu jedan ispod drugog su block elementi a elementi koji idu u liniji (horiznontalnom nizu) su inline elementi. Inline-block je element je nesto izmedju - ima karakteristike block elemenata ali za razliku njih ide u liniji. Kad kazem karakteristike block elemenata mislim na to da moze da mu se zadaje width, height, margin i pading, dok ce kod obicnih inline elemenata biti ignorisan top i bottom margin, kao i width i height.

Zahvljajujem ti, vidi i ostala da odgovoris kad stignes

JEr ja prevedem sto ne znam preko translate.google.com , ali nema logike o.O
Hvala jos jednom

• 2Ovo se svidja korisnicima: nike992, vasa.93
  
  Registruj se da bi pohvalio/la poruku!

Moras druze vise da se angazujes i potrudis. Lenj si. Dosta stvari koje si pitao mozes i samostalno da ispitas sta su. jednostavno upotrebis ih u kodu i dosta toga ce biti jasnije. Al ajde da ti odgovorim na pitanja:

2. Toliko ces se retko sa konretnim slucajem da mozes slobodno da ga preskocis.

3. center-block je prepodesena bootstrap klasa koja postavlja element u block i centrira celokupan njegov sadrzaj.
Centriranje block elemenata se vrsi kao sto je i prikazano na slici (a moze i skraceni oblik)
margin: 0 auto;
Centriranje inline elemenata se vrsi sa:
text-align: center;

4. Zasto pitas nesto sto sam ti vec objasnio ?

5. koristeci invisible ti samo sakrivas element od onog ko gleda dokument ali prostor koji on zauzima je i dalje prisutan. Dok se hidden klasom i sakriva element i prostor koji on zauzima.

6. U ovoj fazi ucenja nebitna stavka. Vezana je za prikazivanje sadrzaja samo za "citace ekrana".

7. Sakriva wrapovan tekst, tj prikazuje samo njegovu pozadinu (background).
<h1 class="text-hide">Ovaj tekst nece biti prikazan</h1>
Zasto bi neko pisao tekst ako ce ga sakriti - pa zbog SEO optimizacije. To ce se uraditi za onaj tekst za koji zelimo da ga pretrazivaci iscitaju ali da ga korisnici ne vide.

8. Ako zelis da se neki element prikazuje na odredjenim rezolucijama a na drugim ne stavices visible ili hidden.
Visible ima tri opcije:
.visible-*-block
.visible-*-inline
.visible-*-inline-block

Umesto zvezdice ide xs, sm, md ili lg (zavisno na kojim rezolucijama/breakpointima zelis da ti objekat bude vidljiv). Sufiksima -block -inline i -inline-block zadajes kako ce se elementi prikazivati (objasnjavao sam vec kakav je raspored elemenata u sva tri slucaja).

U slucaju hidden samo se breakpointi menjaju (ide xs, sm, md ili lg)
hidden-*

Znaci ako na pr zelis da ti se neki element prikazuje na velikim (lg) rezolucijama i to kao inline element, a na medium rezoluciji hoces da ga sakrijes iskodiraces sledece:

<div class="visible-lg-inline  hidden-md">Ovaj sadrzaj ce biti vidljiv na rezolucijama preko 1200px (lg) i bice prikazan kao inline, ali ce biti skriven na md rezolucijama (izmedju 992px i 1199px) </div>

9. Takodje se tice SEO optimizacije. Savetuju ubacivanje aria-label za pojedine elemente koji ne sadrze tekst kako bi ih lakse raspoznavali, prevashodno citaci ekrana (screen readers). Nesto slicno alt tagu kod slika.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 02 Mar 2015 1:00

Jedno VELIKO HVALA !

Dopuna: 25 Apr 2015 19:47

da ne bi otvarao bzvz temu za ovo, interesuje me overflow element, kada se koristi, niej mijasan, ja ga ubacim kad vidim da je potreban, a ne znam ni kako mi reci problem, engleski mi slab pa ne kontam tutorijale