Arhiva pentru tagul “Bootstrap”

Typehead: pentru Bootstrap 3 şi nu numai

Una dintre deciziile asupra cărora sper să se revină a fost eliminarea din Bootstrap 3 a componentei pentru precompletare de text. Era o treabă simplă, frumos încadrată în Bootstrap… de ce au scos-o? Acum soluţia este un plugin extern, formidabil, nimic de spus, dar oricum ai nevoie de nişte paşi în plus. Mai exact ai nevoie de typehead.js, care ne oferă o demonstraţie din chiar prima pagină şi mai multe demonstraţii aici. Da, puternic! Totuşi, pentru proiecte simple webmasterii mai începători riscă mai mult să îşi cam prindă urechile.

imagine

Şi unde mai pui că după ce ai făcut partea JavaScript să meargă… zero la capitolul CSS. Da, typehead.js nu include nimic pentru partea de aspect. În timp ce exemplele arată …


Bootbox.js pentru Bootstrap

Nu ştiu cât de mult vă place vouă Bootstrap, dar mie îmi place mult de tot. Şi de la sine oferă mult, o bază solidă de pornire, dar evident nu poate acoperi toate gusturile şi mai ales nevoile. La un proiect la care am lucrat recent trebuia să ofer posibilitatea ştergerii unor informaţii. Evident că nu afişez mesajul de mai jos :). Ideea e că ferestrele modale oferite de Bootstrap cer un cod luuuung, şi dacă tu ce vrei sunt scurte confirmări te cam plictiseşti cu acele coduri. Şi uite aşa cineva s-a gândit să scrie Bootbox.js, care uşurează enorm munca.

imagine

Avem trei tipuri de dialog, după nevoi:

  • tip alertă: bootbox.alert(mesaj,callback);
  • tip întrebare cu da şi nu: bootbox.prompt(mesaj,callback);
  • tip complex: bootbox.confirm(mesaj,callback);


Ratchet: pentru aplicaţii mobile

Aplicaţiile pe care le-am făcut pentru Android, până acum, au fost toate realizate cu jQuery Mobile. Cu care, admit, am o relaţie de love & hate, care nu mă panichează pentru că aşa era într-o vreme şi cu jQuery UI. Dacă nu acum, poate peste câteva luni voi încerca ceva: să fac o aplicaţie pentru mobile cu Ratchet. De ce? Pentru că Bootstrap şi pentru că place ;). Pe româneşte: Ratchet a fost adoptat oficial de Bootstrap, ceea ce mie îmi sporeşte încrederea în acest proiect. El există de vreo doi ani, dar în primele luni ale acestui ani a prins aripi.

imagine

Pagina Getting started ne explică pas cu pas cum să începem şi chiar nu pare greu. Ni se …


Yamm 3 pentru meniuri mega

Mega-meniurile sunt folosite de unele situri permiţând o structurare mai flexibilă a opţiunilor… f. utilă când sunt muuulte. Desigur, totul e să nu abuzezi de aşa ceva. Din păcate constat că multe soluţii pentru mega-meniuri nu mai sunt întreţinute de 2-3-4 ani, aşa că la acest capitol singurul care mi s-a părut credibil pe moment este Yamm 3, adică Yet Another Mega Menu. Atenţie: componenta este pentru Bootstrap 3, ceea ce poate fi o limitare serioasă dacă nu aveaţi de gând să folosiţi Bootstrap 3.

imagine

Submeniurile se pot extinde pe toată suprafaţa (lăţimea) meniului, putându-se folosi structura de grid – binecunoscută celor ce utilizează Bootstrap 3 – pentru a grupa opţiunile. Pentru aceasta folosiţi .yamm-fw (de la full width) la clasa dropdown …


LayoutIt: "desenezi" cu Bootstrap

Cu ceva vreme în urmă, Twitter Bootstrap a ajuns la versiunea 3. Între puţinele instrumente online care s-au aliniat noii versiuni este Layout It, un excelent mod de a porni un design cu Bootstrap. De fapt merge şi cu 2, dacă aţi rămas fani ai versiunii anterioare. Dacă însă vreţi să fiţi la zi, daţi click pe Start Now with Bootstrap 3! Veţi scuti câteva minute, chiar zeci de minute, în care aţi scrie linie cu linie partea HTML şi JavaScript necesară diferitelor componente.

imagine

După cum se poate vedea în captura următoare, avem un editor vizual în care tragem cu mouse-ul componentele dorite pentru a crea designul dorit. Unele componente au şi opţiuni suplimentare, precum în cazul butoanelor. …


UIkit 1.1 şi Bootstrap 3

Am dat zilele acestea peste UIkit, o altă bibliotecă ce îţi permite să porneşti rapid un sit cu „ingrediente” ce arată bine, via HTML, CSS şi JavaScript. În fapt îmi aminteşte mult, mult de tot, de Twitter Bootstrap, având poate un 80% suprapunere, în rest fiecare cu câte ceva nou. Drept urmare vom găsi şi aici cele necesare pentru a aranja textul pe coloane, pentru a avea formulare frumoase, meniuri, taburi, dropdown-uri, ferestre modale şi altele.

imagine

Avem şi nişte opţiuni pentru animaţii simple (dacă vrem ca nişte div-uri să apară cu fade sau curgând dintr-o anumită direcţie). Cu Overlay putem uşor suprapune un text descriptiv peste …


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 …


Twitter Bootstrap cu alte culori

Am scris în ianuarie pentru prima oară despre Twitter Bootstrap şi au urmat apoi câteva articole mai în detaliu… dar m-am oprit. Însă nu m-am oprit din a folosi acest framework deosebit. În fapt am avut două proiecte deja scrise cu el şi sunt foarte mulţumit! Dacă nu mă înşel, un comentariu al unui cititor spunea cândva ceva de genul: “dar cu Bootstrap nu vor arăta toate siturile la fel?” Ei bine, nu. Bootstrap ne permite chiar din pagina oficială să afectăm în primul rând culorile, dar puţin şi unele dimensiuni (de la fonturi, la elemente, precum înălţimea la nabar).

imagine

Ce trebuie să facem este să pornim de la pagina Customize. Desigur, dacă vrem să reducem dimensiunea framework-ului vom …


Twitter Bootstrap: informaţii plutitoare

Informaţii plutitoare sună prea abstract? Nu şi dacă aţi privit la captură (exemplul live e aici), de unde cel puţin cu termenul tooltip v-aţi luminat. Vom vedea mai încolo şi ce e cu popover, dar să o luăm cu începutul. Navigatoarele oferă implicit un sistem de tooltip, pur şi simplu indicând un title la link, imagine… Dar nu e foarte estetic, nici configurabil. Ei bine, cu Twitter Bootstrap lucrurile se simplifică puţin. Trebuie însă să folosim puţin JavaScript, linia esenţială fiind $(‘[rel=ajutor]’).tooltip();

imagine

După cum bănuiţi, în loc de [rel=ajutor] putem pune ce selector dorim. Eu am pus acesta, astfel că un link cu rel="ajutor" va avea automat arătat ce este în title ca şi tooltip. Foarte simplu. Şi tot …


Twitter Bootstrap: tabele, formulare, imagini

Continuăm incursiunea-reclamă pentru Twitter Bootstrap cu alte câteva elemente foarte-foarte comune în mai orice pagină web: tabele, formulare şi imagini. Şi ca să începem cu sfârşitul, vă invit să vedeţi ceea ce mai jos este doar captură dând click aici. Vreţi şi un bonus? Redimensionaţi fereastra cu acea pagină şi observaţi cum elementele se adaptează lăţimii disponibile. Da, fără nici o bătaie de cap toate aceste structuri incluse se vor redimensiona corespunzător, sau vor trece una sub alta când nu mai există lăţimea necesară. Cool!

imagine

Să o luăm rapid la rând câte un element. Desigur, pe scurt. Despre tabele mai întâi (documentaţia oficială): totul porneşte de la a pune clasa table la un tabel şi …