Responsivita webu, omezení bootstrap3

30. 10. 2014 10:50:51

Zrovna řeším responsivitu jednoho webu. Web je postaven na boostrapu3. Veškeré skrývání a šířku elementů řeším samozřejmě přes třídy col-xx-yy (např. col-md-12). Problém je v tom, že nejmenší velikost je xs a tam spadají všechna rozlišení menší než 768px. Já bych ale potřeboval skrýt nějaké elementy, případně změnit jejich šířku při velikosti pod 450px. Jak to v bootstrapu udělat co nejelegantněji?

Díky za nápady.

30. 10. 2014 10:50:51

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/responsivita-webu-omezeni-bootstrap3/#reply1064956

ghostik

(21 hodnocení)

30. 10. 2014 11:43:35

no, podival bych se, jak to delali v bootstrapu 2 (tam to jeste bylo)

a pak pridal:

@media (max-width: 450px) { ... }

30. 10. 2014 11:43:35

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/responsivita-webu-omezeni-bootstrap3/#reply1064955

Kloban

30. 10. 2014 12:03:38

No přes media query by to šlo poměrně jednoduše. Elementy které chci zneviditelnit bych hodil do nějaké třídy a pak jim nastavil display:none;

Ale přijde mi u bootstrap blbost hodit všechny zařízení pod 768px do jednoho pytle...

30. 10. 2014 12:03:38

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/responsivita-webu-omezeni-bootstrap3/#reply1064954

Vít Michalek

(14 hodnocení)

30. 10. 2014 14:50:13

Bootstrap je jen základ, dobrý na naučení (a pro jednoduché projekty)

Nejlepší je stanovit si "meze" v kterých se má něco měnit (skrývat, zalamovat atd) tyto meze si jasně nadefinovat pak hurá do práce.

Pro jeden projekt máme stanoveno 5 základních mezi - kde se dějí ty největší změny

Ale je tam dalších 20 rozměrů, při kterých upravujeme zobrazení pro jednotlivé prvky.

30. 10. 2014 14:50:13

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/responsivita-webu-omezeni-bootstrap3/#reply1064953

Honza Hommer

(12 hodnocení)

27. 11. 2014 08:50:45

Bootstrap má defaultně tyto breakpointy:

??? - 1200 px
1199 px - 992 px
993 px - 768 px
769 px - 480 px

Máš tedy dvě varianty:

Změn si ve variables proměnnou screen-xs na tvých 450 px, nebo kolik přesně potřebuješ.

Nadefinuj si promměnou screen-xss (s rozměrem, který potřebuješ) a přepiš si styly pro grid a responsive-visiblity. Není to zas tak složité a je to práce na pár desítek minut.

27. 11. 2014 08:50:45

0 0

Líbí se: zatím nikdo

Nelíbí se: zatím nikdo

https://webtrh.cz/diskuse/responsivita-webu-omezeni-bootstrap3/#reply1064952

Pro odpověď se přihlašte.

Přihlásit