Accentsconagua

Mobile primul cu Bootstrap 3

Cod
Share

Bine, acum câteva săptămâni, Mark Otto și ceilalți tipi responsabili pentru dezvoltarea și întreținerea lui Bootstrap au anunțat lansarea oficială a celei de-a treia versiuni a cadrului și a venit pe steroizi. Să vedem ce primim.

Ce mai e nou?

În primul rând, cele mai importante schimbări pe care le veți găsi în noua versiune de Bootstrap sunt suportul pentru site-urile web responsabile, de fapt modulul receptiv a fost eliminat. Acum, din centrul său, Bootstrap este mai mult decat atat, aceasta noua versiune vine cu abordarea "Mobile First", ceea ce inseamna ca aproape totul a fost reproiectat pentru a porni de la o dimensiune mai mica a ecranului si scala in sus (mai mult pe asta in cateva).

Aproape totul a fost reproiectat și reconstruit pentru a porni de la dispozitivele portabile și pentru a crește.

În aspectul și simțimea veți vedea și multe schimbări, proeminent faptul că întregul stil a devenit plat și există o temă opțională pentru un aspect 2.0-er. În plus, icoanele au trecut de la imagini la un font, care este cu adevărat la îndemână pentru a fi utilizate atunci când aveți nevoie de diferite dimensiuni și culori.

Sistem grilă

Să începem să vorbim despre Sistemul Grid, oh Grid-ul, de fapt, există patru sisteme Grid în această nouă versiune de Bootstrap, fiecare funcționând exact la fel, fiind diferențiat de lățimea ecranului la care funcționează.

Activarea rețelei

Pentru ca sistemul Grid să funcționeze corect și, de asemenea, pentru a asigura redarea corectă și zoom-ul tactil, adăugați meta tag-ul de vizualizare în documentul dvs.:

Diferite grile de lățime

Există patru sisteme Grid în această nouă versiune a cadrului, cu lățimea ferestrei de vizualizare fiind parametrul care le diferențiază. Lățimile care fixează frontierele între ele sunt următoarele:

  • Dispozitive foarte mici ~ Telefoane (< 768px)
  • Dispozitivele mici ~ Tablete (> = 768px)
  • Dispozitive medii Desktop-uri (> = 992px)
  • Aparate mari ~ Desktop-uri (> = 1200px)

Și fiecare dintre diferitele ferestre de vizualizare acceptate au o clasă specială pentru ao aborda, după cum urmează:

  • col-xs- ~ Dispozitive foarte mici
  • col-sm- Dispozitive mici
  • col-md- ~ Dispozitive medii
  • col-lg- ~ Dispozitive mari

Pentru a utiliza sistemul Grid veți avea nevoie de un element de container, cu o clasă "Container", și în interiorul unui al doilea container cu o clasă "rând". Observați că în ambele cazuri sufixul "fluid" a dispărut, în contrast cu Bootstrap 2. Și în cel de-al doilea container ați plasa coloanele.

 
 
col-xs-6
 
col-xs-6

După cum am menționat mai devreme, această nouă versiune de Bootstrap vine cu o abordare Mobile First, ceea ce înseamnă că coloanele cu o clasă sufixate cu "xs" sunteți mereu va fi flotat orizontal, indiferent de mărimea ferestrei de vedere. Dacă ați fi de spus, utilizați coloanele prefixate de un "Md" iar portul de vizualizare a fost mai mic de 992 pixeli (chiar 991 pixeli), acele coloane se vor stive unul sub altul cu o lățime de 100%, ca în exemplul următor.

 
 
col-md-4
 
col-md-4
 
col-md-4

Atunci când această pagină este vizualizată la un port de vizualizare de 992 pixeli sau mai mare, aceasta va arăta astfel:


Dacă s-ar întâmpla să vedeți acest document într-un port de vizualizare de 991px sau mai puțin, acesta ar arăta astfel:


De asemenea, puteți combina clasele pentru a aborda elementele dvs. la o anumită dimensiune a ferestrei de vizualizare. De exemplu, dacă în exemplul următor ați avea nevoie de primele două coloane flotate alături pe dispozitive mici (sm) și stivuite pe telefoane, puteți adăuga col-sm-6 în plus față de col-md-4 clasă.

 
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4

În acest caz, deschizând pagina într-un port de vizualizare cu o dimensiune mai mare de 991px, veți vedea trei coloane egale unul lângă celălalt, la fel ca în ultimul exemplu. Cu toate acestea, dacă ați vedea într-un port de vizualizare cu o lățime între 768px și 991px, veți obține următorul rezultat:


Ca și în exemplul de mai sus, puteți combina și aluneca coloane într-o mulțime de combinații diferite pentru a crea machete foarte complexe. Există mult mai mult pentru sistemul Grid în Bootstrap, dar trecerea în detaliu cu privire la fiecare aspect ar dura o perioadă de timp, astfel încât, pentru o examinare mai profundă a acestuia, aș sugera cu fermitate că mergeți înainte și căutați documentația.

Bootstrap CSS

Cele mai multe clase pentru partea de bază CSS a Bootstrap au rămas aceleași, totuși există unele modificări pe care trebuie să le ținem cont atunci când folosim această nouă versiune.

Codul în ansamblu, a fost re-scris și numele variabilelor s-au schimbat. Dacă vă uitați la fișierele .less, veți observa că toate variabilele din cadru au trecut de la CamelCase pentru a utiliza liniuțe pentru separarea cuvintelor și, de asemenea, fiecare nume de variabilă a fost standardizat într-un "element-stat-pseudo-stat"Aceasta înseamnă că stilurile specifice elementelor, cum ar fi:

    ...

Acum sunt prefixate cu elementul la care sunt aplicate, astfel încât în ​​această nouă versiune de Bootstrap ar deveni lista precedentă.

    ...

Același lucru este valabil și pentru listele cu "in linie"alte tipuri de modificări ale denumirilor variabilelor care reflectă în clasele pe care le-am cunoscut din zilele anterioare sunt cele legate de dimensiune, de exemplu cu butoane, în versiunea 2. * ați avea:

Aceste sufixe de mărime s-au modificat pentru a se potrivi cu convenția generală de denumire și aceasta este aceeași ca și pentru sistemul Grid, deci declarația butoanelor anterioare pentru versiunea a treia devine:

Același lucru este valabil și pentru dimensiunile de intrare și pentru declarațiile de vizibilitate.

Tabele responsabile

Sintaxa generală și aspectul tabelelor rămân aceleași în această versiune a cadrului, dar loial întregului paradigm "Mobile First", acum avem tabele receptive în această iterație a Bootstrap. Pentru a profita de aceasta, pur și simplu înfășurați întreaga masă într-un container cu o clasă de "receptiv-tabel", ceea ce va face este ca mesele să fie derulate orizontal pe dispozitive mici (< 768px).

 ... 
Și tabelul rezultat:

Formulare
În departamentul CSS, este în Formele în care ați vedea diferențele majore. Pentru început, fiecare intrare într-o formă din Bootstrap trei este acum afișată ca un element "bloc" cu o lățime de 100%. Atributele "dimensiune" pe care le puteți modifica cu o clasă în controalele de formă se referă la dimensiunea și dimensiunea fontului elementului și nu lățimea, pentru a controla că trebuie să îl puneți într-un container cu lățimea dorită.
Marcajul formularelor sa schimbat, de asemenea, în forma cea mai de bază, în versiunea 2. * un formular ar arăta așa.
 
 ...    
 
Marcajul pentru aceeași formă în noua versiune adaugă un element suplimentar și o clasă la intrarea în sine și merge după cum urmează.
 
 ...  
   
 
 
Bootstrap a fost creat având în vedere accesibilitatea, acesta fiind motivul adăugării atributului "role", notați că eticheta / combo-ul de intrare este înfășurată într-un ambalaj cu o clasă de "form-grup"și, ca orice altceva, aceasta are legătură cu natura receptivă a cadrului.
Formularul de căutare a dispărut în această versiune și, deoarece toate intrările și textarea sunt lățimea de 100% în mod prestabilit, trebuie luată în considerare în special formularele inline, însă marcarea pentru acestea este aproape identică cu cea a formularului anterior.
 
   
 
   
 
  
  

Rețineți adăugarea clasei "form-inline"la elementul de formă și cel al"sr-numai"la etichetă, această ultimă clasă are de a face cu partea de accesibilitate a cadrului.Utilizarea unei etichete este opțională cu formulare inline, cu toate acestea este foarte încurajată și nu rănește pe nimeni.Am apropiat,sr-numai"reprezinta Cititor de ecran numai. Deci cititorii de ecran vor găsi eticheta și "spune-i" utilizatorului.
În cele din urmă, pentru a crea o formă orizontală, setați pur și simplu lățimea etichetei setând "col-md-"sau"_sm"sau orice altceva și"control al etichetei", la fel ca în cazul versiunii a doua, și apoi înfășurați intrarea într-un container cu o lățime a coloanei proprii specificată.
 
  
  
 
 
Și forma rezultată.

Există și alte schimbări care s-au făcut în ceea ce privește formele, cum ar fi eliminarea "input-Prepend" și "input-append"clase, în favoarea"input-grup" și "input-group-addon"Cu toate acestea, mai sunt încă multe de acoperit, deci pentru detalii despre acest aspect, vă rugăm să consultați documentația.
Glyphicons
Un alt domeniu în care veți găsi schimbări majore este în icoanele cadrului. Biblioteca de pictograme include 40 de glifuri noi, și nu numai că au trecut de la utilizarea imaginilor la fonturi, așa că acum, în loc să adăugați cele două imagini "glyphicons- *" la "img", va trebui să adăugați cele patru fonturi" glyphicons "la"fonturi"și da, patru dintre ele. Acest lucru are legătură cu compatibilitatea browserului.
Din motive de performanță, fiecare pictogramă necesită o clasă de bază și o clasă specifică pictogramei. Acum, pentru a adăuga o pictogramă de utilizator pe care o utilizați:
Comutarea de la imagini la fonturi, oferă control asupra colorării și dimensionării pictogramelor și, de asemenea, vă permite să înlocuiți pictogramele implicite cu unele personalizate care vă plac. Dacă vă întrebați unde puteți găsi astfel de pictograme de fonturi, Fontello este o resursă excelentă.
Componente JavaScript
Deși reproiectat și recreat, componentele JavaScript din Bootstrap 3.0 păstrează aceleași nume și utilizare. Cu câteva diferențe ușor și nu atât de blânde.
modals
Poate că unul dintre cele mai utilizate plugin-uri în Bootstrap este Modals. Veți găsi că este destul de similar, diferențele fiind că recipientele "modal-header", "modal-corp" și "modal-footer" nu sunt înfășurate într-un "modal-conținut" container. Deci, care a fost:
 
 
 
 
Schimbări la:
 
 
 
 
 
 
 
 
Da, este un pic mai mult markup, dar îmbunătățește capacitatea de reacție a componentei și îi permite, de asemenea, să deruleze întreaga fereastră de vizualizare în loc să aibă un parametru "max-height".
Pentru a le activa prin JavaScript, ai folosi aceeași metodă ca înainte.
$ ('# my-modal') .modal ('arată');
Restul plugin-urilor rămân aproape aceleași. Pe o notă specială, acordeonul a dispărut în favoarea panourilor pliabile, acestea funcționează cam la fel și au o sintaxă foarte asemănătoare. Cu unele clase schimbând un pic, ei mai au nevoie de plugin-ul de tranziții și nu necesită containere suplimentare.
De asemenea, pluginul Typeahead a dispărut din Bootstrap în favoarea pluginului Typeahead de pe Twitter.
Evenimente
Evenimentele JavaScript sunt acum grupate, dar ce înseamnă pentru tine? Ei bine, în Bootstrap două, pentru a asculta momentul în care o alertă în site-ul dvs. a fost "închide", adăugați:
$ ('# my-alert') .bind ('închide', funcția () );
Acum, în această a treia versiune, numele evenimentului s-a schimbat, numele este alocat cadrului, astfel încât fragmentul anterior ar fi:
$ ('# my-alert') .bind ('close.bs.alert', funcția () );
Mergeți mai departe și aruncați o privire asupra restului componentelor JavaScript Bootstrap pe care le puteți oferi (care sunt încă dependente de jQuery).
Componente noi
Există câteva componente noi în partea CSS a cadrului, grupuri de grupuri și panouri.
Listați grupurile
Listează grupuri, din documentația oficială.
 
... sunt o componentă flexibilă și puternică pentru afișarea nu numai a listelor simple de elemente, ci și a celor complexe cu conținut personalizat.
 
Pentru a crea un grup de liste, creați o listă neordonată cu un "Lista-grup"și adăugați"Lista-group-item"la fiecare element de listă.
     
  • Lorem ipsum ... 
    •  
  • Dolor stai ... 
    •  

Puteți adăuga funcția "activ"la orice element din listă pentru ao evidenția, de asemenea, dacă se întâmplă să plasați o insignă în interiorul acesteia, va fi centrat vertical și aliniați-l spre dreapta, în interiorul articolului..
panouri
Panourile sunt o modalitate de a cutie în un anumit conținut pe site sau pe aplicație, evidențiați-l și dați-i un sentiment de unitate. Marcarea panoului este destul de simplă, iar conținutul său poate fi combinat cu elemente diferite pentru a obține un aspect unic.
Panourile pot avea anteturi și subsoluri și pot obține o semnificație specială cu binecunoscutul "sucess","eroare","avertizare"etc., de exemplu.
 
Segmentarea grupului
 
Unele conținut aici
 
     
  • Lorem ipsum ... 
    •  
  • Dolor stai ... 
    •  
 

După cum puteți vedea, panourile funcționează bine cu grupuri de liste și, de asemenea, cu mese fără bordură.
Customizer
De asemenea, noua în această versiune este personalizatorul în care, nu numai aspectul sa schimbat, este mult mai bine organizat și vă oferă control asupra unor lucruri precum lățimea ferestrei de vizualizare la care un anumit sistem Grid preia controlul.
Ca întotdeauna, puteți seta toate stilurile și culorile fonturilor. Este o temă imensă ca atare, așa că te-aș încuraja să mergi pe cont propriu și să te misti cu ea.

Suport pentru browser
O lungă perioadă de timp a fost suferința care ne-a fost dată de Internet Explorer, versiunea a șasea a fost un coșmar total, iar predecesorii săi au încă mult de recuperat. În versiunea 2. * Echipa Bootstrap a acceptat încă versiunea șapte din browser-ul Microsoft. În această nouă versiune a cadrului, suportul pentru IE șapte a dispărut, precum și pentru Mozilla Firefox 3.6 și versiuni ulterioare.
În mod specific, Bootstrap acceptă cea mai recentă versiune a tuturor browserelor majore (Safari, Opera, Chrome, Firefox și IE), atât în ​​Windows cât și în Mac, atunci când există ambele.
Pentru IE, suportă versiunea opt și înainte, și deși există câteva proprietăți pe care browserul nu le oferă, cum ar fi "border-radius", cadrul este pe deplin funcțional numai cu unele aspecte minore de aspect și simt. De asemenea, IE opt necesită answer.js pentru suportul de interogare media.
Pentru a obține o listă detaliată a soluțiilor și atenturilor pentru diferitele browsere (tuse Internet Explorer tuse) uitați-vă la documentele oficiale.
Concluzie
De la început, Bootstrap a fost un instrument excelent pentru prototiparea rapidă și crearea de site-uri și aplicații web excelente, iar această a treia versiune nu este diferită. Dacă aveți nevoie doar de un singur motiv pentru a-l utiliza, aș merge cu siguranță pentru sistemul Grid, cu creșterea navigării pe dispozitive mobile și întotdeauna mărirea dimensiunilor ferestrei de vedere acolo, răspunsul este acum mai mult decât oricând. Și în această ultima versiune, aceasta este zona în care Bootstrap strălucește cel mai mult. 
Dacă aveți nevoie de ajutor pentru a începe, încercați una dintre șabloanele Bootstrap ușor de utilizat disponibile pe Envato Market.

	
	
			
	   
	



Cod


	


			

							×