Cele mai frecvente 10 greșeli de bootstrap pe care le fac dezvoltatorii

La prima vedere, Bootstrap pare destul de simplu. Și într-adevăr, nu este dificil să începi să folosești Bootstrap. Există o documentație Bootstrap foarte bine scrisă, cu multe exemple de cod HTML, CSS și JavaScript. Cele mai multe dintre capcanele importante sunt menționate acolo, dar totuși unele greșeli sunt destul de subtile sau au cauze ambigue. Deoarece Bootstrap pare foarte simplu și ușor de utilizat, mulți dezvoltatori se grăbesc în cadru și astfel apar greșeli.

Vom arunca o privire la 10 dintre cele mai frecvente greșeli, probleme și concepții greșite Bootstrap atunci când dezvoltatorii încep să-l folosească.

Greșeală comună Bootstrap #1: Concepții greșite de bază despre cadru

Există câteva concepții greșite de bază despre cadrul Bootstrap pe care oamenii le au. Acest lucru se poate datora faptului că nu este anunțat clar pe site-ul Bootstrap sau pentru că oamenii nu își iau suficient timp pentru a citi documentația. Cert este că, uneori, dezvoltatorii ajung în colț care fac lucruri greșit și apoi dau vina pe cadru. Deci, să clarificăm câteva fapte de bază.

Bootstrap este cuprinzător, dar nu este nici imens, nici enorm. Bootstrap vine la pachet cu șabloane de design HTML și CSS de bază, care includ multe componente comune ale UI. Acestea includ tipografie, tabele, formulare, butoane, glificonuri, meniuri derulante, butoane și grupuri de intrare, navigare, paginare, etichete și insigne, alerte, bare de progres, modale, file, acordeoane, carusele și multe altele. Puteți alege și alege câteva dintre ele și, cu configurația sa implicită, puteți genera rapid o interfață de utilizare care se ocupă de mai multe browsere, dispozitive și rezoluții cu un format frumos.

Bootstrap nu va face totul pentru dvs., dar oferă un set de valori implicite rezonabile din care să aleagă și îi va ajuta pe dezvoltatori să se concentreze mai mult pe munca de dezvoltare decât să se preocupe de design și îi va ajuta să obțină rapid un site web arătos. Permite prototiparea rapidă, dar nu limitează dezvoltatorii pe drum.

Este suficient de extensibil încât oricine îl poate ajusta pentru a se potrivi nevoilor sale. La început, Bootstrap avea unele limitări, iar pe atunci era complicat să extinzi stilurile implicite. Dar, pe măsură ce cadrul s-a maturizat, extensibilitatea sa îmbunătățit.

Greșeala obișnuită Bootstrap #2: Gândirea că nu trebuie să cunoașteți CSS pentru a utiliza Bootstrap și că nu aveți nevoie de un designer

Dacă te gândești că dacă folosești Bootstrap nu va trebui să cunoști CSS, te înșeli foarte tare. Orice dezvoltator front-end trebuie să învețe CSS și HTML5. Bootstrap elimină o mulțime de părți CSS complicate de pe umerii dezvoltatorilor (cum ar fi prefixele specifice furnizorului) și oferă un stil de bază implicit, dar trebuie totuși să înțelegeți CSS. Nu trebuie să știți cum funcționează interogările media, dar trebuie să înțelegeți cum funcționează designul responsive. Bootstrap nu este menit să vă învețe CSS, dar vă poate ajuta dacă doriți. Examinarea codului sursă în LESS sau SASS este un punct de plecare excelent.

Pe un subiect similar, nu trebuie să fii designer și poți argumenta că nu ai nevoie de un designer cu Bootstrap. Cu toate acestea, dacă este posibil, folosiți ajutorul unui designer. O plângere comună împotriva Bootstrap este că toate site-urile Bootstrap arată la fel și este ușor să ajungeți la un site web care arată exact ca orice alt site Bootstrap. Dar acest lucru nu trebuie să fie adevărat. Milioane de site-uri web sunt construite cu Bootstrap. Expoziții grozave ale modului în care pot fi realizate diferite modele pot fi găsite la Bootstrap Expo, care colectează site-uri care sunt construite cu Bootstrap. Aruncă o privire, inspiră-te și începe să construiești propria ta variantă de design.

Greșeala obișnuită Bootstrap #3: Schimbarea fișierului CSS Bootstrap

Pentru a face totul simplu și simplu: nu modificați fișierul bootstrap.css .

Dacă faceți modificări fișierului bootstrap.css , lucrurile se vor complica foarte repede. Întregul design se va rupe atunci când doriți să actualizați fișierele Bootstrap. Puteți suprascrie în propria foaie de stil culorile implicite de bootstrap, stilurile, marginile, umpluturile, totul. Nu este deloc nevoie să atingeți foaia de stil bootstrap.css .

Nu știi LESS sau SASS? Nicio problemă, vă puteți crea propriul fișier CSS și puteți suprascrie ceea ce doriți din foaia de stil originală bootstrap.css . Așa cum am menționat în greșeala anterioară, cunoașterea CSS este obligatorie. Creați-vă noul selector CSS, utilizați-l în HTML și, atâta timp cât vă declarați clasele CSS după stilurile Bootstrap, definițiile dvs. vor suprascrie valorile implicite Bootstrap.

Încă vrei să afli mai multe și să mergi mai adânc? Vă sugerez cu tărie și vă încurajez să faceți acest lucru. Utilizați codul sursă Bootstrap LESS. Veți înțelege mai bine ce se întâmplă și unde se întâmplă dacă utilizați sursa LESS și nu CSS static.

Greșeala obișnuită Bootstrap #4: Folosind tot ceea ce oferă Bootstrap

După cum am menționat anterior, Bootstrap este cuprinzător. Oferă o mulțime de componente UI, șabloane de design HTML și CSS și pluginuri JavaScript. Dar te rog, fii selectiv. Nu trebuie să utilizați toate caracteristicile Bootstrap.

Acest lucru este valabil mai ales pentru pluginuri. Alegeți numai pluginuri care au sens și nu folosiți totul pentru că arată frumos și cool. Site-ul dvs. poate fi exagerat cu ușurință. Luați în considerare pentru început că nu includeți deloc fișierul bootstrap.js și creați un site folosind doar HTML și CSS simplu. Și apoi, adăugați componente numai după cum este necesar pentru anumite roluri, unul câte unul.

Greșeală comună Bootstrap #5: Folosirea greșită a unui prompt modal

Modalitățile Bootstrap oferă solicitări de dialog flexibile cu funcționalitatea minimă necesară și vine cu setări implicite inteligente. Deși modal este ușor de utilizat și oferă o personalizare bogată, există câteva lucruri de care trebuie să ținem cont pentru a evita utilizările greșite obișnuite.

Se afișează mai multe solicitări modale simultan

Bootstrap nu acceptă modalii suprapuse. Numai un modal la un moment dat poate fi vizibil. Afișarea mai multor modal la un moment dat poate fi realizată, dar necesită scris cod personalizat pentru a gestiona acest lucru corect.

Bootstrap modal apare sub fundal

Dacă containerul modal sau elementul său părinte are o poziție fixă ​​sau relativă, modalul nu se va afișa corect. Asigurați-vă întotdeauna că containerul modal și elementele sale părinte nu au o poziționare specială aplicată. Cea mai bună practică este să plasați codul HTML al unui modal chiar înainte de eticheta de închidere </body> sau chiar mai bine într-o poziție de nivel superior în document, imediat după eticheta de deschidere <body> . Acesta este cel mai bun mod de a evita ca alte componente să afecteze aspectul și funcționalitatea modalului.

Modal pe dispozitivele mobile

Există câteva avertismente de care dezvoltatorii trebuie să fie conștienți atunci când au de-a face cu modali pe dispozitive mobile cu tastaturi virtuale. Acest lucru este valabil mai ales pentru dispozitivele iOS, unde există o eroare de randare care nu actualizează poziția elementelor fixe atunci când este declanșată tastatura virtuală. Acest lucru nu este gestionat de Bootstrap, așa că este la latitudinea dezvoltatorului să gestioneze aceste situații în cod în cel mai bun mod pentru aplicația în cauză.

Greșeală comună Bootstrap #6: Problemă cu componenta butonului de introducere a fișierului

Bootstrap nu are o componentă desemnată pentru un buton de încărcare a fișierelor. O soluție simplă și elegantă folosind numai HTML și CSS poate fi realizată cu următorul exemplu de cod:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Există multe exemple despre cum să obțineți un efect similar. Acest exemplu de cod este împrumutat de la Cory LaViska, iar pe site-ul său puteți citi o explicație mai detaliată a acestei probleme. Există, de asemenea, un exemplu extins cu mai multe funcționalități care utilizează cod JavaScript suplimentar.

Greșeala obișnuită de bootstrap #7: Complicarea excesivă cu JavaScript și ignorarea atributelor „date-”.

Designerii, sau doar dezvoltatorii JavaScript începători, se pot scufunda foarte ușor în dezvoltarea web și pot crea pagini web folosind numai HTML, CSS și Bootstrap. Dacă nu sunt foarte buni la codificare, pot cădea în capcana utilizării greșite a JavaScript sau pur și simplu a complica prea mult. Este important de precizat că toate pluginurile Bootstrap pot fi utilizate exclusiv prin intermediul API-ului de markup, fără a scrie o singură linie de JavaScript. Acesta este API-ul de primă clasă al lui Bootstrap și ar trebui să fie prima dvs. considerație atunci când utilizați pluginuri.

De exemplu, putem activa un dialog modal fără a scrie JavaScript doar setând data-toggle="modal" pe un element de controler, cum ar fi un buton sau ancoră, și să transmitem parametri suplimentari folosind atribute de data- . În codul de mai jos, vizam codul HTML cu ID-ul #myModal . Am specificat că modalul nu se va închide atunci când utilizatorul face clic în afara modului utilizând opțiunea data-backdrop și am dezactivat evenimentul tastei de evacuare care închide un modal cu opțiunea data-keyboard . Toate într-o singură linie de cod HTML:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Greșeală comună Bootstrap #8: Ignorarea instrumentelor care ușurează dezvoltarea Bootstrap

Se întâmplă greșeli și fiecare dezvoltator le face ocazional. Acest lucru este inevitabil, dar este modul în care faci față greșelii care contează. Echipa Bootstrap a observat, urmărind instrumentul de urmărire a problemelor, că oamenii fac unele greșeli mai des. De aceea au încercat să automatizeze procesul de dezvoltare. Rezultatul este Bootlint, un instrument HTML pentru proiectele Bootstrap. Bootlint poate fi folosit fie în browser, fie din linia de comandă prin Node.js și va verifica automat paginile web Bootstrap pentru multe greșeli comune de utilizare Bootstrap. Adăugarea Bootlint la lanțul de instrumente de dezvoltare web poate elimina o mulțime de greșeli comune care încetinesc de obicei dezvoltarea unui proiect.

În cazul în care doriți să contribui la proiectul Bootstrap, merită să verificați Rorschach. Rorschach este un bot Bootstrap de verificare a sanității cererii de extragere, care execută câteva verificări la fiecare cerere de extragere nouă. Dacă o verificare a sensului eșuează, se lasă un comentariu informativ asupra cererii de extragere explicând greșeala și cum se remediază, apoi închide cererea de extragere.

Greșeală comună de bootstrap #9: probleme de incompatibilitate cu browserele IE8 și mai vechi

Bootstrap este creat pentru a funcționa la maximum în cele mai recente browsere desktop și mobile. Browserele mai vechi pot afișa componente și elemente în stil diferit, dar totul ar trebui să fie complet funcțional. Suportul include Internet Explorer 8 și 9, cu o notă importantă că unele proprietăți CSS3 și elemente HTML5 nu sunt pe deplin acceptate de aceste browsere.

Pentru a obține suport deplin pentru Internet Explorer 8 și alte browsere mai vechi, trebuie să utilizați un polyfill pentru CSS3 Media Queries Respond.js, HTML 5 shim care permite utilizarea elementelor HTML5 și o etichetă IE <meta> adecvată în capul HTML pentru asigurați-vă că IE nu rulează în modul de compatibilitate. Capul tău HTML ar trebui să arate cam așa:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

În cazul Respond.js , aveți grijă de următoarele avertismente în mediile de dezvoltare și producție.

Greșeala obișnuită de bootstrap #10: Ignorarea celor mai bune practici

Una dintre întrebările frecvente despre Stack Overflow este cum să faci meniul derulant Bootstraps să se deschidă prin trecerea cu mouse-ul, mai degrabă decât prin clic. Deși soluția la această întrebare nu este complicată și poate fi făcută folosind doar CSS, nu este recomandată. Această caracteristică a fost lăsată în afara cadrului intenționat, iar aceasta este o decizie de proiectare luată de echipa de dezvoltare. Din nou, se poate, dar trebuie să înțelegem repercusiunile și să înțelegem că există cele mai bune practici, în special pentru cadrele mobile first. Raționamentul din spatele acestei probleme specifice este că a face ca lucrurile să funcționeze pe hover nu îi ajută pe utilizatorii care au dispozitive tactile. Pe astfel de dispozitive nu există hover, doar evenimente tactile. Astfel, acest lucru nu va funcționa corect pe niciun dispozitiv cu atingere.

Bootstrap Concluzie greșeli

Sper că acest scurt ghid Bootstrap vă va ajuta să evitați unele dintre greșelile comune, să clarificați concepțiile greșite obișnuite și să vă ajute să obțineți cea mai mare parte a cadrului. Rețineți că Bootstrap nu este pentru toată lumea și nici nu este potrivit pentru fiecare proiect. Când alegeți un cadru, trebuie să vă luați ceva timp pentru a citi documentația și trebuie să petreceți ceva timp jucându-vă cu cadrul pentru a obține o imagine mai bună a modului în care funcționează. Acest lucru este valabil și pentru Bootstrap.

Citiți documentația, jucați-vă și experimentați cu mostrele, obțineți corect elementele de bază și bucurați-vă de a crea modele noi și frumoase.