Stiffler
29.07.2014, 17:09:58
Witam,
Postanowilem zaimplementowac nowa technologie do mojego projektu. Ale mam problem natury logistycznej. Mianowicie strona posiada duzo IMG. Logo/slider/baner. Ja pracuje na laptopie z rozdzielczoscia 1366x768 a kolega szablon robil na 1920x1080. No i jak to pogodzic z boostrapem? Czy on ma mi wyslac dwa rozmiary obrazkow? Czy moze jeden i go skalowac? Jak tak to jak? W tym bootstrapie czytalem o skalowaniu column, ale co ze skalowaniem obrazkow?
by_ikar
29.07.2014, 18:54:08
Z obrazkami jest to samo. Doczytaj dokumentacje jest tam chociażby coś takiego jak img-responsive ale możesz to też zrobić inaczej.
Stiffler
29.07.2014, 19:03:01
Robie ale jestem troche skonfuzjowany. Gdyz napisze to co wiem na ta chwile.
Jest tam grid system, czyli musimy logo miec w jednym z gridow. Gridow jest 12 na szerokosc ekranu. czyli teoretycznie logo moze miec X/12 szerokosci strony. Co jak logo jest w nie standardowym rozmiarze dla boostrapa? Kiedy ma ono 5.3/12 szerokosci strony?
Crozin
29.07.2014, 19:28:15
1. Nie wszystko musi być wrzucone w Bootstrapowego grida.
2. Wystarczy, że "komórka" będzie odpowiednio duża by pomieścić obrazek, wtedy możesz go tam wrzucić z max-width ustawionym właśnie na 5.3/12 szerokości strony.
Stiffler
29.07.2014, 19:31:44
Komorka tzn 1 grid czy 12 ?
Mozna jakis realny przyklad. Przyjmijmy ze przy 1920 logo ma 100x100 to przy 1366 chce zeby sie zeskalowalo wprost proporcjonalnie do tej rozdzielczosci.
Moze jakas podpowiedz? Dostalem layout od grafika i musze go przepisac do css. Bez resposive desgining i bootstrapa to dla mnie banal. Ale to moj pierwszy raz z RD
Crozin
29.07.2014, 19:41:30
Możesz podać przykład (makietę) jak strona powinna wyglądać przy 1920 i 1366 pikselach szerokości?
Stiffler
29.07.2014, 19:51:32
Problem jest taki, ze powinna wygladac tak samo.
Tzn obrazki musza sie przeskalowac. W tym momencie dostalem obrazki w rozdzielczosci dla 1920x1080 wiec u mnie na komputerze pojawia sie paski do przewijania.
Dam jpg jak powininna wygladac:
http://www.konkrete.vot.pl/1920.jpgTen duzy obrazek w tle to slider.
by_ikar
29.07.2014, 20:03:54
To co ty tam masz, to jest tło, więc proponuje ci użyć background-size: cover, i tutaj bootstrap ma nic do tego. Nie wiem czemu ludziom się wydaje że podpięcie samego bootstrap nagle przerabia ich stronę w responsywną..
Stiffler
29.07.2014, 20:04:49
Co z logiem?
Crozin
29.07.2014, 20:11:33
1. To białe logo przecież bez żadnych zmian zmieści się i na wyświetlaczu z 300 pikselami.
2. Jeżeli chcesz by na mniejszych rozd. było ono mniejsze to skorzystaj z @media i ustaw mu odpowiednie max-width.
Stiffler
30.07.2014, 02:24:46
hmm.. no tak. To napewno za dziala, juz sprawdzalem.
Mozecie cos powiedziec o dokladnym odwzorowaniu szablonu przy wspolpracy z boostrapem?
Bez niego czasami trzeba sie na meczyc zeby odwzorowac loyout w 100%.
Czy boostrap jest inwestycja czasu ktora owocuje pozniej RWD, czy moze przy pomocy jego da sie latwiej lub tak samo prosto budowac layouty od grafikow?
Tak, bootstrap jest RWD.
Tylko zanim coś napiszesz w nim responsywnego to minie kilka chwil i zdupionych projektów. Taka prawda.
zegarek84
30.07.2014, 08:19:52
Cytat(Stiffler @ 29.07.2014, 21:04:49 )

Co z logiem?
jeśli chcesz by się skalowało też logo to w ramach nauki na inne projekty i szersze spojrzenie pokombinuj sobie ze sposobem na tło nr 2 lub jeśli wolisz inny tok myślenia i jQuery to 3... w przeszłości dla starych nie wart wspierania IE position fixed uzyskiwało się przez odpowiednią kombinację pozycjonowania absolutnego....
http://css-tricks.com/perfect-full-page-background-image/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę
kliknij tutaj.