Bootstrap 3

• 1Ovo se svidja korisniku: vasa.93
  
  Registruj se da bi pohvalio/la poruku!

Pitanje kako postaviti dva efekta na jednu klasu fade efekat i thumbnail.

• 2Ovo se svidja korisnicima: dejnik978, Rogi
  
  Registruj se da bi pohvalio/la poruku!

za prva dva pitanja bi mi trebao link do tvoje stranice da pogledm sta je problem, ovako ne razumem sta si uradio

3. Kada dve ili vise klasa zelis da stavis za jedan element, sve pises pod jedan class argument. Znaci

<img  src="img/kolacodmalina1.jpg" alt="..." class="fadeefekat img-thumbnail nesto-trece">

• 4Ovo se svidja korisnicima: dejnik978, _ivKe, eleutheros, Rogi
  
  Registruj se da bi pohvalio/la poruku!

Bootstrap je samo framework - dakle, skup alata za prikaz stranica i njihovo stilizovanja. Čine ga:

html fajlovi - u kojima se nalazi "kostur" stranice, tj. raspored elemenata na njoj
css fajlovi - u kojima se nalaze definisana pravila za prikaz pomenutih html elemenata na stranici
js (javascript) fajlovi - koji definišu međusobnu interakciju elemenata koji čine html stranicu ili njihovu interakciju sa korisnikom koji posećuje stranicu.


Svi ovi "alati" su skupljeni u jednu celinu i autor ih je nazvao Bootstrap. Ovaj paket svoju popularnost stiče upravo primenom novih tehnologija (koje donose css3 i html5 kao standardi) i osnova je za laku izradu tzv responsive sajtova - koji su u stanju da prilagode svoj izgled različitim veličinama ekrana uređaja na kojima se prikazuju.

Dakle, nema potrebe da ovaj skup alata smatraš "svemirskom tehnologijom" niti da se plašiš istog. Sa osnovnim poznavanjem html-a i css-a moći ćeš da pratiš prilično detaljnu dokumentaciju koja je lako dosptupna (da ne pominjem i veoma kvalitetne YT video materijale).

Sad, ukratko - osnova svega je mreža (eng. grid). Nešto slično tabelama koje su se pre koristile (koje su još odavno responsive po samoj svojoj prirodi, ali to je tema za neku drugu priču ). Dakle, zamisli da je stranica na kojoj radiš upotrebom ovog framework-a podeljena na kolone i redove. Ovde je bitan broj kolona - ako koristiš bootstrap, tvoja stranica je podeljena na maksimalno 12 kolona čija je širina određana u procentima i između kojih postoji određeni razmak. Dakle, uvek se koristi maksimum od 12 kolona. I na manjim ekranima - telefon/tablet - se prikazuje/koristi pomenutih 12 kolona maksimalno ali je njihova širina manja (zato je definisana u procentima). U css fajlu postoje pravila svrstana u klase koja definišu kako se sajt prikazuje na određenim veličinama ekrana, a oni su podeljeni na:


xs - exTra Small (telefon)
sm - SMall (tablet/netbook)
md - MeDium (laptop)
lg - LarGe (monitori/veliki ekrani)


col je oznaka za kolonu, a broj na kraju pokazuje koliko se kolona koristi. Sada je nadam se jasniji naziv klase col-sm-3


Dokumentacija navodi i sledeća pravila:

ako se ne navede klasa koja označava broj korišćenih kolona, koristi se podrazumevana vrednost a to je 12
broj kolona važi za navedenu veličinu ekrana i za ekrane koji su veći od navedene oznake. Dakle, pomenuta oznaka col-sm-3 podrazumeva da će se na ekranima srednje veličine (md - medium) koristiti 3 kolone, ali da to važi i za veće ekrane (ako pogledaš listu videćeš da se odnosi još samo na lg - Large)


U skladu sa ovim što sam naveo, pitanje za tebe. Na koje ekrane se odnosi klasa col-sm-2 i kakav će biti prikaz (koliko kolona će biti prikazano) na svakom navedenom tipu ekrana?

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

Gde ima neki alat za browser ili neki eksterni program za testiranje bootstrap sajta za mobilne telefone, tablete, laptope, pc.

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

Pitanje: Kako da se usklade fontovi <p>
Uskladjeno pitanje i postavljeno na ovom linku
http://jsfiddle.net/skde3odm/

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

Napisano: 14 Apr 2015 19:13

dejnik978 ::Gde ima neki alat za browser ili neki eksterni program za testiranje bootstrap sajta za mobilne telefone, tablete, laptope, pc. Hvala

http://www.mycity.rs/Web-dizajn/Testiranje-sajta_2.html#p1749254

Dopuna: 14 Apr 2015 19:16

dejnik978 ::Pitanje: Kako da se usklade fontovi <p>
Uskladjeno pitanje i postavljeno na ovom linku
http://jsfiddle.net/skde3odm/

U kom smislu da uskladis fontove ? Ako zelis da ih smanjis na manjim rezolucijama, to se radi preko @media querija.

na pr velicina fonta paragrafa ti je 16px, a zelis da ga smanjis na xs rezolucijama, ti ces uraditi ovako

@media (max-width: 767px) {    p {font-size:14px;} }

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

Napisano: 14 Apr 2015 22:36

Ovo @media ne znam. Mozda nisam dobro to odradio. Ovaj link ne radi https://chrome.google.com/webstore/detail/window-resizer/

Dopuna: 14 Apr 2015 22:40

Imam pitanje na internet exploreru 9 ne radi odmah javascript nego trazi odobrenje, ako neko pogleda sajt sa jquery efektima i ne odobri javascript, onda nista od lepog sajta. Kako da to resim. Ovi efekti super rade na Opera 28.0, Chrome Version 41.0.2272.118 m. Sajt se vezba, radi u bootstrapu.

• 2Ovo se svidja korisnicima: dejnik978, _ivKe
  
  Registruj se da bi pohvalio/la poruku!

evo ispravnog linka: https://chrome.google.com/webstore/detail/window-r.....ilcgefonfh

I nauci @media querije , jer to je srz responsive dizajna.

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

1.Interesuje me vase misljenje o upotrebi fontova na bootstrap-u, kako je pravilnije. Ja koristim google fonts
npr ovako u css-u
@import url(http://fonts.googleapis.com/css?family=Open+Sans);  i gde hocu npr .h2 {font-family: 'Open Sans', sans-serif;}
Ovde imam problem da mi nisu isti fontovi na svim pregledacima. Neko resenje?

Vidim da koriste i kao
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

ili da fajlove vuku iz foldera

2. Drugo pitanje za sta sluze fontovi ili sta vec iz bootstrap skinutog foldera?
glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff glyphicons-halflings-regular.woff2

i na ovoj adresu podrska.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Koje fontove koristiti, ili kao sto ih ja koristim na @import

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

1. Pravilni su svi navedeni nacini s tim sto uvek treba ici na opciju upotrebe google fontova kad god ej to moguce (zbog brzine ucitavanja fontova ; google server je brzi od svakog vaseg servera), a lokalno importovati samo u slucaju da se isti ne prikazuju kako treba (ja sam na pr imao problem sa Lato fontom ucitanim sa google servera koji klijenti nisu mogli da vide dok nisam lokalno importovao).

2. Bootstrap ima opciju prikaza prostih (jednobojnih) "slicica" u obliku fontova sto za prednost ima mogucnost izmene njihove boje kao i velicine bez ikakvog gubitka kvaliteta. Ti fajlovi koje si naveo su neophodni kako bi mogao normalno da koristis te tzv glyphicons.

http://getbootstrap.com/components/#glyphicons