CSS - bootstrap framework

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
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;
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 :(

0

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

0

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

http://jsbin.com/xocedi/1/edit?html,css,output
0

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

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.

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