CSS - bootstrap framework

Odpowiedz Nowy wątek
2014-11-10 14:36
0

Witam!
W ramach zadania na uczelnię muszę odpowiednio sformatować stronę za pomocą arkuszy CSS używając frameworka Bootstrap.

Za pomocą frameworka Bootstrap (punkt 4 w pliku) potrzebuję, żeby interfejs strony był responsywny - dostosowywał się do szerokości ekranu oraz aby przy szerokości ekranu poniżej 600 pikseli, pasek nawigacyjny przeskakiwał z lewej strony na górę (pomiędzy głównym nagłówkiem, a treścią artykułu).

Bardzo będę wdzięczny za jakąkolwiek pomoc, postępowałem według różnych tutoriali i nic nie działa :/

Kod:

http://jsbin.com/xocedi/1/edit?html,css,output
edytowany 5x, ostatnio: MiSieeQ, 2014-11-11 12:37

Pozostało 580 znaków

2014-11-10 16:11
0

Nie chce mi się otwierać całości (powinieneś to wrzucić w jakieś formie "live", nikomu nie będzie się chciało bawić w załączniki), ale:
1) transform-origin zapewne
2) prawdpodobnie float: none; do elementów, które są ułożone obok siebie i aktualnie mają float: left; lub float: right;


Pozostało 580 znaków

2014-11-10 16:31
0

Dzięki za pomoc, ale niestety klasy ani "rotate", ani "enlarge" nie działają - próbowałem dodać transform-origin, a po zmianie "float" na "none" strona się rozjeżdża, a interfejs i tak się nie dostosowuje :(

edytowany 1x, ostatnio: MiSieeQ, 2014-11-10 16:34

Pozostało 580 znaków

2014-11-10 16:43
0

wrzuć to na jakiś jsbin albo po prostu do klikania w wersji live jak możesz


Pozostało 580 znaków

2014-11-10 17:12
0

Mam nadzieję, że te link działa - pierwszy raz mam styczność z jsbin :)

http://jsbin.com/xocedi/1/edit?html,css,output
edytowany 4x, ostatnio: MiSieeQ, 2014-11-10 18:31

Pozostało 580 znaków

2014-11-11 12:42
0

Problem z obrotem rozwiązany ;) pozostaje nadal temat stworzenia responsywnego designu - będę wdzięczny za jakiekolwiek pomysły :)

edytowany 1x, ostatnio: MiSieeQ, 2014-11-11 12:42

Pozostało 580 znaków

2014-11-11 23:38
adruab
0

Poczytaj o CSS media queries.
W bootstrapie wystarczy, że stworzysz odpowiednią siatkę używają klas col-sm- col-md- etc.

Możesz ustawić np żeby blok z menu posiadał klasy col-sm-12 i col-md-2 co jest równoznaczne temu, że blok ten będzie zajmował 2 z 12 kolumn jeżeli szerokość strony jest większa niż domyślnie chyba 700 kilka pixeli, (da się to odpowiednio skonfigurować pod swoje potrzeby na stronie z której pobierasz bootstrapa), a w momencie w którym szerokość okna jest mniejsza przeskoczy on w górę/dół (w zależności od kolejności w kodzie strony) i będzie wypełniał 100% szerokości strony.

Zobacz sobie jak działa grid w przykładach na stronie http://getbootstrap.com/css/#grid
Ewentualnie zobacz sobie też gotowe szablony http://getbootstrap.com/examples/dashboard/

Możesz też media query napisać sobie sam od zera i odpowiednio pozycjonować/zmienić wygląd bloku przy zmianie szerokości strony.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0