Twitter Bootstrap adaptabil pentru orice rezoluţie


Formidabilul framework numit mai pe scurt Bootstrap permite să realizăm webaplicaţii responsive, adică din acelea care îşi adaptează designul automat după rezoluţie. Informaţii mai multe veţi găsi mergând aici. Eu doresc doar să ofer mai jos un cadru simplu de la care se poate porni (de fapt e cadrul standard oferit de Bootstrap, tradus pe ici pe colo şi pregătit pentru a fi responsive). Aşa după cum veţi vedea din cod, magia presupune două rânduri: linia 5, respectiv linia 10 din codul pus mai jos. Cel mai bine e să deschideţi exemplul de aici într-o fereastră nouă şi să vă jucaţi cu ea.

imagine

În ce sens să vă jucaţi? Redimensionaţi fereastra. Veţi observa că meniul pe care l-aţi văzut iniţial îşi schimbă forma (ca în captura de mai sus). De asemenea veţi observa că textul de sub “Salut” variază după cât de lată/îngustă e pagina. Există nişte clase disponibile care ascund sau arată conţinutul după cum e cazul. Trebuie să admit că sunt foarte utile. Oricât de responsive e designul, tot vei dori anumite lucruri să arate cumva (sau deloc) pentru o anumită rezoluţie faţă de altă rezoluţie. Desigur, poţi şi la nivel de CSS să intervii (se explică în linkul al doilea indicat mai sus).

Acum, înainte să vă las cu codul promis, câteva observaţii personale:

  • per ansamblu e foarte uşor să realizezi un design responsive cu Bootstrap: divurile se redimensionează frumos sau se aşează unul sub altul când nu mai au spaţiu să stea alăturat;
  • dacă ai iframe-uri (cum am avut eu, ci nişte cutiuţe Box.com), pune-le la lăţime 100% şi în majoritatea cazurilor ai terminat bătaia de cap;
  • totuşi, nu va fi totul perfect şi trebuie să testezi bine pentru a găsi problemele şi a le rezolva;
  • unele lucruri e bine să le eviţi de tot: de exemplu nici popover-urile şi nici dropdown-urile pe două niveluri nu se comportă bine de sub tabletă sau smartphone;
  • şi cred că mai erau nişte observaţii… dar nu mi le amintesc pe moment :).

Iată deci codul. (Am scos codul căci strica feed-ul. Deschideţi această pagină şi vedeţi sursa ei.) Simplu! Încercaţi de sub tabletă DeiVerbum.ro, un proiect la care am lucrat – şi mai am de lucru!!! – în ultima vreme, folosind Bootstrap. Veţi vedea că se descurcă destul de bine chiar şi pe smartphone-uri, în timp ce pentru desktop rămâne mai performant datorită în primul rând scurtăturilor din taste, ce lipsesc la dispozitive cu touch-screen.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (4 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *