Share
Bine ați venit în această serie care acoperă cadrul Twitter Bootstrap (BS) UI și CSS.
În cartea mea, Twitter Bootstrap Succinctly, am stabilit baza inițială și am început cu Bootstrap 2.
Din moment ce această carte a fost lansată, cu toate acestea, Bootstrap 3 a devenit versiunea mainstream.
În această serie vom continua să construim pe această bază și să mergem mai departe folosind BS v3. Vom încerca să vedem unde sunt diferite lucrurile și, pe măsură ce explorăm noile caracteristici, vom vedea că o mare parte din ceea ce era prezent în v2 este încă aplicabil v3.
Dacă nu ați citit încă cartea despre Bootstrap 2, atunci vă încurajez să faceți acest lucru, așa cum mă voi referi la acesta în diferite puncte din întreaga serie.
De ce? Cred că pentru a înțelege întregul peisaj Bootstrap, trebuie să îl examinați de la început. Trebuie să fii în stare să înțelegi ce a propus să faci și cum.
Veți putea să urmăriți doar această serie și să învățați elementele de bază ale BS v3, dar veți obține o înțelegere mult mai profundă și mai bună dacă citiți prima carte v2.
Deci, ce sa schimbat de la v2 la v3?
Destul de mult.
Schimbarea majora intre cele doua variante este ca v3 este acum "Mobile First". Bootstrap v2 a fost un kit CSS cu aspect de răspuns, dar caracteristicile sale mobile și receptive au fost întotdeauna al doilea loc pentru caracteristicile sale UI bogate. De fapt, pentru a face ca lucrurile receptive să funcționeze corect, a trebuit să includeți un al doilea fișier CSS al cărui unic scop era să permită funcțiile mobile, receptive și nimic altceva.
În v3 această situație a fost complet inversată. Întregul cadru este acum prietenos cu dispozitivele mobile și receptiv în afara casetei și acum este nevoie de lucru suplimentar pentru a vă adapta aspectul pentru formate de ecran mai mari. Nu mă înțelege greșit - nu înseamnă deloc o muncă mare. Cele mai multe dintre ceea ce trebuie să modificați este pur și simplu să schimbați cursurile și să structurați corect marcajul HTML.
Cealaltă schimbare majoră este numirea de clase și apeluri API. Multe dintre numele de clasă introduse în versiunea v2 sunt acum depreciate sau au fost redenumite la ceva mai potrivit pentru scopul lor.
De asemenea, sa făcut un efort major pentru redenumirea claselor pentru a fi mai consecvente. De exemplu, în v2, pentru elementele care vizează culoarea de eroare RED, am avut următoarele clase:
Accentsconagua
BTN-pericol text-eroare tr.error .important .important .eroare progres-pericol Acum, în v3, acestea au fost consolidate astfel încât denumirea să fie similară în toate componentele, după cum urmează:
BTN-pericol Text-pericol .Pericol .Pericol progres-bar-pericol După cum puteți vedea, consecvența este acum un jucător important în clasele v3 și multe alte modificări similare au fost făcute în întregul cadru.
Au fost și câteva schimbări minore. De exemplu, modelul de box folosit de Bootstrap a fost îmbunătățit considerabil, cu toate elementele acum utilizate frontieră-box ca model implicit de dimensionare a cutiei CSS.
Sistemul de rețea a fost extins și îmbunătățit și, în loc să fie un sistem monolit de rețea cu clase opționale, acesta este acum format din patru niveluri de dimensiuni ale rețelei destinate în mod specific telefoanelor, tabletelor, desktopurilor și desktopurilor mari.
Toate chestiile JavaScript au fost de asemenea acum distribuite pentru a reduce conflictul cu alte coduri JavaScript; evenimentele disponibile sunt acum mai bine numite pentru a reflecta scopul lor și sunt mult mai clar documentate.
modals și Navbars au fost mult îmbunătățite în ceea ce privește capacitatea de reacție și împreună cu schimbările de clasă, clasele de dimensionare pentru toate componentele (Inc Nav Modals) au fost acum aliniate.
În funcție de componente, unele componente mai vechi, mai puțin frecvent utilizate, au fost depreciate și eliminate, dintre care cele mai notabile sunt Acordeon componentă. Dar nu disperați - acordeonul a fost înlocuit cu un nou brand pliabil-panou care este mult mai flexibil decât predecesorul său.
Avem și noi, înguste Jumbotron, nou panou tipuri, grupuri de liste și multe altele.
În cele din urmă, una schimbă asta toata lumea va observa este aspectul și simțul: TWB V3 este plat. Are o singură interfață colorată, nouă, dar cu colțuri rotunjite.
Clasele de hover nu mai au efecte graduale frumoase în ele, iar barele de progres și butoanele nu mai arată semi-3D așa cum au făcut-o în v2. În schimb, ceea ce au dorit să mențină administratorii Twitter Bootstrap este să ușureze personalizarea aspectului și elementelor care apar în CSS.
Administratorii au pus la dispoziție o temă "Bootstrap", care face ca v3 să arate ca designul original v2 pentru a începe. În ultima parte a acestei serii, vă voi arăta cât de simplu este acum să înlocuiți diferitele clase și să vă arătați cum să revizuiți tema plană pentru a vă lua propriul aspect și simț.
Pentru moment, însă, dacă doriți experiența v2, va trebui să vă asigurați că includeți și fișierul CSS corespunzător, după cum este necesar. Dacă vrei să rămâi cu standardul v3, nu ai nevoie de nimic în plus.
Când BS2 a fost lansat pentru prima dată, singura modalitate de a obține acest lucru a fost printr-o descărcare de pe site-ul proiectului. Acest lucru a fost acoperit extensiv în prima carte, cu o discuție aprofundată despre exact ce fișiere au fost în fișierul zip și de ce.
Deoarece atât de mulți oameni foloseau Bootstrap, nu a durat mult înainte ca acesta să fie disponibil gratuit pe un CDN de către cei care conduc MaxCDN. Această tradiție a continuat și în baza de cod v3, iar acum puteți pur și simplu să vă asigurați instalarea standard v3 aleasă utilizând următoarele etichete de script HTML:
Dacă utilizați versiunile CDN, rețineți că, de asemenea, trebuie să vă asigurați că includeți o copie recentă a JQuery; niciuna dintre funcționalitățile BS3 JS nu va funcționa decât dacă faceți acest lucru.
Pe lângă link-ul CDN, există acum și o descărcare directă pe site-ul getbootstrap.com, nu numai pentru pachetul standard JavaScript & CSS descris în cartea anterioară, ci și o legătură directă către un fișier zip al versiunii originale " Mai puține "surse și o conversie la" Sass "pentru acei oameni care ar dori să poată include o versiune complet variabilă, personalizabilă a kit-ului în propriul sistem de construcție folosind instrumente cum ar fi Grunt pentru a automatiza lucrurile.
În plus față de noile surse, acum puteți folosi și Bower pentru a instala tot ce aveți nevoie folosind următoarele din linia de comandă a folderelor proiectului:
bower instalează bootstrap
Bower este un sistem de schelă HTML și pachet conceput pentru a automatiza o mare parte din placa de cazan pentru aplicații. Nu aveți nevoie să înțelegeți că ați înțeles BS v3, dar o căutare rapidă de la Google pentru "Bower" va aduce multe referințe pentru a vă aprofunda înțelegerea.
Pe o notă similară, BS v3 poate fi instalat și utilizând managerul de pachete NuGet dacă lucrați în Visual Studio. Ca și Bower, acest lucru va automatiza o mare parte din procesul de instalare și configurare a fișierelor necesare. Aveți grijă, totuși, există multe pachete Bootstrap disponibile în NuGet, dintre care unele vă vor determina mai multă muncă decât vă vor salva.
În cele din urmă, personalizatorul TWB este încă disponibil. A fost foarte restructurată și reconstruită pentru a oferi mai multe opțiuni și o privire mai ușoară și mai intuitivă la ceea ce schimbați și de ce.
De fapt, acum este atât de ușor să schimbi lucrurile folosind personalizatorul pe care proiectantul sau echipa de proiectare poate să-l facă 90% din munca necesară pentru a seta culorile și branding-ul descărcării înainte ca fișierele necesare să fie descărcate. Acest lucru permite departamentului dvs. de proiectare să înceapă imediat să facă opțiuni de culoare și aspect, în timp ce lucrați la aspectul paginilor și codul suplimentar pentru interactivitatea necesară. Apoi, tot ce este necesar este să vă înlocuiți pur și simplu fișierele dvs. implicite cu fișierele furnizate de către designerii dvs. și ar trebui să apară o modificare tematică instantanee.
În mod oficial, BS v3 acceptă numai ultima rundă de browsere compatibile HTML 5 și Internet Explorer 10 și mai sus.
În realitate, cadrul sprijină, de asemenea, IE8 și IE9; cu toate acestea, există câteva caracteristici ale CSS3 și HTML5 care nu funcționează destul cum era de așteptat. În special, dacă doriți ca elementele responsabile să funcționeze corect, va trebui să le utilizați respond.js, pe care le puteți descărca de pe acest depozit GitHub.
Odată ce adăugați răspunde la proiectul dvs., este doar o așteptare generală la ceea ce a fost și nu a fost adăugat la diferite browsere, la momente diferite.
Părțile care vor fi cele mai observate ca lipsă sunt după cum urmează:
Pentru IE8:
border-radius este nu sprijinit.box-shadow este nu sprijinit.transforma este nu sprijinit.tranziție este nu sprijinit.înlocuitor textul este nu sprijinit.Acest lucru înseamnă, în esență, faptul că textul cu substituent în elementele de intrare nu se va afișa și orice lucru care folosește colțuri rotunjite sau căderi umbre sau are vreun fel de tranziție sau transformare a elementului nu va fi afișat corect.
Pentru IE9:
border-radius este sprijinit.box-shadow este sprijinit.transforma este susținut (dar numai cu -Domnișoară prefix).tranziție este nu sprijinit.înlocuitor textul este nu sprijinit.Lucrurile sunt ușor îmbunătățite în cazul în care IE9 este în cauză-colțuri rotunjite și umbre picătură sunt acum bine, și transformările vor funcționa, de asemenea, atâta timp cât acestea au -Domnișoară prefix.
Cu toate acestea, tranzițiile și poziționările cu privire la elementele de intrare lipsesc din păcate.
Matricea oficială de suport pentru versiunea curentă a BS3 în browserele curente arată astfel:
| Crom | Firefox | IE | Operă | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| ferestre | ✓ | ✓ | ✓ | ✓ | ✗ |
Dacă vizați IE9 și IE8 și utilizați respond.js pentru a sprijini aceste eforturi, vă rugăm să fiți conștienți de următoarele aspecte:
Va trebui să te referi la respond.js docs dacă găzduiți CSS, etc. pe un domeniu diferit (de exemplu un CDN) pentru a atenua problemele legate de mai multe domenii.
Securitatea browserului vă va provoca probleme fişier:// și @import bazate pe resurse.
Specific @import este asta respond.js nu poate citi normele în mod corespunzător, ceea ce este important pentru utilizatorii Drupal, așa cum o folosește Drupal @import destul de greu.
Modurile de compatibilitate IE mai vechi vor opri funcționarea completă a Bootstrap, nu doar cu respond.js, astfel încât să aveți grijă dacă testați compatibilitatea înapoi utilizând un IE modern în modul de emulare - rezultatele vor fi cel mai probabil nu fie ceea ce vă așteptați.
Acest tutorial reprezintă un capitol din Bootstrap 3 Succinctly, o carte electronică gratuită de la echipa de la Syncfusion.
